Creating the features.json files

Create the features.json files to add your repo to the left hand navigation menu.

Mono repo/Angular repo - setup

1. Create the following directory structure under orderhub-code directory.
   mkdir -p <order_hub_code_directory>/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. Each feature is defined by the following properties.

   icon

   Name of the icon. The allowed icons list can be found 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. Default value is set to false.

   id

   A unique identifier of the feature to distinguish the custom features from features provided with the product. Prefix the ID with custom.

   navigation

   This object describes how to navigate to this feature.

   route

   This object contains two properties.

   link

   This property is 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 running 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.

     The file for local development should be put into the <order_hub_code_directory>/shell-ui/assets/dev directory.

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

     The file for deployment should be put into the <order_hub_code_directory>/shell-ui/assets directory.

   path

   This property 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 adding the feature as a sub menu of existing menu.

   The value can be located 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

   This value must always set to IFRAME.

   enablementCondition

   This is an optional property. This object 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

   This is an options property. Hides a feature on the ribbon. The default value is false. This property is used to access hyperlinks within a UI module. A user can bookmark or share the feature by copying the URL from a browser.

   For example, the following shows a sample features.json file for development.

   <order_hub_code_directory>/shell-ui/assets/dev/features.json:

   [
   {
     "id": "monorepo",
     "title": "Custom Mono Repo",
     "icon": "programs-30",
     "sequence": "10.4011",
     "iconForRailStateOnly": true,
     "navigation" : {
   	"route" : {
   		"link": "https://localhost:9300/custom-monorepo",
   		"path": "/monorepo"
   	}
     },
     "type": "IFRAME"
   },
   {
     "id": "angularrepo",
     "title": "Custom Angular Repo",
     "icon": "tool-30",
     "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.

   For example, the following shows a sample features.json file for deployment.

   <order_hub_code_directory>/shell-ui/assets/features.json:

   [
   {
     "id": "monorepo",
     "title": "Custom Mono Repo",
     "icon": "programs-30",
     "sequence": "10.4011",
     "iconForRailStateOnly": true,
     "navigation" : {
   	"route" : {
   		"link": "/order-management-customization/custom-monorepo",
   		"path": "/monorepo"
   	}
     },
     "type": "IFRAME"
   },
   {
     "id": "angularrepo",
     "title": "Custom Angular Repo",
     "icon": "tool-30",
     "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 under the shell-ui/assets/i18n directory. The languages that are supported by default are:

   • 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 Angular's standard convention for translation files. For example, if the feature's title is features.custom-feature-title, then the translation .json file contains:

   {
     ...,
     "features": {
       "custom-feature-title": "New custom UI"
     },
     ...
   }