Branding

Colour and Icons

The standard way of branding your functionality in PYXI is to use Colour and Icons consistently. The following section discusses this on the assumption that you are building a ‘module’ of functionality, in this case, Asset Management. We will assume that we have chosen the colour

#4682B4
as our ‘theme colour’ for the module.

We want to apply this colour wherever it makes sense throughout the configuration in order to provide the user with a subtle, consistent reference point for everything to do with Asset Management.

Record Types

We can set the Colour field on a RecordType. This will be used in the header on record selection pages.

Typically, we would expect to set the theme colour on the ‘master records’ of the module, so we will set the colour #4682B4 on Asset, but not on utility RecordTypes such as AssetLocation and AssetType.

Similarly, we can specify an Icon for the Record Type in two ways. We can provide a standard icon to be used for the record type generally, including for example in the heading of record selection pages, using the IconName field. In addition, we can set an IconFieldName, being the name of a Category field – the icon for this record will be taken from whichever Category value is selected on that field for each record.

In our example, we set the default icon to laptop , but supplement this by specifying AssetType as the IconFieldName.

Sample Blueprint

[RecordType] Name, Colour, IconName, IconField Asset, #4682B4, laptop, AssetType

This results in the header of the record selection screen looking like this:

23 Assets

and individual record links looking like this:

Laptop (John Doe)
Security Pass (Jane Doe)

Fields

We want to use colour to help with individual fields that appear on records outside of our ‘module’. Typically this means any field on another record that is a link to our main Record Type, or a List of records from our module that appears on another record.

In our example Asset system, we attach Assets to People, as the person responsible for that Asset. We do this with a Field of type link, with a LinkedRecordTypeName of Person. This alone is enough to automatically have a list of linked Assets appear on the Person record, but we can go further and specify the colour of the list of records using the LinkedRecordListColour field, and also provide a more useful heading for these records (Assigned Assets) rather than the default Assets, using the LinkedRecordListFieldName field.

Sample Blueprint

[Field] RecordTypeName, FieldName, FieldTitle, FieldType, LinkedRecordTypeName, LinkedRecordListColour, LinkedRecordListFieldName Asset, AssignedTo, Assigned To, link, Person, #4682B4, Assigned Assets

This will result in the Assigned Assets list on a Person page looking like this:

Assigned Assets

Pages

Pages have many uses. Commonly, in a ‘module’ setup, you may have a Page that is the ‘master dashboard’ for the module, and/or in some cases, a separate Page used to manage any set-up and configuration of the module (usually restricted to a Group dedicated to management of the module).

The content of the entire page is customisable, and you may wish to consider using Customisations, discussed below, to affect the look of the page content.

At minimum, however, you will probably want to set a dedicated Icon for the page, which will be used in the page header and any links to it, and also to set the colour of that icon. This is done with the Colour and IconName fields of a Page.

Sample Blueprint

[Page] Name, IconName, Colour, TemplateScript Asset Management Dashboard, dashboard, #4682B4, …Dashboard Content…

The header of the Asset Management Dashboard Page will look like this:

Asset Management Dashboard

Steps

Steps are actions that can be taken for a specific record. They can be displayed on the record page, and also on any lists of records, where you will see the icon for each step. Colour is a particularly useful way to sign-post steps that are related to a ‘module’ of functionality, so it is good practice to set a relevant colour, as well as icon, for each step. These are set with the Colour and IconName fields of the Step record.

Sample Blueprint

[Step] Name, Title, RecordTypeName, SetName, IconName, Colour AcceptAsset, Accept, Asset, Responsibility, tick, #4682B4

This will result in a Step appearing on every Asset record. It will appear at the top of the page like this:

Accept

and in the Responsibility Display Set like this:

Responsibility

Accept

Customisations

If you really need to take full control of how a section of your PYXI application looks, you need Customisations. A Customisation is a record containing a block of standard CSS (Customised Style Sheet) that you write, and which can then be applied to Pages or Template Fields (i.e. a field set with type of ‘template’). The CSS in the Customisation is applied to that page or field display, but not to any other section of the PYXI application.

You should avoid being excessive in using Customisations that break-up the consistent look and feel of a PYXI application too much. However, there are certain situations where it can make sense. In the example below, we assume that we have an external assets system called My Asset System, in which all our assets are recorded, and we have a Field on our Assets RecordType that holds the ID of each asset record in that system. We want to include a box on the Asset record page that contains links to the asset in that other system, and we would like it styled in the colour scheme (#006400) and font of that system so it retains user-familiarity.

We create a Customisation record with CSS for a specific class of ‘myasset’, and a templateField where the template HTML is wrapped in a div of that class. We put the Field in a dedicated Display Set using SetName, and also set the SetColour to the same #006400 colour.

Sample Blueprint

[Customisation] Name, CustomCSS MyAssetSystem, <<< .myasset { background-color: #006400; padding: 5px 20px 20px 20px; color: white; font-family: 'Georgia'; } .myasset h1, .myasset h2, .myasset h3, .myasset h4, .myasset .item { font-family: 'Georgia'; color: white; } .myasset a { font-size: 1.4rem; color: white; } >>> [Field] RecordTypeName, FieldName, FieldType, FieldTitle, SetName, SetColour, TemplateScript Asset, MyAssetSystem, template, My Asset System, My Asset System, #006400, <<< <div class="myasset"> <p>Click to access {Name} in the My Asset System</p> <p><a href="https://myassetsys.com/asset/{MyAssetSysID}">Details</a> | <a href="https://myassetsys.com/history/{MyAssetSysID}">History</a></p> </div> >>>

The result is a box similar to the following displayed on each Asset page:

My Asset System

Click to access Laptop (John Doe) in the My Asset System

Details  | History 

Get Started