Creating the component and resources for the custom page
Learn how to create the component and resources for the custom page. In this lesson, you
prepare the resources that you need, and create the breadcrumb trail for the page.
Procedure
- Open a terminal and go to the devtoolkit_docker/orderhub-code/buc-app-inventory/packages/inventory-search-results/src-custom/app/features directory.
-
Run the following command to create a new component.
ng g c create-reservation
The command automatically generates the custom component and updates the packages/inventory-search-results/src-custom/app/features/ext-search.module.ts file.
-
Since the custom component that you generated (
create-reservation
) needs to use IBM utilities and libraries, move the component to the app-customization.impl.ts file by completing the following steps.-
Edit the src-custom/app/features/ext-search.module.ts file with the
following changes.
- Delete the import {CreateReservationComponent} statement.
- Delete CreateReservationComponent from the
declarations
array.
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ declarations: [ ], imports: [ CommonModule ] }) export class ExtSearchModule { }
-
Edit the src-custom/app/app-customization.impl.ts file with the
following code.
import { RouterModule, Routes } from '@angular/router'; import { InventoryModuleUrlGuardService } from '@buc/inventory-shared'; import { BucCommonClassesConnectorResourcePermissionsGuard } from '@buc/svc-angular'; import { CreateReservationComponent } from './features/create-reservation/create-reservation.component'; export const customRoutes: Routes = [ { canActivate: [InventoryModuleUrlGuardService, BucCommonClassesConnectorResourcePermissionsGuard], path: 'create-reservation', component: CreateReservationComponent, data: { id: 'CUSINV0001' // New resourceId to control permissions } } ]; export class AppCustomizationImpl { static readonly components = [CreateReservationComponent]; static readonly providers = []; static readonly imports = [RouterModule.forChild(customRoutes)]; static readonly exports = [RouterModule]; }
- The code adds the CreateReservationComponent to the components array and adds a custom route to navigate to the new Create reservation page.
- The data.id in the route checks this resourceId value to determine whether the user has permissions to view this page.
-
Edit the src-custom/app/features/ext-search.module.ts file with the
following changes.
-
In the Application Console, create the custom resource that you defined in the previous step.
(
id: 'CUSINV0001'
)For more information about how to create a custom resource, see "Step 1" in Creating resource permissions for custom pages and actions. Ensure that you set the Resource ID to CUSINV0001. -
Update your custom user groups to grant permission to view the Create
reservation page. For more information, see Defining resource permissions for Order Hub.
-
After the module compiles successfully, go to Order Hub and click the overflow
menu to view the newly added action.
-
Click Create reservation.
If the setup was successful, a new page displays with the text "create-reservation works!"
- Create a custom-constants.ts file in the src-custom/app/features/create-reservation directory.
-
Add the following code.
export class CustomConstants { static readonly ACTION_CREATE_RESERVATION = 'createReservation'; static readonly ROUTE_CREATE_RESERVATION = '/buc-app-inventory/inventory-search-results/inventory/create-reservation'; static readonly ACTION_IDS_CREATE_RESERVATION = 'create'; }
-
Edit the src-custom/app/app-customization.impl.ts file with the
following code.
- Update the imports array to include modules to support displaying a breadcrumb and the input box
when a user navigates to the Create reservation
page.
static readonly imports = [ RouterModule.forChild(customRoutes), BucCommonComponentsModule, BucFeatureComponentsModule, BucIconsModule, SharedModule];
- Import the corresponding
modules:
import { BucCommonComponentsModule, BucFeatureComponentsModule, BucIconsModule } from '@buc/common-components'; import { SharedModule } from '@buc/inventory-shared';
- Update the imports array to include modules to support displaying a breadcrumb and the input box
when a user navigates to the Create reservation
page.
- Open the src-custom/app/features/create-reservation/create-reservation.component.html file.
-
Add a breadcrumb trail and title text:
<div class="screen-loading" *ngIf="!initialized"> <buc-loading [isActive]="!initialized"></buc-loading> </div> <ng-container *ngIf="initialized"> <div class="screen-header"> <!-- Bread crumb --> <buc-page-header *ngIf="breadCrumbList" class="screen-breadcrumb" [breadcrumbList]="breadCrumbList" [headerOrder]="['breadcrumb']"> </buc-page-header> </div> <div class="screen"> <div class="bx--row"> <div class="bx--col"> <!-- Reservation form --> </div> </div> <div class="bx--row"> <div class="bx--col"> <!-- Reservation table --> </div> </div> </div> <div class="screen-footer"> <!-- Cancel Save buttons footer --> </div> </ng-container>
-
Add the following translation keys to the
src-custom/assets/custom/i18n/en.json file.
{ "custom": { "LABEL_CREATE_RESERVATION":"Create reservation", "SUCCESS_RESERVATION":"Reservation successful", "ERROR_RESERVATION":"Reservation failed:" } }
-
Add the following changes into the
src-custom/app/features/create-reservation/create-reservation.component.ts
file.
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { PostReservationRequest } from '@buc/common-components'; import { BreadcrumbService } from '@buc/inventory-shared'; import { TranslateService } from '@ngx-translate/core'; import { CustomConstants } from './custom-constants'; @Component({ selector: 'buc-create-reservation', templateUrl: './create-reservation.component.html', styleUrls: ['./create-reservation.component.scss'] }) export class CreateReservationComponent implements OnInit { public initialized: boolean = false; public breadCrumbList = []; // breadCrumb list public placeholder = ''; private nlsMap: any = { 'custom.LABEL_CREATE_RESERVATION': '', 'custom.LABEL_RESERVATION_EXPIRY': '', 'custom.ERROR_INVALID_EXPIRY': '' }; constructor( private breadcrumbSvc: BreadcrumbService, private translateSvc: TranslateService, private route: ActivatedRoute ) { } ngOnInit(): void { this._initTranslations(); this._initBC(); this.initialized = true; } /** Fetch translations for the page */ private async _initTranslations() { const keys = Object.keys(this.nlsMap); const json = await this.translateSvc.get(keys).toPromise(); keys.forEach(k => this.nlsMap[k] = json[k]); } /** Initialize breadcrumbs */ private _initBC() { this.breadcrumbSvc.updateLast(this.nlsMap['custom.LABEL_CREATE_RESERVATION'], CustomConstants.ROUTE_CREATE_RESERVATION); this.breadCrumbList = this.breadcrumbSvc.get(); } }
-
Go back to Order Hub and reload the frame.
Go to the Create reservation page to verify that the breadcrumb trail is displayed: