Linking between pages

As you develop pages, you might need to link to different pages that can be either within the same Angular application or to pages that are defined in other Order Hub applications.

Within the same Angular application

There are no Order Hub-specific behaviors in this flow. It is simply the common Angular routing between routes.

For example:
// import Angular router
import { Router } from '@angular/router';

...

// initialize some variables/constants
private router: Router
static readonly CREATE_EDIT_OPTIMIZATION_ROUTE: string = BucConstants.ROOT_TOKEN +
    '/create-edit-optimization-profile/createOptimizationProfile';

...

// navigate to the in app route
this.router.navigate([CREATE_EDIT_OPTIMIZATION_ROUTE], {
                    queryParams: {
                        viewType: 'Create'
                    }
                });

...

Across Order Hub Angular applications

To link across Angular applications in Order Hub, you must first declare the route as a feature/menu link to the Supply Chain common shell UI interface.

To see a list of readily available Order Hub pages that can be linked to, see the Order Hub pages that can be linked to section of this topic.

To define new pages (custom or default IBM pages) that need to be accessible, see the Registering a route externally to navigate across different Order Hub Angular applications section of this topic.

Then, write code following this example to route to the cross application page:
// import Angular router
import { getPostMessageDomain } from '@buc/common-components';

...

// navigate to the outside app route
window.top.postMessage({
        action: 'NAVIGATE',
        data: {
          path: '/order-management/workspace',
          queryParams: {
            ...
          }
        }
      }, getPostMessageDomain());

...

Order Hub pages that can be linked to

The following pages are registered as featured pages in the Supply Chain common shell:
Page Path
Home /order-management/workspace-home/workspace/welcome
Manage saved searches /order-management/workspace-manage-favorites/workspace/manage-favorites
Workspaces /order-management/workspace
Node search /order-management/node-search/node/search
Node search results /order-management/node-search-result/node/search-result
Node metrics /order-management/node-metrics-list/node/metrics-list
Node details /order-management/node-details/node/node-details
Node service capacity search /order-management/node-capacity-search/node/capacity-search
Outbound orders search /order-management/order-search/order/search
Inbound orders search /order-management/order-search/order/search-inbound
Returns search /order-management/order-search/order/search-returnorder
Work orders search /order-management/work-order-search/workorder/search
Orders search results /order-management/order-search-result/order/search-result
Order details /order-management/order-details/order/order-details
Order line details /order-management/order-line-details/order/order-line-details
Work orders search results /order-management/work-order-search-result/workorder/search-result
Work order details /order-management/work-order-details/workorder/workorder-details
Outbound shipments search /order-management/shipment-search/shipment/search
Inbound shipments search /order-management/shipment-search/shipment/search-inbound
Return shipments search /order-management/shipment-search/shipment/search-returnshipment
Shipment details /order-management/shipment-details
Inventory search /order-management/inventory-search/inventory/search
Safety stock rules /order-management/inventory/safety-stock-rules
Inventory audit search /order-management/inventory-search/inventory/audit
Inventory search results /order-management/inventory-search-results/inventory/results
Inventory parent item details /order-management/inventory-item-details/inventory/item
Inventory item details /order-management/inventory-sku-details/inventory/sku
Fulfillment landing page /order-management/fulfillment-home/sourcing/home
Sourcing tester /order-management/fulfillment-sourcing-tester/sourcing/search
Sourcing tester results /order-management/fulfillment-sourcing-tester-search-results/sourcing/results
EDD tester /order-management/fulfillment-edd-tester/sourcing/edd-tester/search
EDD tester results /order-management/fulfillment-edd-tester-results/sourcing/edd-tester-results
EDD tester results explainer /order-management/fulfillment-edd-tester-results-explainer/sourcing/edd-tester-results-explainer
Optimizer dashboard /order-management/optimizer/dashboard
Optimizer results explainer /order-management/optimizer/resultsexplainer
Optimizer benefits report /order-management/optimizer/benefits-report
Optimizer simulator /order-management/optimizer/simulator
Alerts search /order-management/workspace-alerts-search/workspace/alert-search
Alerts search results /order-management/workspace-alerts-search-results/workspace/search-results
Alert details /order-management/workspace-alert-details/workspace/alert-details
Exceptions search /order-management/exception

Registering a route externally to navigate across different Order Hub Angular applications

To navigate to a page that is not in the current Angular application, you must declare this route with the Supply Chain common shell as a feature menu. This can be done by registering a new "hidden" menu to the Supply Chain common shell by completing the following task: Testing new applications or routes in Order Hub. Ensure that you check the Hide this menu item option when creating the menu.
Note: Ensure that you also copy the features.json file of this hidden menu into your features.json file for deployment purposes, as you would do for non-hidden menus that you have added.