Overview

The components on a screen have properties for applying styles which affect their look and feel. For example, you can add a background colour 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 a style can be applied to a single component if you want to apply as a one-off style. You can combine both shared styles 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 in a shared style. 

Style

Ordering

PhixFlow applies styles using the principle of cascading style sheets (CSS). A . PhixFlow applies styles in order, starting with 1. Shared Styles and ending with 5. Positioning Settings. A 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.

Image Added

Where two or more styles are applied to the same aspect of a component, the later settings

overrides the earlier settings:

You can configure a shared style to have a condition that must be true for the style to be applied using a formatting rule; see Applying Formatting Rules and Formatting Rule properties. 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, which must be true for the style to be applied; see Expressions and PhixScripts.

Summary of the order in which styles are applied

Image Removed

Where Styles are Applied

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. 
• Shared Styles (Recommended) - a global-level shared style that can be applied to 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, the shared style. All components that use the style are automatically updated when the style is updated. It is recommended that all styles be applied using a shared style where possible.
• 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 - fixes where a component should appear and what size it should be. This is applied at the object-level.

Image Removed

Creating Shared Styles

Shared Style

Shared styles are the recommended approach a they give an application a consistent look and feel. Rarely is a style used only once!

In chapter 12. Screen Design Fundamentals of this course we set the same style in multiple places, a minWidth for our tiles. Applying the same style in multiple locations is a nightmare to maintain and inevitably leads to inconsistency in the application layout. Lets go back into our Invoicing Screen and remove replace these style with a single shared style.

1. Open the invoicing Screen and ensure it is unlocked.
2. Open the properties for Tile 2 and pin this tab.
   1. Click the Styles tab. 
   2. In the Shared Style section click 

      Insert excerpt
      _styles _styles nopanel true

      .
   3. In the repository window that opens, under My Application → Styles, click 

      Insert excerpt
      _

1. 1. addIcon _

1. Open the properties of the component you wish to apply the style to.
Click on the

2. 1. addIcon nopanel true

      .
   2. Drag the New Style window next to the Tile 2 properties.

Apply a Shared Style

To use the style in a component:

1. 1. Set the Name to, My Minimum Width
   2. Click 

      Insert excerpt
      _save _save nopanel true

       to allow us to set the styles.
   3. We can set styles here manually, however if you have built up a style and want to make it a shared style we can simply copy the CSS Properties as follows:
   4. With both properties windows visible from Tile 2 drag the CSS Property minWidth to the CSS Properties of the new Shared Style.
   5. Image Added
2. Remove the minWidth CSS Property from Tile 2.
3. Add the new shared style to the Shared Styles of Tile 2. This can be done one of the following ways:
   1. Drag the 

      Insert excerpt
      _

property_tabs

4. 1. styles _

property_tabsnamestyle

5. 1. styles nopanel true

.Scroll down to
6. 1.  icon from the open shared style into the Shared Style
section
7. 1. on Tile 2.
Click
8. 1. In Share Styles on Tile 2, click the 

      Insert excerpt
      _

style_list

9. 1. styles _

style_list

10. 1. styles nopanel true

        icon and then drag the My Minimum Width into Shared Styles.
.
11. Drag a style from the repository and drop it into the Shared Styles section of the properties.
PhixFlow adds the style to the list of shared styles that apply to the component.
12. Save all your changes.
13. Remove minWidth from the CSS Properties on Tile 3 and add the new shared style.

This means we can now amend the minWidth set in our shared style and it will be applied anywhere the style is used

Updating Shared Styles

In the example above we created the shared style and know where it is applied, this means we can edit it to suit our requirements. However when updating shared styles be careful as another screen, component or application could be using it and therefore will be impacted by your change.

When setting up your base style, for example if you have just installed PhixFlow and want to update the Serene Grey style with your own design, updating the shared styles should be no issue. However once your system is established, we recommend overriding styles with a new style rather than changing them.

Remember styles are applied in the order they appear, so if you have two Shared Styles the second style will take precedence over the first. 

While we recommend proceeding with caution, you can update the serene grey template package to suit your needs. This is most easily achieved when the system is new. Alternatively you can create a copy of the Serene Grey Template Package and work with that. See Copying Configuration. We will cover Template Package setup in /wiki/spaces/HELP91/pages/9050658798.

Formatting Rules

Formatting Rules require an expression for the condition logic, which must resolve to true for the shared style to be applied; see Expressions and PhixScripts. Earlier in this course we set industry icons in a grid based on the value of the Industry column's value, for example if industry column is Manufacturing use the manufacturing icon style. 

For details on formatting rules see Formatting Rule

Useful Syntax