PhixFlow Help

Shared Styles and Style Order

This page is for application designers who want to know how to use style settings.

Overview

Layout components have properties for applying styles to affect their format. For example, you can add background colours or borders to components. You can apply styles:

  • using a shared style that lots of layout components use. This is global-level styling, and it gives your application a consistent look and feel.
    To change an aspect of styling, you only need to change the style in one place, in the shared style. All layout components that use the style are automatically updated.
    If you change a shared style, remember to test that it looks correct for all components.
  • on individual layout components. This is object-level styling. It is useful to use this when you are experimenting with styles or you want to apply a one-off style to layout component.
    To use an object-level style on multiple components, you have to set the style properties for each component.

You can use both global- and object-level styling on the same layout component. PhixFlow applies styles in a specific order, with the values set at the object-level overriding those set globally. This is explained in the following video and in Style Order, below.

Where to Apply Styles

Every layout component has a property tab with the sections:

  • Shared Styles - lists any global-level shared styles that apply to the component
  • Styles - set common formatting options for the component
  • CSS Properties - lists specific styles, defined using a CSS tag and its value. 

See Layout for details.

Creating Shared Styles

  1. In the PhixFlow repository, right-click Styles and add a new style.
  2. In the Basic Settings section, set the style options you require; see Style
  3. If you want your shared style to include CSS Properties:
    1. Go to the repository.
    2. Expand your style.
    3. Right-click CSS Properties and click  Add
    4. Set the tag and value and save;  see CSS Properties.
    5. When you return to the style property tab, the CSS Properties section is automatically populated. 
  4. Save your style. 

Sharing Styles

To use the style in a layout component:

  1. Open the layout component to which you want to apply a style.
  2. Drag the repository tab so that it is beside the layout component property tab.
  3. In the repository, find the style.
  4. Drag the style from the repository and drop it into the Shared Styles section of the layout component.
  5. PhixFlow adds the style to the list of shared styles that apply to the layout component.

A layout component can have multiple shared styles and CSS properties. PhixFlow applies the formats in the order they appear in the property tab list.

Style Order 

PhixFlow applies styles using the principle of cascading style sheets (CSS). A layout component can have styles from one, some or all of the following settings:

  1. Shared Styles - global
  2. CSS Properties - object

  3. Style Settings - object
  4. Conditional Formatting - global
  5. Position Settings - object

PhixFlow applies styles in order, starting with 1, and ending with 5.

If a different style is applied to the same aspect of a layout component, the later settings override the earlier settings. For example, the style for a button border is set to:

  • 10px and black in a shared style
  • 2px and red in the component's style settings,

the button has a 2 pixel, red border.

You can configure a shared style, to have a condition that must be true for the style to be applied. This is a Formatting Rule. For example, you can hide an "Update" button until the user had made a change to the data.

Formatting rules require an expression for the condition logic; see Regular Expressions and pages in the Scripting topic.


Summary of the order in which styles are applied

Please let us know if we could improve this page feedback@phixflow.com