Versions Compared

Key

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

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

In PhixFlow it is easy to drag a template component from a palette onto a screen. If the template component has a preferred parent configured, PhixFlow can will highlight the appropriate areas onto which you can drop the component. 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 container for data fields and text labels
  • a card container for cards
  • a button bar for buttons.
  • A tile container for tiles. The tile container has special properties that pay the tiles out responsively. May need to reword this but can we say why.

Live Search
spaceKey@self
additionalnone
placeholderSearch all help pages
typepage

Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


You can configure any components to have a preferred parent, but it is most useful to do this for components on the palette  palette. It will ONLY work for palette items and maybe template in the future. Consider rewording your statement about it being most usefu to something more definite. 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.   - We are going to group and apply preferred parents to theme 2.

Insert excerpt
_theme_list
_theme_list
nopaneltrue

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

See also

How to Configure Preferred Parents

Could we have a diagram that illustrates what is happening at a high level e.g. category → expected children?


  1. Create layout categories; see Layout Category Properties, below.
    • 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 SettingsLayout 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 area

Anchor
properties
properties

Step 4 illustrated:

Layout Category Properties 

Use layout categories to configure preferred parent area highlighting when you drag components from the palette onto a screen.

Insert excerpt
_property_toolbar
_property_toolbar
nopaneltrue

Insert excerpt
_parent
_parent
nopaneltrue

Basic Settings

FieldDescription
Name

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
_description
nopaneltrue

Insert excerpt
_audit
_audit
nopaneltrue