View

View Typescript Reference

▶️ async load(): Promise<void>

The load method is executed, when the view is instantiated and loaded for first time. The load method will be called before the data binding phase and is the best place to implement any data loading logic. Avoid direct manipulation of UI elements via Dom selectors in this method as they may be be overruled after the data binding phase complete. The load method is called only once during the Tasks life cycle - e.g. if the user navigates back to the same view, the load method will not be called again.

import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  customerList: ko.ObservableArray<Customer>
  
  async load(): Promise<void> {
    //load all customers from the local on-device database
    const customers = await Customer.query().executeSelect();      
    //assign the list to observable
    this.customerList(customers);   
  }
}

▶️ async resume(): Promise<void>

The resume method is executed, every time the view is about to be displayed on the screen, just after the load method has been executed. Note that unlike the load method, the resume method is called every time, when the view is about to be displayed.

import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  customerList: ko.ObservableArray<Customer>
  
  async resume(): Promise<void> {
    // this will be called every time the view is about to be dusplayed
    //load all customers from the local on-device database
    const customers = await Customer.query().executeSelect();      
    //assign the list to observable
    this.customerList(customers);   
  }
}

▶️ async show(): Promise<void>

The show method is executed, every time the view is about to be displayed on the screen, after the data bind phase finishes. This method allows the developer to implement logic executed after the complete UI of the view has been rendered.

import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  
  async show(): Promise<void> {
    console.log('show method was called');    
  }
}

▶️ async validate(navigationState: ViewNavigationState): Promise<boolean>

The validate method is executed, every time the system is about to leave the view. This happens when a navigation to another view is about to happen because of call to UserInterfaceService.navigate or UserInterfaceService.launchTask is made. The validate method will be called only if the step is marked as validate=true in the Task Definition JSON File

If the validate method returns false, the navigation process will be cancelled and the current view will stay on the screen. This allows the developer to show error message for example.

import { UserInterfaceService } from '@dms';
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  constructor(
      private UserInterfaceService: UserInterfaceService
   ){
  }
  
  async validate(): Promise<boolean> {
    if(....){   
       this.UserInterfaceService.showMessage('Opps please provide valid input!');
       return false;
    }
    else {
      // success
       return true;
    }
    console.log('show method was called');    
  }
}

▶️async commit(navigationState: ViewNavigationState): Promise<boolean>

The commit method is executed after successful excution of the validate method, every time the system is about to leave the view. This happens when a navigation to another view is about to happen because of call to UserInterfaceService.navigate or UserInterfaceService.launchTask is made. The validate method will be called only if the step is marked as validate=true in the Task Definition JSON File

If the commit method returns false, the navigation process will be cancelled and the current view will stay on the screen. This allows the developer to show error message for example.

import { UserInterfaceService } from '@dms';
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  constructor(
      private UserInterfaceService: UserInterfaceService
   ){
  }
  ...
  async commit(): Promise<boolean> {
    try{
       await customer.update();     
       return true;
    }
    catch(err) {
       this.UserInterfaceService.showError(err);
       return false;
    }
  }
}

▶️ async finally(navigationState: ViewNavigationState): Promise<void>

The finally method is executed at the end of the navigation process from one view to another view. The "finally" method is called always regardless of the navigation route settings. Can be used to clean up view resources or record the navigation process..

import { UserInterfaceService } from '@dms';
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  constructor(
      private UserInterfaceService: UserInterfaceService
   ){
  }
  ...
  async finally(navigationState: ViewNavigationState): Promise<void> {
    try{
       console.log(`Navigating to ${}`);     
       return true;
    }
    catch(err) {
       this.UserInterfaceService.showError(err);
       return false;
    }
  }
}

class ViewNavigationState

ViewNavigation class is a helper class passed to the validate, commit and finally methods of the view. The class contains information about the navigation target. It has the following properties:

currentTaskId - the id of the current task
routeId: string - id of the target route
routeTarget: string - the target of the route
preserveContext: boolean - true if the navigation to another task will preserve the context
isValidating: boolean - true if the route is validating

PreviousPrintService NextComponent

Last updated 3 years ago