Styles

The styles area available at the App studio home page sees the start of the introduction of the ability to style some elements of the platform differently from the default styles applied.

As the development roadmap continues for the platform we will make these styles available to existing features, but for now, their use is limited to the areas defined at the bottom of this page

If you have any requests for the feature please add them in the comments below.

Editing the Style

The page below shows a list of styles that have been enabled on a site, every site created will have these 6 below as default:

You can click on the style to edit its values

Adding a style has no effect unless it is enabled against a rule or a feature - please see the separate support articles on applying styles to features like templates, rules and aggregate fields.

There are two types of style currently available

Standard Styles

When editing a standard style you can specify various elements to override and leave other elements to take the default style for the site

• Name - This is the name of the style to be applied - it must contain no spaces or special characters
• Description - an extended description - please also state where the style is used so that other app builders know that changes to the style may affect other areas
• Appearance - there are two options available -
  • • • • Normal - Displayed normally with no emphasis or frame
        • Cartouche - Displayed in a round-rectangular frame for emphasis
• Element - There are 3 options to specify which part of the item being styled does this style apply to - If you want a style to apply to both a label and the text entry then you will need to create 2 styles 
  • • • • Component - 
        • Label - the Label of a field or a report
        • Text - The text entered in an input element
• Font Size- Allows different font sizes to apply to the selected element as follows - these refer to industry standard styles for font sizes
  • • • • Medium - standard size (default)
        • XX-Small 
        • X-Small
        • Large
        • X-Large
        • XX-Large
        • Smaller
        • Larger

• Font Weight - Allows different font weights to apply to the selected element as follows
  • • • • Normal - standard font with no emphasis
        • Bold
        • Bolder
        • Lighter
        • 100 - 900 - these are specific weights, where 400 represents "normal" and 700 represents "bold"

• Colour - Allows colour to be selected for the element being styled- this pops up a selection option to allow either a palette based selection or an RGB based colour number - Here is a useful RGB Picker
• Background Colour - Allows colour to be specified for the background of the element being styled
• Is Global - Allows the style to be applied globally - these cannot be changed and is set for the default six added to every site

Chart & Report Styles

Our dynamic Card Report supports styles in addition to a range of our Charts as detailed below...

Chart styles are used to show specific colours on some charts matching values in a series or legend

For example - the set of values in the screen shot below 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.

For more information on applying these styles to charts, see this support article Chart Colour Options 

For the chart style, you add pairs of values for the option and it's associated colour

App Level

Styles can be applied to every aspect of an app if desired. This would mean that instead of applying the style individually to each field or template, you could have a default style across the entire app.

For instance, if you would like a particular aesthetic for the labels of all fields so that they are uniform and the colour matches your branding, you can do this through AppStudio.

First, create the desired style in accordance with the instructions above

Then, go into the app you would like to apply the style to and go to configure > Named Styles

Select the desired style and then which element you would like to apply it to (as explained previously). This will then apply to all labels/components/text across the app.

Form Level

Similarly with apps, to apply named styles to a form you can do so by going to forms like so and scrolling down to named styles:

Click on named styles and select which style you want to apply to the form:

Template Level

Styles can be applied to templates by going into the template and scrolling to the “named styles” section as shown here:

Select the named style and the component as mentioned above - this will apply it to the entire template.

Field Level

Finally, to add styles to specific fields, go the fields in question and scroll down to named styles:

And apply the standard value that you desire - this can be useful for when you want to highlight a specific field like a title/explanation.