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 . Therefore styles are applied in the following 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

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

Apply a Shared Style

To use the style in a component:

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 nightmare 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

   Insert excerpt
   _unlock _unlock nopanel true

   ed.
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 pane that opens, under My Application → Styles, click 

      Insert excerpt
      _addIcon _addIcon nopanel true

      .
   4. Drag the New Style pane next to the Tile 2 properties, so they appear side by side.
   5. Set the Name to, My Minimum Width
      1. Click 

         Insert excerpt
         _save _save nopanel true

         , this is necessary to allow us to set the styles.
   6. 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. Image Added
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 

      Insert excerpt
      _styles _styles nopanel true

       icon from the open shared style into the Shared Style on Tile 2.
   2. In Share Styles on Tile 2, click the 

      Insert excerpt
      _styles _styles nopanel true

       icon and then drag the My Minimum Width into Shared Styles.

5. Insert excerpt
   _save _save nopanel true

    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/HELP91/pages/9050658798.

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. In the properties click on the Styles tab, 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.

Mandatory Fields using _field.value

1. Open the Companies Form screen from the screen's home page. This ensures there is no data selected.
2. Click on the Company Name field to open its properties. Ensure your screen is unlocked.
3. Add a Formatting Rule:
   1. Rule Expression, _field.value == _NULL
      1. This expression will evaluate to true when this field is null.
   2. Click

      Insert excerpt
      _addIcon _addIcon nopanel true

       next to Style.
      1. We will create a style to highlight the field if the rule expression is true. Set the options how you feel are appropriate to highlight the field. Here is an example setup: 
         1. Name, Mandatory Fields.
         2. Text Colour field, #d0021b.
         3. Font Weight field, Bolder.
         4. 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. Image Added
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 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. In its properties, click on the Styles tab.
4. 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.
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 feeding back to a user a button has been clicked.
   5. Save your changes.
6. 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.

Exercise

Go back to the Company Form and add a CSS property to the shared style, Mandatory Fields, which 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 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. In the properties that open click the Styles tab.
4. In the Background Image, start typing CompanyIcon and the dropdown will filter the results. Select Company Icon.
   1. For background images, we can either select an image from the dropdown or use the add button to add a new one.
5.  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 discuss 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. 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 not make any changes.

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