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/HELP100/pages/9106729632.

Formatting Rules

Formatting Rules require an expression for the condition logic, which must resolve to true or false. Only when the formatting rule returns true will 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 more information on formatting rules see Formatting Rule.

Useful Syntax

Here are some helpful syntax for gaining access to content on a screen that can be used in formatting rules:

Applied Examples

Highlight Selected Card using _select

1. Open the Companies List screen.
2. Using the layers section in Employees, click the Card.
3. In the properties click on the Styles tab, the Formatting Rules has an example of _selected that is used to highlight the selected card.

Mandatory Fields using _field.value

1. Open the Companies Form screen from the screens home page. This ensure there is no data.
2. Click on the Company Name field to open its properties. Ensure your screen is unlocked.
3. Add a Formatting Rule
   1. Set Rule Expression to _field.value == _NULL
      1. This expression will evaluate to true when this field is null.
   2. Click  next to Style.
      1. We will create a style to highlight the filed if the rule expression is true. Set the options how you feel is appropriate to highlight the field. Here is an example setup: 
      2. Name, Mandatory Fields.
      3. Text Colour field, #d0021b.
      4. Font Weight field, Bolder.
      5. Save your changes
   3. The style is added to the Formatting Rule.
      1. If there is an existing style to be used, this can be selected from the dropdown.
4.  Save your changes.
5. Close and reopen the Companies Form to ensure the new formatting rule is applied.
6. Lock the screen. Now the field label is red.
   1. 
7. Notice when you move your mouse over the field the label changes colour. We will look at this in the next section.

Styles States

As we have discussed styles cascade with the most recent style being applied. But style are also affected by how specific a CSS property is. In the last section the Company Name turned black when the mouse moved over the field, why? Because the these is a specific style for the colour of the text when the mouse moves over the field.

Using CSS Properties we can set styles and also when they get applied. lets see an example of this. Here will will change a button change on mouse over and when we click on it the item will grow in size:

1. Open the Companies List screen.
2. Click on the chevron on the Charts tile. This is the chevron that expands and contracts the charts tile.
3. In its properties, click on the Styles tab.
4. Add to CSS Properties a new entry.
   1. This entry will make the chevron rotate on mouse over. 
   2. CSS Tag, transform.
      1. Applies a specified transformation to an item. There are lots of transformations which can be applied, see CSS Transform.
   3. Value, rotate(180deg)
      1. .This will make the chevron rotate 180 degrees. This is useful if you have one image, like a chevron but want it to face different directions.
   4. State, Mouse Over
      1. This means the style is only applied when the mouse moves over the item.
   5. Save your changes.
5. Add to CSS Properties a new entry.
   1. This entry will enlarge the chevron while the mouse click is held down. 
   2. CSS Tag, background-size.
   3. Value, 20px.
   4. State, Mouse Down
      1. This means the style is only applied while the mouse click is held down. This can be useful for letting users know a button has been clicked.
   5. Save your changes.
6. Save your changes.

Testing 

1. Close an reopen the screen.
2. Lock the screen.
   1. Now when you move your mouse over the chevron it rotates. If you click the chevron it will temporarily enlarge. Tip, click and hold for a second to see it enlarge.

Exercise

Go back to the Company Form and add a CSS property to the shared style, Mandatory Fields, that applies the red text colour when the mouse moves over the Company Name field.

Images

The final part of this chapter is about adding images to a screen. Many of the templated items have a place holder for an image with all the appropriate styles setup.

Changing One Image

We can change an image by overriding a style.

1. Open the Companies List screen.
2. Click on the PhixFlow logo in the title.
3. In the properties that open click the Styles tab.
4. In the Background Image start typing CompanyIcon and the dropdown will filter. Select Company Icon.
   1. For background images we can either select an image from the drop down or use the add button to add a new one.
5.  Save your changes.
   1. A better solution would be to have this new icon in a shared style and add that to the logo, that way you can update the icon in a single location and have it propagate out through your application.

Most web browsers will cache images so the web pages load faster, therefore occasionally you may need to clear the images in your browser for your change to be seen by your browser.

The change made here is a local change meaning it only affects this icon.

Changing All Images

If you want to stylise your application with your own company logo this can be achieved by overriding the default icon style. As previously discuss changing a share style will impact all applications using this shared style not just your own.

1. Open the Companies List screen.
2. Click on the PhixFlow logo in the title.
   1. Or if you are changing a different component find an instance of it in a screen to gain access to its shared style.
3. In the properties that open click the Styles tab.
4. Double click the shared style you wish to edit.
   1. You may need to review each style to find the style you wish to update.
5. Update the style as required. 
6. For our example we will omit this.

In the next chapter we will look at creating new reusable templates from the layouts we make.