Create a mystique manifest page for testing component Examples

How-to Guide

Author:

Randy Chan

Changed on:

1 July 2024

Key Points

A step-by-step guide to show how to create a new manifest page.
This new manifest page will be used to play around with Component SDK examples from the other articles.

Prerequisites

UX Configure Overview

Getting Started Configuring Fluent OMS (webapps)

Steps

Go to the Setting page

Log on to OMX, go to the Settings page, and click the

`CREATE SETTING`

user Action button at the top right corner.

Create a new Setting: fc.mystique.manifest.oms.fragment.componentSDKExample

Create a new setting with the following details:

Name:

`fc.mystique.manifest.oms.fragment.componentSDKExample`

Context: ACCOUNT

Context ID: 0

Value Type: JSON

JSON Value:

1{
2    "manifestVersion": "2.0",
3    "routes": [
4        {
5            "type": "section",
6            "nav": {
7                "label": "i18n:fc.componentSDKExample.nav",
8                "icon": "view_list"
9            },
10            "pages": [
11                {
12                    "path": "componentSDKExample",
13                    "type": "page",
14                    "component": "fc.page",
15                    "nav": {
16                        "label": "i18n:fc.componentSDKExample.index.nav",
17                        "icon": "MdTab"
18                    },
19                    "props": {
20                        "title": "i18n:fc.componentSDKExample.page.title"
21                    },
22                    "descendants": []
23                }
24            ]
25        }
26    ]
27}

Language: json

Name: fc.mystique.manifest.oms.fragment.componentSDKExample code

Description:

[Warning: empty required content area]

Then click on the SUBMIT button to save.

add label translations into setting LANGUAGE_EN-AU

Add the label translation into your preferred language setting.

1"fc.componentSDKExample.nav": "Component SDK Example",
2"fc.componentSDKExample.index.nav": "Component SDK Example",
3"fc.componentSDKExample.page.title": "Component SDK Example",

Language: json

Name: label translation for manifest fc.mystique.manifest.oms.fragment.componentSDKExample

Description:

[Warning: empty required content area]

add fc.mystique.manifest.oms.fragment.componentSDKExample into fc.mystique.manifest.oms

Go to setting fc.mystique.manifest.oms and add the following code into the JSON VALUE:

1,
2{
3    "type": "reference",
4    "settingName": "fc.mystique.manifest.oms.fragment.componentSDKExample"
5}

Language: json

Name: Code snippiet for fc.mystique.manifest.oms

Description:

[Warning: empty required content area]

Check the result

We have created a new manifest page in settings, added label translation, and added the manifest page into OMS.

To see the result, click the "refresh" button at the browser level to reload the OMS. The component SDK Example menu should be displayed in the nav bar. Click on the item, and you should able to see a brand new blank page with the heading "Component SDK Example":

And now you are ready to start playing with Component SDK examples!

Adding your custom component to this page

After creating your custom component in Component SDK and registering it in the

`index.tsx`

, you can now add it to the descendants section.

For example, here is the code snippet for adding fc.MyCustomerCard into the manifest:

`{`

`"component": "fc.MyCustomerCard"`

`}`

Create a mystique manifest page for testing component Examples

Key Points

Prerequisites

UX Configure Overview

Getting Started Configuring Fluent OMS (webapps)

Steps

Go to the Setting page

Create a new Setting: fc.mystique.manifest.oms.fragment.componentSDKExample

add label translations into setting LANGUAGE_EN-AU

add fc.mystique.manifest.oms.fragment.componentSDKExample into fc.mystique.manifest.oms

Check the result

Randy Chan

Building Blocks

By Type

Helpful Resources