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

  1. Open a terminal and go to the devtoolkit_docker/orderhub-code/buc-app-inventory/packages/inventory-search-results/src-custom/app/features directory.
  2. 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.

  3. 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.
    1. 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.
      The resulting code looks like this:
      import { NgModule } from '@angular/core';
      import { CommonModule } from '@angular/common';
      
      @NgModule({
        declarations: [
        ],
        imports: [
          CommonModule
        ]
      })
      export class ExtSearchModule { }
    2. 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.
  4. 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.
    Screen capture of the Channel Apps Manager with a new entity for the Create reservation page
  5. Update your custom user groups to grant permission to view the Create reservation page. For more information, see Defining resource permissions for Order Hub.
    Screen capture of the Order Hub permissions module with a new entity for the Create reservation page
  6. After the module compiles successfully, go to Order Hub and click the overflow menu to view the newly added action.
    Screen capture of the overflow menu open and the Create reservation button highlighted with a red box
  7. Click Create reservation.
    If the setup was successful, a new page displays with the text "create-reservation works!"
  8. Create a custom-constants.ts file in the src-custom/app/features/create-reservation directory.
  9. 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';
      }
    
  10. 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';
      
  11. Open the src-custom/app/features/create-reservation/create-reservation.component.html file.
  12. 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>
    
  13. 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:"
        }
      }
    
  14. 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();
      }
    
    }
    
  15. Go back to Order Hub and reload the frame.
    Go to the Create reservation page to verify that the breadcrumb trail is displayed:
    Breadcrumb trail