Configure User Interface (UI) using JSON

By default, the Core Apps are deployed with the standard settings as part of the product deployment. These out-of-the-box (OOTB) configurations are available in all new tenants. However, you can tailor the custom UI configurations for each tenant to meet specific business needs. For example, you can customize the UI when you want to adjust the OOTB component for a particular domain, entity type, role, or user.

To customize:

1. Download the configuration JSON file attached for reference, or you can copy the JSON from the code block in a specific configuration topic.

2. Upon customizing, upload the JSON file back to the application. For more information, see How to upload UI Configurations.

Understand the Folder Structure

All the OOTB UI configurations are located in the "40-commerceUXConfig" folder of the "core-apps-config" repository in the JSON format. The following table lists the folder structure of the "core-apps-config" repository:

Guidelines for OOTB configuration

• The shared repository must be used only for reference and understanding the default OOTB configuration. All the actual customizations must be done in your tenant-specific repository only.

• All OOTB configurations with the prefix 'sys' indicate these are system default configurations and must not be customized.

• Configurations are defined per component and provide you the flexibility to override settings at different levels, such as domain, app, and entity type, with minimal configuration changes.

Understand UI Configuration format

The configuration structure consists of the following objects:

• context - indicates the context for which the configuration is applicable.

• jsonData – indicates the actual configuration for the defined context.

{
  "metaInfo": {
    "dataIndex": "config",
    "collectionName": "configObjects",
    "responseObjectName": "response"
  },
  "configObjects": [
    {
      "id": "global-settings_commerceUXConfig",
      "name": "global-settings",
      "version": "1.0",
      "type": "commerceUXConfig",
      "properties": {
        "createdByService": "system",
        "createdBy": "system"
      },
      "data": {
        "contexts": [
          {
            "context": {
              "component": "global-settings",
              "role": "_DEFAULT",
              "user": "_DEFAULT"
            },
            "jsonData": {
              "config": {
                "environmentIndicator": {
                  "indicatorVisible": true,
                  "color": "blue",
                  "envName": "Sandbox"
                }
              }
            }
          }
        ]
      }
    }
  ]
}

Understand Source Version Control

Syndigo leverages Git, which is a fast distributed revision control system, to manage and track configuration changes efficiently.

For information, see:

• Basics of GIT

• Branching and Merging

Get started

To get started with UI configurations:

1. In the GitHub repository (that contains the UI configuration JSON files specific to your tenant) create a folder such as 40-commerceUXConfig for all the custom UI configurations.

2. Identify the coalesce path that you will use for applying all the configurations. The most frequently used coalesce path is - component>>tenant>>domain>>app>> dockingPanel>>entityType>>relationship>>role. For more information, see Set Context Path.

3. Create a folder for the config-context and for each level with numbering as per the coalesce path.

   • 1105-pxmUiConfig

     • 100-config-context
     • 103-tenant
     • 104-domain
     • 105-app
     • 106-dockingpanel
     • 107-entitytype
     • 108-relationship
     • 109-role
     • 110-user

4. Customize the UI configurations based on your business needs. You can copy the base file from the tenant base folder and customize configurations at each coalesce path, as required.