Adding Header Components to the UI (OMS / STORE)

How-to Guide

Changed on:

5 July 2024

Key Points

A step-by-step guide on how to add header components to the manifest.
How to specify the position of the components

Steps

Customise your app manifest

This is an app-level setting. When adding a component to the STORE or OMS head bar, a customised manifest is required. The manifest name should follow the format

`fc.mystique.manifest.<web-app-name>`

. Here is an example of how to add a customised OMS manifest:

Add headerDescendants field in manifest

Adding

`headerDescendants`

at the root level in the manifest requires the value to be a JSON object. To differentiate between mobile and desktop, both fields are necessary. Multiple components can be added within the

`desktop`

and

`mobile`

fields. Here is an example of the

`headerDescendants`

configuration:

1"headerComponents": {
2 "desktop": [ ], 
3 "mobile": [ ] 
4}

Language: json

Name: headerDescendants code snippet

Description:

headerDescendants code snippet

There is no limit to the number of components that can be added, so screen compatibility should be taken into account. Adding too much components may exceed the screen compatibility.

Specify components position

Component alignment can be specified using the

`align`

fields. The order of the components is not relevant. Alignment options include 'left', 'right', 'center', or 'centre'. The

`align`

field is not mandatory; if it is missing or contains an invalid option, the default alignment will be 'left'.

1 "headerComponents": {
2        "desktop": [
3            {
4                "align": "left",
5                "descendant": {}
6            }
7        ],
8        "mobile": [
9            {
10                "align": "center",
11                "descendant": {}
12                }
13            }
14        ]
15    },

Language: json

Name: headerDescendants code with align snippet

Description:

headerDescendants code with align snippet

Add component details

Add component details in the

`descendant`

field. Below is a text component example:

1 "headerComponents": {
2        "desktop": [
3            {
4                "align": "left",
5                "descendant": {
6                    "component": "fc.mystique.collapsible.text",
7                    "props": {
8                        "text": "textDesktop",
9                        "charCutoff": 100
10                    }
11                }
12            }
13        ],
14        "mobile": [
15            {
16                "align": "center",
17                "descendant": {
18                    "component": "fc.mystique.collapsible.text",
19                    "props": {
20                        "text": "textMobile",
21                        "charCutoff": 100
22                    }
23                }
24            }
25        ]
26    },

Language: json

Name: headerDescendants code with descendant snippet

Description:

headerDescendants code with descendant snippet

Example view

The result of adding a text component will look like this:

On mobile devices, the head bar will look like:

Adding Header Components to the UI (OMS / STORE)

Key Points

Steps

Customise your app manifest

Add headerDescendants field in manifest

Specify components position

Add component details

Example view

Building Blocks

By Type

Helpful Resources