Styles

Overview

The Styles feature in App Studio introduces the ability to customise the visual presentation of specific App components beyond the default site and system styles.

There are two distinct style types. The reason for applying styles are commonly to either apply branding styles to Fields and Report or to draw attention to a key data values.

• Accessing Styles in App Studio
• Standard - Standard styles allow you to customise the appearance of a Field such as alignment, font colour, ...
  • Adding a Standard Style
  • Applying a Standard Style to Fields by Component Level (Field / Template / Form / App)
  • Dynamically applying a style to a Field using Rules
• Value - Value styles allow you to set a colour theme that can then be applied to a chart or card report.
  • Adding a Value Style
  • Applying a Value Style to a Report (Table / Card / Chart)
  • Use Case: Value Style in a Card Report

Accessing Styles

Styles reside in App Studio and are stored at a Global level so that they can be used across multiple Apps. To access the list of Custom Styles:

1. Log in to App Studio Home
2. Navigate to the Styles folder in App Studio
3. Click on a pre-existing style to edit it or click on Add to create a new style

Each Softools Site created is provisioned with six default styles.

Note: Adding or editing a style does not affect the platform until the style is explicitly applied to a rule or a feature (e.g. templates, aggregate fields, or reports). See the applications of Standard and Value styles below to use the styles added here.

Standard Styles

Standard Styles allow you to customise how a Field will appear to users, This allows you to take control of component elements such as alignment, font colour, font weight and more.

Adding / Editing a Standard Style

When adding a new Standard Style first we need to define what it is going to do and what level it will be available to apply from:

1. Give the Style a Name so when adding it to a component we know which style is being added
2. Add a Description which is also seen when selecting the style for a component
3. For a Standard Style, make sure the toggle is set to Standard.
4. Choose the component level that the style can be applied at.

NOTE: By not setting a component level, the style will be available to apply at any component level.

With the new style classified, we now can pick which attributes of the Field we would like to change the display of. If the toggle by the style attribute is on then it will override that attribute in the display. If it is not selected then the attribute style will be taken from wither a higher component named style or of none are applied then the system default.

The attributes that can be set are as follows. Appearance and Background Colour will apply to the whole Field component. The other attributes will override the label, value or both of a Field based on how it is added as a named style in the next section of this article.

• Appearance: Choose to add either a rectangular or rounded border for emphasis
• Font Size: Change the size of the text in the field label, value or both
• Font Weight: Set the weight of the text
• Text Colour: Click on the colour selector to set the new text colour
• Background Colour: Adds colour behind the label and value of the field
• Alignment: This will set the text of the label or value to left, centre or right base

To preview how the style will appear, click on the preview button at the bottom of the screen.

Applying a Standard Style to Fields by Component Level

Now that the styles have been added, we now look at how the styles get applied. The basic level to apply a style to is at the Field Level.

1. Open the Field to apply the style to
2. Scroll down to Named Styles and add as many styles as needed.
3. Select the Style and then whether the attributes of the style should apply to Label, Text, or both

Note: If multiple styles are set for a component the attribute taken will be from the first style named that has that attribute toggled on.

In the Field configuration there is a section to apply named styles.

Here we can see how adding a named style (or named styles in combination) at Field level results in the Priority Score being emphasised to the User in multiple locations.

Now that we see how the styles work, we can add them at higher component levels. Styles can be applied at higher levels to remove the redundancy of needing to apply the style to each Field individually. See the component specific support articles for how to apply Named Styles at these levels.

• Field: This will take effect for just the Field that the style is applied to
• Template: The named styles will be applied to all Fields in the Template
• Form: The named styles will be applied to all Fields in all Templates in the Form
• Report: This affects the display of Fields in a Table Report
• App: This will set a default for all Fields in all places they appear in the App
• Site: This sets the default for all Fields across all Apps

Note: Remember that styles available at different component levels are based on the 'Apply Style To' 

There are also a style hierarchies to remember when applying styles to the following App Components with the priority given to Fields, then higher level components.

• Field Style --> Template Style --> Form Style --> App Style
• Field Style --> Report Style --> App Level

Dynamically Applying Styles to Fields using Rules

There are some scenarios where you may only want a style to be displayed dynamically based on a record meeting specific Field criteria. 

Looking at the use case of having a priority score we may want to apply a red colour if the priority is low and green if the priority is high. To do this uses the Rules Engine. Please consult the Rules support article for specifics on how to set up the Rule. It will require a filter that is the Field criteria to meet in order to apply the style. It then also allows you to select a style to apply and which Fields to apply the style to when the rule is met.

We can create two styles for each rule:

• Red - Add a rule that applies the red background colour when the priority is less than 30
• Green - Add a rule that applies a green background colour when the priority is greater than 80

Rules will apply with priority to static styles at the Record level. Here we can see that in the Record the Priority score of 40 results in the Red Rule being applied. At Report level it still displays the static style applied at the Field level.

Dynamic rules can also apply to the Table Report level but it requires adding this to the report configuration explicitly. 

In the Table Report configuration, scroll down to rules and enable the rules which you would also like to apply at the Table Report level.

Note: Bear in mind that running rules can have a performance impact. Try to avoid adding too many rules to complex table reports and decide if the functionality is required if there is an impact to speed for users.

Value Styles

Value Styles can be applied to Tables, Charts and Cards to enforce consistent colour schemes across visualisations. This is most commonly to either establish a branding colour scheme or to associate a colour to a value.

An example here would be to have a consistent colour scheme across Reports that shows

• Red = Major Concerns and Immediate Corrective Action required
• Amber = Some Concerns and needs to be Monitored Closely
• Green = On - Track
• Blue = On-Hold
• Black = Closed

Then when we apply this to Table, Chart Report we can immediately see these values against each item. A use case would be to apply this Value Style to a Project Tracker in a Table Report as below:

Adding / Editing a Value Style

To configure Value Styles we do this by assigning pairs of values and their associated colours. Add a new style as before and set the definition and style type

1. Give the Style a Name so when adding it to a component we know which style is being added
2. Add a Description which is also seen when selecting the style for a component
3. For a Value Style, make sure the toggle is switched to Value.

Now add the value/colour pairs by selecting Add Value Style and setting both properties for the pair

The set of values in the screen shot above would allow you to have a pie chart showing grouped values where the pie segment for "Done" was green, and "To-Do" is Red. It allows consistent display across charts where values are best associated to colours.

Applying a Value Style to a Report (with Card Use Case)

Once we have created the Value Style, we then need to apply it to the particular Report. Depending on the Report type will determine how the values display.

• Table: The value style appears as a vertical coloured line at the start of each Record in the Table
• Card: The value style appears as a horizontal stripe at the top of each Card on the Report
• Charts: The value style is based on the value matching in the Primary Category Axis.

Application of the named style may differ slightly from Report Type to Report Type but it is similar and takes the following structure.

1. Navigate to the report that the Value Style will be applied to
2. Scroll down to the Named Styles configuration area
3. Add a new Named Style
4. Select the Style with the Value/Colour pairs
5. Select the Element of the Report that the colours will appear for
6. Select the Source Field which is the field that the values in the value pairs match to assign the correct colour to the element.

Value Style in a Card Report

Let's consolidate our understanding here by looking at the use case of adding a value style to a Card Report. To do this we will look at a Project App with a Kanban Card Report which shows and manages the distribution of Projects by Team.

This is great and we can reallocate projects by dragging them from one team to another but in order to do this we need to know the status of the projects at a glance. Knowing that we have Team 1 with three projects but all are currently on-hold and Team 2 has two red projects needing attention means we can see despite the number of projects, the best course of action is to reallocate one project to Team 1 who have capacity.

This is where we can use a Value Style. First we create a Value Style with value/colour pairs as below to display colours based on Project Status

Now that we have a Value Style to give colours based on project status, we can assign this to the Cards through a Named Style. On the Card Report add a Named Style to the border element.

The result is that our Card Report now gives an extra level of insight that makes it far more effective for resource allocation to projects.