Versions Compared

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

Creating your own palette or adding your own templates to existing palette can help you save time and effort. PhixFlow is installed with two palettes that can be used to create your own palette items. Additional palettes can be installed, via Template Packages, for more detail on how to do this see About Template Packages.


Creating a Palette

To create a palette:

  1. In the repository navigate to your Application → Palette and select 
    Insert excerpt
    _new
    _new
    nopaneltrue
    .
  2. PhixFlow opens a properties tab for the palette. Name the palette and save it.
  3. In your application navigate to theClick the 
    Insert excerpt
    _
    layer_list
    template
    _
    layer_list
    template
    nopaneltrue
    Template section, click the  button to see all the templates in the repository.Drag components  icon to display the available templates that can be used in your palette.
    1. If you have not created any templates yet see Creating Layout Templates.
  4. The templates can be dragged into into the Component list of your palette.
  5. Optionally set up Default Components.
  6. Optionally define Palette Groups.
  7. Save your palette.
  8. , define logical Palette Groups and drag templates into the components section.
  9. Optionally, The palette and template components can be moved to a package where you will be able to define the Default Components.
    1. In the repository expand Packages and select 
      Insert excerpt
      _new
      _new
      nopaneltrue
    2. Create your package and complete the details,
      1. If you want to define default components, tick Template
      2. In the Template Details section, define the defaults you want your palette to use.
      3. Note you only need to define these if you are creating a Palette that you will use as your default palette.
    3. When you create a new application and select your package it will automatically create all the associations to use your content. If you add your palette after you have created your application and want to set it as the default palette or just override some of the settings, you will need to:
      1. Open the properties for your application by double clicking on it
      2. Click the Styles tab.
      3. Scroll down to Default Components.
      4. Set the values as appropriate
      5. Save your changes and any defaults you have set will now be used. 

Removing Palettes Items

To remove items 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 from the repository.You can also configure PhixFlow to use automatically your prefered palette; see application properties → Basic Settings → Default Component Palette.

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. 

Default Component are set at the application or system level:

  1. Application Level 
    1. Open the properties for your application by double clicking on it
    2. Click the Styles tab.
    3. Scroll down to Default Components.
    4. Set the require defaults.
  2. System Level
    1. Open Administration Menu → System  → Configuration
    2. Scroll down to Default Components.
    3. Set the require defaults. Note that Application Level defaults will override system one.

Anchor
AddingToAPalette
AddingToAPalette

Adding to a Palette

If you have a component that you want to add to a palette, you must first copy it as a template Template; see Creating Layout Templates.

To add a template to a palette:

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

Removing a Palette Item

To remove items 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 from the repository.

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

Palette Properties

Insert excerpt_parent_parentnopaneltrue

Basic Settings

FieldDescriptionNameName of the palette.Help URL

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.

PhixFlow displays the palette header bar with a  Insert excerpt_help_helpnopaneltrue icon which links to the URL specified here.

Components

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

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

Click Insert excerpt_layer_list_layer_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_layer_list_layer_listnopaneltrueBigstring ComponentLong ComponentFloat ComponentTrue/False ComponentDate ComponentDateTime ComponentAction ComponentForm ComponentCard Component

    Iframe
    srchttps://www.youtube.com/embed/bMcZx1zt-bQ?rel=0
    width560px
    height315px

    Palette Groups 
    Anchor
    group
    group

    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:

    .

    Adding a Palette Group

    1. Click
      Insert excerpt
      _new
      _new
      nopaneltrue
      .
    2. PhixFlow opens the Palette Group properties.
    3. Set the name and order. Add the components you require.
    4. Insert excerpt
      _finish
      _finish
      nopaneltrue
      .

    Removing a Palette Group

    To remove a group from the palette, use the

    Insert excerpt
    _delete
    _delete
    nopaneltrue
     in the toolbar.


    Pallet Group Properties

    FieldDescription
    NameName 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 

    Insert excerpt
    _template_list
    _template_list
    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

    FieldDescription
    TooltipThe description that will appear at the tooltip for this palette.
    DescriptionWe recommend you always add a description of this palette.


    Insert excerpt
    _audit
    _audit
    nopaneltrue

    Can I Add New Components to a Theme?

    Yes. Whenever you want to reuse an item severlhave to set up a component, such as a new area or button, decide if you might need the same thing again. If so, create a template of the component, so it is ready to use. Otherwise you have to repeatedly combine the building-block components and set the properties to recreate the component. Once you have a template, you can add it to Theme 2. 

    Iframe
    srchttps://www.youtube.com/embed/bMcZx1zt-bQ?rel=0
    width560px
    height315px

    Note

    Once you have installed Theme 2 and made changes, do not reinstall it. This process overwrites any changes you have made.

    For example, you create a Field Column that is auto sized to use all the available space. To add this to Theme 2.

    1. Find the component in the repository. Right-click and select Copy as a template
    2. PhixFlow adds the component to the applications repository folder called Templates.
    3. Optionally, drag the component from Templates folder in the repository, to the  Theme 2 package
    4. To make it available to other application designers, drag it to a palette. This can be either one of the existing Theme 2 palettes or a custom palette you have already created.

    Can I Change Theme 2?

    It may be necessary to update Theme 2 so that it reflects the design you want for your application. For example, you might want to add your own company and application logos, or change the background colour to one that matches your corporate colours.

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

    Before making any changes, consider the impact this will have on the template. For example, if you want to change an area component to have a blue (#2E2F4D) background, consider if you want all areas added from the palette to be blue.

    • If you do, update the area Shared Style so that all areas inherit the new CSS property. This is a global change to the palette.
    • If not, you could change the background colour by adding a new CSS Property or a Style Setting to the component. This is a local or object level change.  
      Even if you think you only want to change one object, consider creating a Shared Style that you add to the object. This means it is easy to apply to any other components that you decide need to be blue. 

    If you want to change the background colour everywhere in the palette, not just on areas, consider creating a new template and palette.

    TipTo learn how to design an application using Theme 2, see the /wiki/spaces/HELP11/pages/9711229273.

    Palette Properties

    Insert excerpt
    _parent
    _parent
    nopaneltrue

    Basic Settings

    FieldDescription
    NameName of the palette.
    Help URL

    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.

    PhixFlow displays the palette header bar with a 

    Insert excerpt
    _help
    _help
    nopaneltrue
     icon which links to the URL specified here.


    Can I Change the Styles of a Palette?

    See Editing a Palette