Creating the features.json files

After you create a new application, you create the features.json files that add menu items for the new application to the main navigation menu.

About this task

You need to create two versions of the features.json file. You use one file version for development purposes, and another file version for deploying the application. The files are identical, with two exceptions.
  • The value that you define in the navigation > route > link property differs between the development and deployment file versions.
  • The directory where you place the file for local development and deployment is different. You place the local development file into the devtoolkit_docker/orderhub-code/shell-ui/assets/dev directory. You place the deployment file into the devtoolkit_docker/orderhub-code/shell-ui/assets directory.
After you create a features.json file for development purposes, you can make a copy of the file and then make the necessary changes for the deployment version.

Procedure

Mono repository/Angular repository - setup

  1. In the orderhub-code directory, create the following directory structure.
    mkdir -p devtoolkit_docker/orderhub-code/shell-ui/assets/dev
  2. In the shell-ui/assets/dev directory, create a features.json file.
    This file contains an array of features each representing a menu option in the shell's left navigation bar. Define each feature by using the following properties.
    icon
    Name of the icon. You can find the list of acceptable icons in the /opt/app-root/src/shell-ui/assets/icons/shell-icon-set.svg file inside the om-orderhub-base Docker container.
    iconForRailStateOnly (optional)
    True/false - displays only the menu icon when the menu collapses. The default value is set to false.
    id
    A unique identifier of the feature to distinguish the custom features from the features provided with the product. Prefix the ID with custom.
    navigation
    Describes how to navigate to this feature.
    route
    The route object contains two properties.
    link
    The URL to start the feature's page as an IFRAME. The value that is specified here relies on the mode in which the container is running.
    • When you run Order Hub from your local development environment, the value is an absolute URL with a fully qualified domain name. For example, if the custom repository's development server is set to serve the UI on port 9600, then the value is set to https://localhost:9600/<base href>/<path to the page> assuming the repository's development server is running locally.

      Place the file for local development into the <path to orderhub code directory>/shell-ui/assets/dev directory.

    • When you create the file for the deployment, set the value to /order-management-customization/<base-href>/<path to the page>. The base-href represents the base href that is used to build the Angular repository.

      Place the deployment file into the <path to orderhub code directory>/shell-ui/assets directory.

    path
    Represents the route to use to associate the custom UI with the common user interface. When a user browses for a custom feature, the value displays in the browser's address bar. Use /<base-href>/<path to the page> as the path.
    parentFeatureId
    The parentFeatureId that is provided when you add the feature as a sub-menu of the existing menu.
    You can locate the value as an id in the features.json file in the base container. Run the following command to extract the file: 
    docker cp om-orderhub-base:/opt/app-root/src/shell-ui/assets/features.json features.json
    sequence
    The sequence value that is provided to add a new feature or sub-menu to the navigation. The sequence value determines where the new feature or sub-menu appears in the navigation. For more information about sequence values, see Positioning features in the navigation menu.
    title
    Title of the menu. This field supports globalization. To use the translation service, use the translation property key as the value, for example features.custom-feature-title.
    type
    Always set the type value to IFRAME.
    enablement Condition (optional)
    Specifies conditions when the feature is enabled. When it is not specified, it enables the feature for all users by default.
    byResourceId
    Users must have access to a comma-separated list of resource IDs to access the UI.
    hidden
    An options property that hides a feature on the ribbon. The default value is false. Use this property to access hyperlinks within a UI module. A user can bookmark or share the feature by copying the URL from a browser.

    See the following features.json file example for development.

    devtoolkit_docker/orderhub-code/shell-ui/assets/dev/features.json
    Figure 1. Sample features.json for development
    [
{
  "id": "monorepo",
  "title": "Custom Mono Repo",
  "icon": "programs-30",
  "parentFeatureId": "oms-inventory-root",
  "sequence": "10.4011",
  "iconForRailStateOnly": true,
  "navigation" : {
	"route" : {
		"link": "https://localhost:9300/custom-monorepo/custom-page1/monorepo/home",
		"path": "/custom-monorepo/custom-page1/monorepo/home"
	}
  },
  "type": "IFRAME"
},
{
  "id": "angularrepo",
  "title": "Custom Angular Repo",
  "icon": "tool-30",
  "parentFeatureId": "oms-order-hub-l1",
  "sequence": "10.16",
  "navigation" : {
	"route" : {
		"link": "https://localhost:4000/custom-angularrepo",
		"path": "/angularrepo"
	}
  },
  "enablementCondition": {
       "byResourceId": "BUCWSP"
  },
  "type": "IFRAME"
}
]

    After you create your development version of the file, you can then make your changes for deployment. See the devtoolkit_docker/orderhub-code/shell-ui/assets/features.json example file for deployment.

    devtoolkit_docker/orderhub-code/shell-ui/assets/features.json
    Figure 2. Sample features.json for deployment
    [
{
  "id": "monorepo",
  "title": "Custom Mono Repo",
  "icon": "programs-30",
  "parentFeatureId": "oms-inventory-root",
  "sequence": "10.4011",
  "iconForRailStateOnly": true,
  "navigation" : {
	"route" : {
		"link": "/order-management-customization/custom-monorepo/custom-page1/monorepo/home",
		"path": "/custom-monorepo/custom-page1/monorepo/home"
	}
  },
  "type": "IFRAME"
},
{
  "id": "angularrepo",
  "title": "Custom Angular Repo",
  "icon": "tool-30",
  "parentFeatureId": "oms-order-hub-l1",
  "sequence": "10.16", 
  "navigation" : {
	"route" : {
		"link": "/order-management-customization/custom-angularrepo",
		"path": "/angularrepo"
	}
  },
  "enablementCondition": {
       "byResourceId": "BUCWSP"
  },
  "type": "IFRAME"
}
]
  3. Feature title translation
    Create the language-specific files in the shell-ui/assets/i18n directory. The languages that are supported by default are as follows.
    • de.json
    • en.json
    • es.json
    • fr.json
    • it.json
    • ja.json
    • ko.json
    • pl.json
    • pt.json
    • ru.json
    • tr.json
    • zh-Hant.json
    • zh-Hans.json
    This file follows the Angular standard convention for translation files. For example, if the title of the feature is features.custom-feature-title, then the translation .json file contains:
    {
  ...,
  "features": {
    "custom-feature-title": "New custom UI"
  },
  ...
}