UserInterfaceService

UserInterfaceService TypeScript Class Reference

Overview

SERVICE This class is a "service" and it is automatically injected if declared as a member in the constructor of the consuming class. - See the constructor section below for details - See the Automatic Instance Injection page for details on the topic

The UserInterfaceService class provides methods to manage the user interface of the application. It is used mostly to drive the navigation between steps within the current UI task.

No properties

Don't instantiate directly instances of the UserInterfaceService class. UserInterfaceService instances are automatically injected by Dynamics Mobile framework.

import {View, UserInterfaceService} from '$dms';

@View()
export class MyView {

  constructor(
    //we need to only declare the member
    private UserInterfaceService: ContextService
  ){
  
  }

  async load(){      
    //we can now use the injected instance 
    this.UserInterfaceService.cancel();   
  }

}

▶️ navigate(routeId: string): void

Executes UI navigation a route. If the route is "validating", the framework will call the current view's validate and commit methods. It will call then the final method and will initiate the rendering process of the view targeted by the route. This is the most frequently used method to navigate between steps in the current UI task.

this.UserInterfaceService.navigate('next');

Do not place code after the navigate method as the navigation transition might cause unpredictable results from the code executed after.

▶️ cancel(): void

Cancels the current UI task and navigates back to the Home task

this.UserInterfaceService.cancel();

Do not place code after the cancel method as the navigation transition might cause unpredictable results from the code executed after.

▶️ launchTask(taskId: string, stepId: string, preserveContext: boolean): void

Starts UI task with given id and initiates the rendering process of the first view in the UI task.

/starting a task with id 'MyTask'
this.UserInterfaceService.launchTask('MyTask');

//starting a task with id 'next' and displays the step with id 'step1'
this.UserInterfaceService.launchTask('MyTask', 'step1');

//starting a task with id 'next' , displays the step with id 'step2' and keeps the task context - e.g. the current task context will passed to MyTask
this.UserInterfaceService.launchTask('MyTask', 'view2', true);

Do not place code after the launchTask method as the navigation transition might cause unpredictable results from the code executed after.

▶️ showLoading(): Promise<void>

Displays a preloader panel (infinite loader) on the screen, which blocks the user interface. The preloader is usually used in comnbination with method hideLoading , which hides the preloader.

The showLoading and hideLoading methods are used around logic executions which takes longer.

await this.UserInterfaceService.showLoading();

Methods showError and showMessage will automatically hide the preloader displayed via showLoading method.

▶️ hideLoading(): Promise<void>

Hides the preloader panel (infinite loader) previously displayed with a call to showLoading. There is no side effect if the method is called several times.

await this.UserInterfaceService.hideLoading();

▶️ showMessage(message: string): Promise<void>

Shows modal message box on the screen and hides preloader displayed via showLoading

await this.UserInterfaceService.showMessage('Opps this is my message');

▶️ showError(error: string | Error): Promise<void>

Shows error modal message box on the screen and hides preloader displayed via showLoading

try {
      throw new Error('ooops this is an error!');
 }
 catch(err){
      this.UserInterfaceService.showError('Opps this is my message');
 }

▶️showToast(toast: string): Promise<void>

Shows a temporary non modal message, which disappears automatically after few seconds


this.UserInterfaceService.showТoast('My Toast Message');

▶️ getCurrentaskId(): Promise<string>

Returns Id if the task which is currently active. It is supposed to be called in the context of active task and id. It may return undefined in some cases.

const taskId = await this.UserInterfaceService.getCurrentTaskId();

How to use

import {View, UserInterfaceService} from '@dms'

@View
export class MyView {

    //declare UserInterfaceServece as view's member
    //so the framework will inject UserInterfaceServece instance automatically
    constructor(private UserInterfaceService: UserInterfaceService){

    }

    async resume(){
        //show toast message to the user
        this.UserInterfaceService.showToast("View's resume method was caled");
    }

    myViewMethod(){
        //navigate to a route with name save
        this.UserInterfaceService.navigate("save");
    }
}

PreviousDocumentSeriesService NextSqlQueryService

Last updated 3 years ago