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 a style can be applied to a single component as a one-off object-level style.

Style Ordering

PhixFlow applies styles using the principle of cascading style sheets (CSS). 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:

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

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 
      Error rendering macro 'excerpt-include' : No link could be created for '_styles'.
      .
   3. In the repository window that opens, under My Application → Styles, click .
   4. Drag the New Style window next to the Tile 2 properties.
   5. Set the Name to, My Minimum Width
   6. Click  Apply to allow us to set the styles.
   7. 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:
   8. With both properties windows visible from Tile 2 drag the CSS Property minWidth to the CSS Properties of the new Shared Style.
   9. 
3. Remove the minWidth CSS Property from Tile 2.
4. Add the new shared style to the Shared Styles of Tile 2. This can be done one of the following ways:
   1. Drag the 
      Error rendering macro 'excerpt-include' : No link could be created for '_styles'.
       icon from the open shared style into the Shared Style on Tile 2.
   2. In Share Styles on Tile 2, click the 
      Error rendering macro 'excerpt-include' : No link could be created for '_styles'.
       icon and then drag the My Minimum Width into Shared Styles.
5. Save all your changes.
6. 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/HELP11/pages/9711197766.

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

dummy

dummy