This page is for application designers who want to know how to use style settings.
Overview
The components of a screen have properties for applying styles which affect their look and feel. For example, you can add background colours components or set how a button reacts when the mouse passes over it. Styles can be applied using a shared style which is reusable and provides a consistent look and feel across your application, or it can be applied at the component level if you want to apply a one-off style.
You can use both global-level and object-level styling on the same 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 2180087878, below.
Where to Apply Styles
Every component has a Style Properties tab with the sections:
- Styles Settings - a set common formatting options for the component. 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 a component. To use an object-level style on multiple components, you have to set the style properties for each component.
- Shared Styles (Recommended) - a global-level shared style that can be applied multiple components to give 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 components that use the style are automatically updated. It is recommended that all styles be applied using a shared style.
- Formatting Rules - Apply a shared Style when the conditions of a rule are satisfied. Formatting Rules are applied at the object-level.
- CSS Properties - a set of specific styles, defined using a CSS tags and their associated values. This is object-level styling.
- Position Setting - Specifies for a specific component where it should appear and what size it should be. This is applied at the object-level.
Creating Shared Styles
In the PhixFlow repository, navigate to Styles and click
Create New.- In the Basic Settings section, set the style options you require; see Style.
- If you want your shared style to include CSS Properties:
- Go to the repository.
- Expand your style.
- Right-click CSS Properties and click Create New.
- Set the tag and value and save; see CSS Properties
- When you return to the style property tab, the CSS Properties section is automatically populated.
- Save your style.
Sharing Styles
To use the style in a component:
- Open the component to which you want to apply a style.
- Drag the repository tab so that it is beside the component property tab.
- In the repository, find the style.
- Drag the style from the repository and drop it into the Shared Styles section of the component.
- PhixFlow adds the style to the list of shared styles that apply to the component.
A 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 component can have styles from one, some or all of the following settings:
- Shared Styles - global
CSS Properties - object
- Style Settings - object
- Conditional Formatting - global
- 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 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 Rules. 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 Expressions and Scripts.
