Linking between pages

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

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.