Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

A palette provides quick access to set of configured templates, which you can dragging onto forms to create components. 

PhixFlow comes with two default palettes:

  • Basic Components: contains all basic components, such as String Field and CheckBox without any additional labels and styling.
    Image Removed
  • Labeled Fields: contains a set of predefined form fields that have configurable labels. This is the palette to use when designing application forms. 
    Image Removed

    You can also install additional Theme palettes. These are designed to have everything you need to create GUI screens by simply dragging the tiles from the palette into a screen. See also About ThemesUsing Theme 2 and /wiki/spaces/HELP11/pages/9711229273.

    You can also configure PhixFlow to use automatically your prefered palette; see application properties → Basic Settings → Default Component Palette.

    Panel
    borderColor#7da054
    titleColorwhite
    titleBGColor#7da054
    borderStylesolid
    titleSections on this page

    Table of Contents
    indent12px
    stylenone

    Creating a Palette

    To create a palette:

    Right-click the repository branch → Application → Palette and select  Insert excerpt_add_addnopaneltrue.
  • PhixFlow opens a properties tab for the palette. Name the palette and save it.
  • In the Screens section, click the  Insert excerpt_layout_list_layout_listnopaneltrue button to see all the templates in the repository.
  • Drag components into the Component list.
  • Optionally set up Default Components.
  • Optionally define Palette Groups.
  • Save your palette.
  • To remove items from a palette, right-click on the item in the palette and click  Insert excerpt_delete_deletenopaneltrue. This removes the component from the palette, but does not remove it from the repository.

    Default Components

    For any screen that you design, there are common elements, such as forms, true/false fields, or fields for specific types of data, such as long strings or floating point numbers. After you have added these to the Components section of the palette properties, use the Default Component section to select which of the components you want to use for the base components. PhixFlow displays these in a "Base Component" palette. 

    Adding a Template to a Palette

    Insert excerpt
    _Banners
    _Banners
    namescreen
    nopaneltrue

    Overview

    You can make changes to the palettes, by adding components or removing them. You can also change the appearance of components in a palette, for example to use corporate colours.

    You may prefer to leave the palettes supplied by PhixFlow unchanged and instead create your own palette.

    Changing Styles

    Warning

    Changing the style of a component on the palette affects any future use of the component for all applications that have access to the palette. Existing uses of the component are not affected.

    Changing shared styles affect all existing uses of the component as well as future uses; see Screen Styling.

    For example, if you change a button to have a pink background:

    • using the style, only new buttons are pink
    • using the shared style, in any application all the components that use that colour setting will turn pink.

    To change a palette component without affecting any existing uses of it, create a style that overrides the existing style.

    1.  In the palette, right-click on a component and select  
      Insert excerpt
      _edit
      _edit
      nopaneltrue
      .
      If you need to find a child component, such as a header on a complete screen, right-click on the parent and select 
      Insert excerpt
      _repository_find
      _repository_find
      nopaneltrue
      This lists all the child components. Double-click the specific component to open its properties.
    2. In the component properties, click on the 
      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
      .
    3. Edit the style properties to have the required settings; see Style properties.
    4. Insert excerpt
      _save
      _save
      nopaneltrue
       your changes.


    To change an aspect of the style of all components in a palette, for example to add a company logo or change the colour scheme to that of your company:

    1.  In the palette, right-click on a component and select  
      Insert excerpt
      _edit
      _edit
      nopaneltrue
      .
    2. In the component properties, click on the 
      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
      .
    3. In the Shared Styles section, click
      Insert excerpt
      _add
      _add
      nopaneltrue
      .
    4. Edit the shared style properties to have the required settings; see Style properties.
    5. Insert excerpt
      _save
      _save
      nopaneltrue
       your changes.

    The following video shows how to do this.

    Iframe
    srchttps://www.youtube.com/embed/X8A_8l4rSMM?rel=0
    width560px
    height315px

    Adding Components

    If you have a component that you want to add to a palette, you must first save a copy

    it

    as a template component; see Making Template Components.

    To add a template component to a palette:

    1. Open the repository
    tab and palette tab
    1. .
    2. Navigate to the palette and right-click select edit.
    3. Drag
    one of
    1. the
    tabs
    1. Palette tab into the workspace to show the tabs side-by-side.
    2. From the repository branch → Template, drag a template from the repository into a palette or open one of the groups and add it there.

    Removing Components

    To remove

    items

    components from a palette, right-click on the item in the palette and click 

    Insert excerpt
    _delete
    _delete
    nopaneltrue
    . This

    removes the component from the palette, but

    does not remove

    it Palette Properties

    the component from the repository.

    You can group components into sub-sections of a palette; see Palette Groups, below.

    Creating a New Palette

    1. In the repository navigate to your Application → Palette section and select 
      Insert excerpt
      _
    parent
    1. new
      _
    parent
    1. new
      nopaneltrue

    Basic Settings

    Field
    DescriptionNameName of the palette
    1. .
    Help URLPhixFlow displays the palette header bar with a 

    For palettes supplied by PhixFlow, this URL links to the help page about the palette.

    If you create your own palette, add a link to additional information to help people to use your palette.

    1. PhixFlow opens a properties tab for the palette. Name the palette and save it.
    2. Click the 
      Insert excerpt
      _
    help
    1. template
      _
    help
    1. template
      nopaneltrue
       icon
    which links
    1. to display the
    URL specified here.

    Components

    This section has a toolbar with standard buttons and  Insert excerpt_layout_list_layout_listnopaneltrue.

    The grid contains a list of components that this palette contains. To add a component to the list:

    Click Insert excerpt_layout_list_layout_listnopaneltrue to list all the components in the repository.
  • Drag components into this list to add them to the palette. 
  • To remove a template from the palette, use the Insert excerpt_delete_deletenopaneltrue in the toolbar.

    Default Components

    You can select a  template to use by default for common form fields.

    FieldDescriptionString Component              

    Add a template:

  • either select one from the drop-down list. 
  • or drag in a template from the repository list, opened from the Components section toolbar:  Insert excerpt_layout_list_layout_listnopaneltrueBigstring ComponentLong ComponentFloat ComponentTrue/False ComponentDate ComponentDateTime ComponentAction ComponentForm ComponentCard ComponentPalette Groups  Anchorgroupgroup

    This section has a toolbar with standard buttonsThe grid contains a list of the groups this palette contains.

    Use palette groups to organise your templates, making it easier to find what you need. For example, Theme 2 has 3 palettes. The Theme 2 - App Builder palette has different components grouped together.

    Image Removed

    We recommend you have a guiding principle for creating groups. For example, Theme 2 is organised with the most complete components, such as entire forms, first. Individual data fields are last. The groups in between have container components that you add to a screen first, then the tiles or tile elements that need to be dropped into a container.

    To add a group to the list:

    Click Insert excerpt_add_addnopaneltrue.
  • PhixFlow opens the Palette Group properties.
  • Set the name and order. Add the components you require.
  • Insert excerpt_finish_finish
    1. available templates. If you have not created any templates yet see Making Template Components.
    2. Drag the templates into the palette properties →  Component section.
    3. Optionally, define Palette Groups and drag templates into the groups.

    This creates a palette to which you can add components. This is only available to your application.

    Sharing a Palette

    If you want to share your palette with other applications, move the palette and template components from your application into a package that the other applications use. You can then set some components to be defaults.

    1. In the repository expand Packages and select 
      Insert excerpt
      _new
      _new
      nopaneltrue
      .
    2. Create your package and complete the details.
    3. Optionally, to make this a template package, tick Template; see Understanding Template Packages. Then specify the components you want to use as default components in the Template Details section.

    Setting Default Components

    When you create a new application you select a template package. PhixFlow uses the information in the template package to configure the default components. When creating a screen, if you drag in a table or attribute, PhixFlow uses the default component for forms, true/false fields, or fields for specific types of data, such as long strings or floating point numbers.

    You can see which default components have been set in Application Properties → 

    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
    .

    To

    remove a group from

    change the

    palette, use the Insert excerpt_delete_deletenopaneltrue in the toolbar.

    Pallet Group Properties

    FieldDescriptionNameName of the palette group.OrderEnter a number to specify where this group appears in the palette.Components

    This section has a toolbar with  standard buttons

    Click 

    default palette or components for your application:

    1. In the repository, expand Applications.
    2. Double-click on the application name. 
    3. Click the
      Insert excerpt
      _
    template
    1. property_
    list
    1. tabs
      _
    template_list
    1. property_tabs
      namestyle
      nopaneltrue
     to open the full repository list of Templates. If you want to see only templates from your application, find your application → Templates.

    Drag in the templates you want to appear in this group.

    Description

    Tooltip Enter a tooltip. This will be displayed when a user hovers their mouse pointer over the palette group.

    Description Enter a description for this palette group.

    Description

    FieldDescriptionTooltipThe description that will appear at the tooltip for this palette.DescriptionWe recommend you always add a description of this palette. Insert excerpt_audit_auditnopaneltrue
    1. .
    2. Scroll down to Default Components.
    3. Select the palette or components you want to use.
    4. Save your changes

    Next time you drag a table or attribute onto a screen canvas, PhixFlow uses the default components you have set.