Versions Compared

Old Version 5

changes.mady.by.user Fiona Sargeant (Unlicensed)

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

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 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.

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

If you are creating or editing template components for a palette, you can configure its preferred parent to enable highlighting. The nature and naming of parent types is up to you.  

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

Component Categories are used to highlight on a screen where an item is expected to be placed.

For example, a Tile Container has the Component Category "Tile Holder". If a user then drags a tile with "Tile Holder" specified as its Preferred Parent onto a screen that has a Tile Container it will highlight with a pink surround.

Image Added 

The PhixFlow palettes contain templates with component categories and preferred parent specified to help make creating screens easier. For example,:

  • Header areas highlight when header items are dragged over a screen.
  • Button bars highlight when buttons are dragged over a screen.


Note

The following palettes predate version 9.0.0 and the

template components are not configured with preferred parents

preferred parent feature is not supported for them. We recommend using the Serene Grey Template Package, see Installing Template Packages. 

Insert excerpt
_theme_

list

list2
_theme_

list

list2
nopaneltrue

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

See also

How to Configure Preferred Parents

Create layout categories; see Layout Category Properties, below.Either in the repository, expand the Layout Categories section and click 

How to Configure Preferred Parents

Define a Component Category and apply it to an object, then any objects we want to be place in this object have this Component Category set as their Preferred Parent. A Component Category is just a label that is used to create an association. Objects can have multiple Preferred Parents and can also have their own Component Category.

Image Added

Setup

  1. For the item you want to be the Parent,
    1. Open its properties.
    2. In Basic Settings → Component Category, 
    3. If you have a Component Category already defined, click
      Insert excerpt
      _
add
    1. componentCategory
      _
add
    1. componentCategory
      nopaneltrue
.Or in an area component properties, in Basic Settings → Layout CategoriesIn the palette, right-click on a component and select Edit. PhixFlow opens its properties.
    1.  and from the window that opens drag the component category into the box.
    2. If you have not defined a Component Category yet, click 
      Insert excerpt
      _add
      _add
      nopaneltrue
       to create one.
  • Edit an area template components. In Basic Settings → Layout Category, select a layout category.
  • Open the repository and expand Layout Categories.
  • Drag the repository tab to the left to display it next to the other tabs.
    1. For all the template items that you want to be placed in this Component Category repeat the following:
      1. Open the template section in the repository where your desired items is held.
        1. It is advised to add this feature to a template, however if you have not yet made your component a template, simply open its properties from where it resides.
      2. Double click on item to open its Properties.
      3. In the Preferred Parent Categories section click
        Insert excerpt
        _componentCategory
        _componentCategory
        nopaneltrue
        .
      4. From the repository, drag
    a layout category
      1. the required Component 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 parentstatic and dynamic text fieldsheader area, form areadata fieldsform areabuttonsbutton-bar area Anchorpropertiesproperties

    Step 4 illustrated:

    Image Removed

    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_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
      1. and save your changes. This is illustrated below:
      2. Image Added


    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. Simply hold the shift key to force the item into the desired location. See Moving Components on a Screen for more help on this subject.