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 next-generation Order Hub applications.
Within the same Angular application
This flow contains common Angular routing between routes and no next-generation Order Hub-specific behaviors.
// 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 next-generation 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 next-generation Order Hub pages that can be linked to, see Linking between pages.
To define new pages (custom or default IBM® pages) that need to be accessible, see Linking between pages.
// 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
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 next-generation Order Hub Angular applications
To go to a page in a custom application that is not in the current Angular application, you must declare this route with the next-generation Order Hub shell as a feature. This can be done by registering a new hidden menu in the features.json file. For more information about creating or updating the features.json file, see Creating the features.json files.