Testing new applications or routes in Order Hub

If you created a new application or new route, use the Settings > Customization menu to add the application to the customization tenant for testing.

Note: This topic is applicable to the SaaS version of Order Hub only.
The following procedure explains how to register your application or route. If you customized an existing module and you want to see the changes in the customization tenant, see Testing existing module customizations in Order Hub.

Before you begin

Ensure that you are assigned the Tenant Administrator role. For more information, see Adding users.

Enable customization for one of your tenants. For more information, see Enabling the customization menu for a tenant.

Procedure

  1. In the Order Hub navigation menu, select Settings > Customizations.
    The Customizations page provides a hierarchical visual representation of the available features so that you can preview the new options when you add them to the navigation menu.

    You can select a feature under Menu list to view the details such as feature name, the path, and the URL where it is deployed.

  2. Click Create to add a custom feature to the menu.
  3. In the Feature ID field, enter a unique identifier for the feature.
    • The identifier must be unique.
    • The identifier must have no spaces.
    • The identifier field is case-sensitive. For example, custom-feature-1 and custom-Feature-1 are considered as two different IDs.
    • This ID is used in the features.json file that you need to update in your source code when you deploy the customizations.
  4. In the Icon name option, select the icon to display in the menu beside the feature name.
  5. In the Custom feature name field, enter the text to display in the menu.
    For example, custom-repo.
  6. Under Enable feature for, determine which user roles will have access to this feature.
    • Fulfillment Manager - Users who are assigned the Fulfillment manager role can access this custom feature.
    • Tenant Administrator - Users who are assigned the Tenant administrator role can access this custom feature.
  7. For the Hide this menu item option:
    • Clear this box if you are adding a new application. A new menu item will appear and when you click the menu item, your new application displays.
    • Select this box if you created a new route that is accessed from an existing page in an existing application. To link routes between applications, the route has to be registered with the user interface. By selecting this checkbox, you are registering the route with the user interface without creating a new menu item.
  8. Under Source location, determine where you want this tenant to pull the source from.
    Table 1. Source location options
    Option Description
    Local development mode Select this option to test your custom application from your local server. When selected, Order Hub connects to your local server, even if Hosted by IBM is also selected. This option ensures that the application is tested locally before you deploy it so that other users can access it. After the application is tested and ready to be deployed, you can clear this option.
    Note: If you are subscribed to IBM Sterling Order Management, in local development mode, you can change the Order Management System end point that is configured for the tenant to any other end point. You might need to change the end point that is configured if you have another other OMS installation where the configurations and data are configured specifically for feature development. You can use the BucSvcAngularStaticAppInfoFacadeUtil.setLocalDevModeCustomizationTeamOMSUrl() method in the app.module.ts file to point to any HTTPS management system URL.

    This override is used only for customization tenants and when Local development environment is selected.
    Path This option is applicable when Local development mode is selected.

    Enter the relative path that will be displayed in the browser address bar when the page is selected. For example, custom-page1.
    Local development mode URL This option is applicable when Local development mode is selected.

    Enter the URL to your local angular server. The URL must use HTTPS, must be valid, and must use a bucgenerichost hostname only.

    The local development mode URL is never used in the QA, STAGE, or PROD tenants.

    For example, 
    https://bucgenerichost:9300/custom-repo/custom-page1
    Hosted by IBM By default, Hosted by IBM is selected for all new features and it is recommend that you keep this unchanged for most configurations. This is the URL that is used in your QA, STAGE, or PROD tenants.
    • If Hosted by IBM and Local development mode are selected, then Order Hub connects to your local server.
    • If you deployed your customizations and want Order Hub to connect to IBM instead of your local server, clear Local development mode.
    Relative URL This option is applicable when Hosted by IBM is selected.

    Provide the relative path to your application starting from the base-href value from the package.json. Start with a forward slash: "/" and a trailing slash is not needed.

    • In case of child features, you must use the following pattern to avoid an invalid URL.
      <base-href value>/<relative angular route for the feature in routing module
          file>
    • This relative path is converted into the correct iFrame src for the tenant by Order Hub.
    • For example, /custom-repo, /custom-repo/custom-page1
    URL This option is applicable when Hosted by IBM is cleared. Specify this option if you are hosting the application on an external server.
    Provide the full URL to the feature. For example,
    https://www.example.com/custom-feature1
    Note: To allow Order Hub to connect to your external server, you need to upload a features.json file. For more information, see Deploying customizations for existing applications.
  9. Rearrange the applications in the navigation list as needed.
    Drag and drop
    You can drag elements in the menu by using the gripper icon (::) to the left of the name. You can also nest menu items.
    Overflow menu (3 dots)
    You can open the overflow menu by clicking the 3 vertical dots (Action icon) to the right of the name.
    • Move up: Move up in the menu.
    • Move down: Move down in the menu.
    • Move into: Move into a parent feature (nest as child).
    • Detach: Move out and set as parent.
    • Detach all: Move all children out and set as parents.
    • Delete: Delete menu item.
  10. Click Save.
    You can create multiple menu items and save all the custom applications at once.
  11. The Feature JSON value is generated based on the configurations on this page. You will need to use this value when you deploy the customizations. For more information, see Deploying customizations for existing applications.
    Note: If the feature has unsaved content, the value is not displayed as it is generated only after the changes are saved.

Results

If you created an application, the new feature is listed under Menu list. The feature is also now available in the main menu of the Order Hub user interface. Users who have the required permissions and roles can now access this menu.
Note: You might have to refresh your browser to view the newly added menu item.
  • To delete a menu item, select the feature from the Menu list and click Delete selected.
  • To discard your changes, click Revert unsaved.
If you create a route, then your route is now available from the existing pages. After you complete all testing, you can deploy the customizations to your tenants. For more information, see Deploying new applications.