13. Styles
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). 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:
Where two or more styles are applied to the same aspect of a component, the later settings override the earlier settings:
For example, the style for a button border is set to:
- 10px and black in a shared style
- 2px and red in the component's style settings,
The button will have a 2-pixel, red border.
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.
- Open the Invoicing screen and ensure it is Unlocked.
- Open the properties for Tile 2 and pin this tab.
- Click the Styles tab.
- In the Shared Style section click Style.
- In the repository pane that opens, under My Application → Styles, click .
- Drag the New Style pane next to the Tile 2 properties, so they appear side by side.
- Set the Name to,
My Minimum Width
- Click Save, this is necessary to allow us to set the styles.
- 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:
- With both properties panes visible from Tile 2 drag the CSS Property minWidth to the CSS Properties of the new Shared Style.
- Remove the minWidth CSS Property from Tile 2.
- Add the new shared style to the Shared Styles of Tile 2. This can be done in one of the following ways:
- Drag the Style icon from the open shared style into the Shared Style on Tile 2.
- In Share Styles on Tile 2, click the Style icon and then drag the My Minimum Width into Shared Styles.
- Save all your changes.
- 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.
Updating the Serene Grey shared style will impact all applications using this template package.
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/HELP90/pages/8986787931.
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:
Variable | Description | Example Use |
---|---|---|
Provides access to the data currently displayed on the form. | To gain access to data held in form fields. Example rule: _form.MyAttribute != _NULL returns true if MyAttribute is not null. | |
References the record currently selected on a grid. | This can be used in to get details of the currently selected record in a grid. Typically used in an expression external to a grid. Example rule: _grid.Amount > 1000 returns true if Amount on the grid is greater than 1000. | |
use _current in expressions for the CSS Properties of grid rows or cards. | Can be used to access data in the currently selected record in a grid. This is where we want to apply formatting rules within a grid. Example rule: _current.status == "Rejected". Checks the current record, whether selected or not, to see if the Status is Rejected. | |
The currently selected item, i.e. The selected record or card. | This is useful for styling a card component or rows in a grid that are selected. Example rule: _selected Checks if the current row or card is selected. | |
The value held in the form field. | Allows for the value of the field to be obtained without specifying the name. Example rule: _field.value == _NULL this can be used on any mandatory field and if the value is empty highlight the field to the user. | |
_user.name | This provides details of the current user's name. | Provides the users name, other pieces of user information are also available. See Internal Variables and search _user for more information. Example rule _user.name can be used to populate a welcome message. Create an actionflow, add a calculate action with the value -user.name and map this to a dynamic text field on a screen. We will see an example of this in a later chapter. |
Applied Examples
Highlight the Selected Card using _select
- Open the Companies List screen.
- Using the layers section, under Employees, click the Card.
- In the properties click on the Styles tab, the Formatting Rules has an example of _selected that is used to highlight the selected card.
- We do not need to make any changes for our example.
Mandatory Fields using _field.value
- Open the Companies Form screen from the screen's home page. This ensures there is no data selected.
- Click on the Company Name field to open its properties. Ensure your screen is unlocked.
- Add a Formatting Rule:
- Rule Expression,
_field.value == _NULL
- This expression will evaluate to true when this field is null.
- Click next to Style.
- 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:
- Name,
Mandatory Fields
. - Text Colour field,
#d0021b
. - Font Weight field,
Bolder
. - Save your changes
- Name,
- 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:
- The style is added to the Formatting Rule.
- If there is an existing style to be used, this can be selected from the dropdown.
- Rule Expression,
- Save your changes.
- Close and reopen the Companies Form to ensure the new formatting rule is applied.
- Lock the screen. Now the field label is red.
- 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:
- Open the Companies List screen.
- Click on the chevron on the Charts tile. This is the chevron that expands and contracts the charts tile.
- In its properties, click on the Styles tab.
- Add to CSS Properties a new entry:
- This entry will make the chevron rotate when the mouse moves over it.
- CSS Tag,
transform.
- Applies a specified transformation to an item. There are lots of transformations which can be applied, see CSS Transform.
- Value,
rotate(180deg)
- .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.
- State,
Mouse Over
- This means the style is only applied when the mouse moves over the item.
- Save your changes.
- Add to CSS Properties a new entry:
- This entry will enlarge the chevron while the mouse click is held down.
- CSS Tag,
background-size.
- Value,
20px
. - State,
Mouse Down.
- 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.
- Save your changes.
- Save all your changes.
Testing
- Close and reopen the screen.
- Lock the screen.
- 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.
- Open the Companies List screen.
- Click on the PhixFlow logo in the title.
- In the properties that open click the Styles tab.
- In the Background Image, start typing
CompanyIcon
and the dropdown will filter the results. Select Company Icon.- For background images, we can either select an image from the dropdown or use the add button to add a new one.
- Save your changes.
- 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.
- Open the Companies List screen.
- Click on the PhixFlow logo in the title.
- Or if you are changing a different component find an instance of it in a screen to gain access to its shared style.
- In the properties that open click the Styles tab.
- Double-click the Shared Style you wish to edit.
- You may need to review each style to find the style you wish to update.
- Update the style as required.
- 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.