Field Styling

When creating your apps for your site you may find you want to change the appearance of the fields such as the font size, font weight and colour.  This can be accomplished with 'Named Styling' which can be created by reading this article and can be used to change the colours option on charts with this article.

It is possible to apply these styles at a site, app, form, template and field level making it easier to make large changes to the styles in your site. Furthermore, you can add multiple styles to the fields to further specialised the appearance so you would not need to create a style only for a single occurrence.  

 

Site Level

To enable styles to a site, you would need to be at the homepage and click on the 'Configure' page at the bottom.

Once on the page, to add a style at a site level click on the 'Add Named Style' in which you can select the style and the element, then click Ok and 'Save' to apply the changes.

 

 

App Level

To enable the styles at an app-level you will need to enter the configure page in the app you would like to apply the styles. To change or apply styles to your app, you can do so from the 'Named Styles' template. This is the same as above by adding a named style and saving it.

 

Form Level

Similarly with apps to apply named styles to a form you can do so by entering the form you would like to apply the named style to then add the named style from the 'Named Styles' template at the bottom of the form.

 

Template Level

To add a named style to a template, which would style all fields onto that template you can select a style by accessing the 'Named Styles' template at the bottom of the selected template form you wish to apply the style too.

 

Template Layout Cell Level

You could also further specify the styles in the template at a template layout cell level where you can change the style for each individual field in the template. To do this you would need to click on the 'Design Template' button at the bottom of the form. Then to change the style for a field click on the edit icon of the field which would open up a pop up of the field where you can add a named style onto it.

 

Field Level 

The last level of named styling is at field level where by you can select the style of an individual field by click by entering the configuration page of the field then adding a style from the 'Named Styles' field at the bottom of the form in the 'Named Styles' template.

 

Hierarchy of Styles

Named styles uses a hierarchy to determine which style to apply to the fields. The order of hierarchy works with the lowest level being the field level being prioritised first and the highest level being the site level last. Therefore if you have applied a style at a field level it will override any other style being applied at the site, app and template level.

Please refer to the order of priority from the numbered list below:

1. Field
2. Template Layout Cell
3. Template
4. Form / Report
5. App
6. Site

An example of the hierarchy working in action can be found below in which a single field with the label 'To Do' has a blue text colour whereas all other fields in the template is coloured red.

By following the process above to apply this style, we would need to add a named style to the template level for the labels that would change the labels to red.

Then we would need to add another style at a field level to the field 'To Do' that would apply a style to the label thereby making the label have a blue font colour.

 

Multiple Styles

Now using the example below if we wanted to make the label for 'To Do' larger we would need to change the 'Font Size' attribute to the style. However, this style could also be used in other fields or in other apps in which we would not want a change in the style for this field to change the style in other fields. A solution for this is to apply multiple styles such as a style to just make a field larger. 

Firstly, we would need to create a new style which would only make the text larger.

Once the style is completed and saved, then all is left is to add the newly created style onto the field at a field level which is at the same hierarchy level as the previous style so both styles would be applied.