Versions Compared

Old Version 14

changes.mady.by.user Anthony George

Saved on

compared with

New Version 15

changes.mady.by.user Fiona Sargeant

Saved on

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

This page is for application designers who are editing or creating palettes with custom components. It explains how to use layout categories on template components to set preferred parent highlighting.

Overview

The PhixFlow palette contains sets of template layouts and components. It is easy to drag a layout or component from a palette onto a screen.

If a component or layout on the palette has a preferred parent configured, PhixFlow will highlight the appropriate areas onto which you can drop it. This can be useful where you have a screen with different areas designed to display different things, such as:

  • a header for static and dynamic text
  • a form-area for data fields and text labels
  • a card-area for cards
  • a button bar for buttons
  • a tile container for tiles.
    Some palettes include layouts called tile containers and tiles. These layouts are configured to with styles and properties that ensure a screen is responsive to changes in screen size or form-factor.

Configure a preferred parent for a layout or component that is either already on the palette, or that you intend to add to the palette. The nature and naming of parent types is up to you.  

Note

The following palettes predate version 9.0.0 and the template components are not configured with preferred parents. 

Insert excerpt
_theme_list2
_theme_list2
nopaneltrue

This means when you drag components from them, PhixFlow is unable to highlight potential parent areas.

To install the latest version of Theme 2, which has been updated to add preferred parents, see Installing Template Packages.

See also

How to Configure Preferred Parents

  1. Create layout categories; see Layout Category Properties, belowsee Layout Categories properties.
    • Either in the repository, expand the Layout Categories section and click 
      Insert excerpt
      _add
      _add
      nopaneltrue
      .
    • Or in an area component properties, in Basic Settings → Layout Categories, click 
      Insert excerpt
      _add
      _add
      nopaneltrue
      .
  2. Edit an area component. In Basic Settings → Layout Category, select a layout category.
  3. Open the repository and expand Layout Categories.
  4. Drag the repository tab to the left to display it next to the other tabs.
  5. Open a component's properties.
    For example, in the palette, right-click on a component and select Edit. 
  6. From the repository, drag a layout category onto the Preferred Parent Categories list.

The following table shows some examples of the layout categories you could create, and the components that would be appropriate for them.

Template componentLayout category/preferred parent
static and dynamic text fieldsheader-area, form-area
data fieldsform-area
buttonsbutton bar

Anchor
properties
properties

Step 4 illustrated:


Notes
Note

When you are dragging a component from the palette, you can drop it onto any suitable container - it does not have to be a preferred parent. However, if you drop a component onto a container that is not a preferred parent, PhixFlow will look at any other containers in order to put it in there

?

Layout Category Properties 

Use layout categories to configure highlighting of an area that is a preferred parent, when you drag components from the palette onto a screen

.

Insert excerpt_property_toolbar_property_toolbarnopaneltrue Insert excerpt_parent_parentnopaneltrue

Basic Settings

FieldDescriptionName

Enter the name for the layout category, which PhixFlow will add to the Layout Categories section of the repository.

Drag layout categories from the repository into the Preferred Parent Categories section of components.

Insert excerpt_description_descriptionnopaneltrue Insert excerpt_audit_auditnopaneltrue