Creating the features.json files

After you create a new application, you create the features.json files that add your new application's menu items to the left 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 then make a copy of the file and then make the necessary changes for the deployment version.

Procedure

Mono repository/Angular repository - setup

  1. Create the following directory structure under the orderhub-code directory.
    mkdir -p devtoolkit_docker/orderhub-code/shell-ui/assets/dev
  2. Create a features.json file under shell-ui/assets/dev directory. 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 /opt/app-root/src/shell-ui/assets/icons/shell-icon-set.svg inside the om-orderhub-base Docker container.
    iconForRailStateOnly (optional)
    True/false - displays only the menu icon when the menu collapsed. 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 associate the custom UI on in the common user interface. When a user goes to a custom feature, the value displays at the browser's address bar. Use /<base-href>/<path to the page> as the path.
    parentFeatureId
    Provide parentFeatureId 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
    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 this 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",
  "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",
  "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 following 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",
  "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",
  "navigation" : {
	"route" : {
		"link": "/order-management-customization/custom-angularrepo",
		"path": "/angularrepo"
	}
  },
  "enablementCondition": {
       "byResourceId": "BUCWSP"
  },
  "type": "IFRAME"
}
]
  3. Feature title translation
    Create the language-specific files under 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"
  },
  ...
}