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, image 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). Therefore styles are applied in the following order, starting with 1. Shared Styles and ending with 4. Formatting Rules. A component can have styles from one, some or all of the following:

Accessing Styles

Clicking on a component on a screen opens its properties. There is a Styles tab which allows you to set the styling on the component.

Style Settings 

The Style Settings settings allow you to set the style of an object. This section provides clickable options for setting a style.

Apply a Style

To apply a style using the Style Settings section simply, tick the enable box and set a value. For example, the Width of this area has been set to 150px.

Inherited Styles

If a component has a style applied to it by a Shared Style, this will be displayed in the settings but the enabled box is not ticked. By clicking the style name this will take you to the origin of the style i.e. the Shared Style. For example, the Min Width (minimum width) of this area is set to 100px.

Shared Style

Shared styles are the recommended approach as they give an application a consistent look and feel, and you only need to set a style once. 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 challenge to maintain and inevitably leads to inconsistency in the application layout. Let's go back into our Invoicing screen and replace these styles with a single shared style.

1. Open the Invoicing screen and ensure it is  Unlocked.
2. Click Tile 2 to open the Styles tab and pin this tab.
   1. In the Shared Style section click  Style.
   2. In the repository pane that opens, under My Application → Styles, click .
      1. Drag the New Style pane next to the Tile 2 properties, so they appear side by side.
   3. Set the Name to, My Minimum Width
      1. Click  Apply, this is necessary to allow us to set the styles.
   4. 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:
      1. With both properties panes visible, from Tile 2 drag the CSS Property minWidth to the CSS Properties of the new Shared Style.
      2. 
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 in one of the following ways:
   1. Drag the  Style icon from the open shared style into the Shared Style on Tile 2.
   2. In Shared Styles on Tile 2, click the  Style icon and then drag the My Minimum Width into Shared Styles.
5.  Apply 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 cover Template Package setup in Understanding Template Packages.

Formatting Rules

Formatting Rules use an expression for the conditional logic that determines if a style is applied. The condition, or rule,  must return true for the formatting to be applied. For further information see:

• Expressions and PhixScripts for help writing expressions.
• Formatting Rules for help writing formatting rules.
• Internal Variables provide details of the internal variable available to expressions, such as screen width and user details.

Earlier in this course, we set industry icons in a grid based on the value of the Industry column's value, for example, if the industry column contains Manufacturing use the manufacturing icon shared style. 

Useful Syntax

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

Applied Examples

Highlight the Selected Card using _select

1. Open the Companies List screen.
2. Using the layers section, under Employees, click the Card.
3. On the Styles tab on the right, the Formatting Rules has an example of _selected that is used to highlight the selected card.
4. We do not need to make any changes for our example.

Styles States

As we have discussed, styles cascade with the most recent style being applied. But styles 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 there 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 are applied. Let's see an example of this. Here we will change a button, when the mouse moves over it and when it is clicked:

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. On the Styles tab:
   1. Add to CSS Properties a new entry:
      1. This entry will make the chevron rotate when the mouse moves over it. 
      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.
   2. 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 feeding back to a user a button has been clicked.
   3. Save your changes.
4. Save all your changes.

Testing 

1. Close and 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.

Images

The final part of this chapter is about adding images to a screen. Many of the templated items have a placeholder 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. On the Styles tab on the right, in the Image, start typing Software and the dropdown will filter the results. Select Software.
   1. For background images, we can either select an image from the dropdown or use the add button to add a new one.
4. Save your changes.
   1. The change made here is a local change meaning it only affects this icon. 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.

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 discussed, changing a shared style will impact all applications using this shared style not just your own, and in certain circumstances this is what we want.

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. On the Styles tab on the right, 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.
4. Update the style as required. 
5. For our example, we will not make any changes.

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