Adding custom tabs to existing pages

Add custom tabs to existing pages by using the differential customization approach, which updates the buc-page-definitions.json file to customize the page. By using the differential customization approach, your updates are preserved when Order Hub releases updates to the same pages that you customized.

Procedure

  1. Create or edit the buc-page-definitions.json file for the page that you want to add the custom tab to.
    To find which pages support adding tabs to, see the pages listed in the following file:
    • buc-app-<module>/packages/<module>-shared/assets/buc-app-<module>/buc-page-definitions.json

    The order details page is used as an example in this task, located at packages/order-details/src-custom/assets/custom/buc-page-definitions.json.

  2. Add a custom tab to the page with the following properties:
    resourceId
    A unique ID to show or hide the tab. Create a new resource ID and enter the value.
    heading
    A string that will get displayed as the tab name in the UI. You can provide a translatable string.
    value
    A unique string value which is stored in context when the tab is active.
    id
    A unique ID for the tab.
    content
    String or null. If it is a string, then the tab will display the string when the tab is active. If it is null, then the CustomTab component template will get loaded.
    token
    A unique string to register the CustomTabComponent.

    Optional: showAfterTab: The ID of an existing tab. If provided, the new custom tab will be placed after the existing tab of this ID. Otherwise the new tab will be added at the end.

    For example, to update the order details page, update the packages/order-details/src-custom/assets/custom/buc-page-definitions.json file with the following details:
    
{
	"order-details": {
		"name": "order-details",
		"actions": [],
		"tabs": [
			{
				"resourceId": "BUCORD0014IP0001AT0009",
				"heading": "custom.LABEL_CUSTOM_TAB",
				"value": "custom-tab",
				"id": "order-details-custom-tab",
				"content": null,
				"token": "custom-tab-token",
				"showAfterTab": "order-details-audits-tab"
			}
		]
	}
}
  3. Add translation strings for the custom tab.
    1. Create or edit the en.json file. For example, for the order details page, packages/order-details/src-custom/assets/custom/i18n/en.json.
    2. Write the following JSON content into the en.json file. This label is used for the new custom tab that you will add to the page. 
      
{
	"custom": {
		"LABEL_CUSTOM_TAB": "Custom tab"
	}
}
  4. Verify that the new custom tab displays in Order Hub.
    1. Log in to Order Hub. If you were already logged in, reload the frame.
    2. Go to the page that you updated so that you can verify the custom tab display.

      For example, if you updated the order details page, click Orders (DEV mode) and search for orders. Click any order to go to the order details page.

    3. Verify that the new custom tab is shown in the tabs menu. Its location will vary based on whether you specified a value for showAfterTab in the buc-page-definitions.json file. For example:
      Custom tab location
  5. Create a custom component to display the custom tab content.
    1. Create a custom component under the feature. For example, for the order details page: packages/order-details/src-custom/app/features/order/
      Packages order
    2. The custom component under custom-tab.component.ts must define the tabContent property as a template reference and data as an input property.
      For example, for the order details page, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.ts:
      
import { Component, Input, TemplateRef, ViewChild } from "@angular/core";

@Component({
    selector: 'buc-custom-tab',
    templateUrl: './custom-tab.component.html',
    styleUrls: ['./custom-tab.component.css']
})

export class CustomTabComponent {
    @ViewChild('tabContent', {static:true}) public tabContent: TemplateRef<any>;
    @Input() data;
    // data contains the following properties
    //    data = {
    //       pageObject -> details page data
    //       routeData -> the page router object
    //       context -> sometimes a page has a context object
    //    }
    
    constructor() {
        
    }
}
    3. The custom component under custom-tab.component.html must define the ng-template property with reference name tabContent.
      For example, for the order details page, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.html:
      
<ng-template #tabContent>
    <h1>This is the custom tab content</h1>
</ng-template>
  6. Register a custom component in the app-customization.impl.ts file.
    For example, for the order details page, packages/order-details/src-custom/app/app-customization.impl.ts.
    1. Import CustomTabComponent from its location.
    2. Add CustomTabComponent to components and providers.
      For example, in the order details page:
      
import { CustomTabComponent } from "./features/order/custom-tab/custom-tab.component";

export class AppCustomizationImpl {
	static readonly components = [
		CustomTabComponent
	];

	static readonly providers = [
		{
			provide: 'custom-tab-token',
			useValue: CustomTabComponent
		}
	];

	static readonly imports = [];

}
      Note: The value for the provide property must be the same as the token specified for the custom tab in the buc-page-definitions.json file.
  7. Reload the frame and verify that the correct content from the custom-tab.component.html file is displayed when selecting the new tab.
    For example, for the order details page, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.html:
    Custom tab content