Appointment Data Service

Angular is a platform that offers many ways to get a job done. As described in our introduction to Angular lesson, you can build in the main app.component, a custom component or a custom component that uses a custom service.

When developing MPages for our clients, unless the project is trivial, we tend towards storing data related tasks in a custom service. This allows for better code re-usability and organization. We will demonstrate the code re-use by accessing a new custom appointment data service from both app.component.ts and a new appointments.component that we are yet to create.

• From a terminal window in your project folder, create a new service called appointment-data.

  ng generate service appointment-data

  A new file called appointment-data.service.ts will be created in your src/app folder.

• Open this file in Visual Studio Code. We are going to import the Clinical Office CustomService, create a loading status variable and build a loadAppointments method responsible for collecting our appointment data from Cerner.

  Modify appointment-data.service.ts so it matches the code below. Differences from your current file are highlighted.

  import { Injectable } from '@angular/core';
  V4+ import { CustomService } from '@clinicaloffice/clinical-office-mpage-core';
  < V3 import { CustomService } from '@clinicaloffice/clinical-office-mpage';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AppointmentDataService {
    public loading = false;
  
    constructor(public customService: CustomService) { }
  
    public loadAppointments(): void {
  
      this.loading = true;
  
      this.customService.load({
        customScript: {
          script: [
            {
              name: '1trn_appt_mp:group1',
              run: 'pre',
              id: 'appointments'
            }
          ]
        }
      }, undefined, (() => { this.loading = false }));
    }
  
  }

Let's dig deeper into the code to see what's happening. The first highlighted line of code is responsible for importing the CustomService code from Clinical Office into our appointment service. Without this import, our service has no reference to the features available in the CustomService. Later in our constructor, we inject the CustomService code into a new object called customService. This variable could have been called anything, but we chose customService to better identify the service being represented.

The loading variable is as simple boolean variable which is initialized to false. Later in our loadAppointments() method we set it to true just before we make our CCL request, and we set it back to false in our callback method. Eventually we will use the loading variable to visually show our users that data is being loaded and to wait patiently.

The loadAppointments() method is responsible for triggering a CCL load and storing the results in the Clinical Office CustomService under the id name of appointments.

The first step taken is to assign true to the loading variable. At this time, the loading variable isn't used for anything, but later we will use it to disable prompts and show end users a loading message.

The next step is to make a CCL script request through the customService object. We are using the load method to pass a payload that will run a CCL script called 1trn_appt_mp:group1. If other Clinical Office services were being loaded in this payload (e.g. PersonService, APOService, etc.), this script will be run before those services in the same payload (run: 'pre'). The id property assigns the results of our script to the id name appointments.

The undefined parameter represents the patient source. An undefined value indicates that the current patient source context should be used.

The final piece is the callback method. This method runs once data has returned from our CCL script. In our project we are simply assigning the false to the loading variable.

You can read more about the CustomService service in our documentation.

• Our appointment service is now ready to use. Open app.component.ts and import the new AppointmentDataService class and assign it to an object name of appointmentDS.

  Follow up by triggering your loadAppointments() method from inside the setTimeout() method in your ngOnInit() method.

  Changes to the code is as follows:

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  V4+ import { mPageService } from "@clinicaloffice/clinical-office-mpage-core";
  < V3 import { mPageService } from "@clinicaloffice/clinical-office-mpage";
  import { AppointmentDataService } from './appointment-data.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
  
    constructor(
      public activatedRoute: ActivatedRoute,
      public mPage: mPageService,
      public appointmentDS : AppointmentDataService
    ) { }
  
    ngOnInit(): void {
      // Grab any parameters in the URL (Used in Cerner Components)
      this.activatedRoute.queryParams.subscribe(params => {
        this.mPage.personId = params['personId'] ? parseInt(params['personId']) : this.mPage.personId;
        this.mPage.encntrId = params['encounterId'] ? parseInt(params['encounterId']) : this.mPage.encntrId;
        this.mPage.prsnlId = params['userId'] ? parseInt(params['userId']) : this.mPage.prsnlId;
      });
  
      // Perform MPage Initialization
      setTimeout((e: any) => {
        this.mPage.setMaxInstances(2, true, 'CHART');
  
        // Add your initialization code here - do not place outside setTimeout function
        this.appointmentDS.loadAppointments();
      }, 0);
    }
  }

  When your code runs, the loadAppointments() method will trigger as soon as the app.component has initialized.

• View your application in the browser and open the debugger by pressing the CTRL + / keys. You should now see a runtime error as shown in the screen below. The activity log is capable of showing CCL errors that occur. In this case the error message is expected as we have not written the 1trn_appt_mp script.
• The next section of this tutorial will involve writing a CCL script called 1trn_appt_mp.prg. While developing this script we will want to test the new CCL code outside the MPage. Examine your activity log on screen and look for the initiation message showing the payload for your CCL call. On my screenshot above this is on line 4 and appears as follows.

  08:48:42: Process ID 1 initiated. Payload -> {"payload":{"patientSource":[{"personId":0,"encntrId":0}], "customScript":{"script":[{"name":"1trn_appt_mp:group1","run":"pre","id":"appointments"}]}}}

  Copy the section of code from the activity log that I have highlighted into your PC copy buffer. We will be using this block of code when developing our CCL script to test our code.