Skip to content

Base Service Functions

Following functions are provided in the WidgetBaseService that can be used for widget development. Actual implementation of these functions are injected from the client framework. These are exposed through CloudHomeWidgetBaseDirective which is extended by each widget entry component. Several base framework utility services are provided to support various widget functional requirements.

widgetFrameworkUtilsService

Consists of a set of methods that can be used to access a generic set of framework functions for various purposes.

Trigger navigate action (to some other page) from a widget

Parameters:

  • url [string] - URL of the page to navigate
  • context [any] - any contextual information to be passed when navigating to the page

Example:

this.widgetFrameworkUtilsService.navigate('page/ViewDocuments/DocumentActivities', {});
this.widgetFrameworkUtilsService.navigate('page/ViewDocuments/DocumentActivities?$filter=DocId eq 10', {});

translate$

Get the translated value for a translatable label

Parameters:

  • key [string] - Property name of the translatable (In Marble client file or default translations JSON file)

Returns:

  • Observable - translation value

Example:

translatedReportedHoursLabel$: Observable<string> = this.widgetFrameworkUtilsService.translate$('ReportedHours').pipe(take(1));

translationsLoadingState$

Get the loading state of the translations

Returns:

  • Observable - loading state ('initial' | 'loading' | 'loaded' | 'error')

Example:

translationsLoadingState$: Observable<TranslationsLoadingState | null> = this.widgetFrameworkUtilsService.translationsLoadingState$();

setCopilotPrompt

Used to pass a prompt from a widget to the copilot.

Parameters:

  • widgetId [string] - ID of the widget
  • prompt [string] - prompt to be shown in the copilot chat
  • description [string] - prompt description
  • openPanel [boolean] - (deprecated) whether to open the copilot panel or not (true by default)
  • context [Array] - (optional) context params to be passed to the copilot, CopilotPromptParam is an id/value pair

Example:

this.widgetFrameworkUtilsService.setCopilotPrompt(fwWidget2Metadata.id, `Please show me guidelines to ${type} an Order`, `Guidelines to ${type} an Order`, true, [{id: 'isDemo', value: true}]);

copilotAvailable

Used to enable widgets to check whether the copilot is available or not

Returns:

  • Observable - copilot availability status

Example:

// TS
showCopilotButtons$: Observable<boolean> = this.widgetFrameworkUtilsService.copilotAvailable();
// HTML
<button *ngIf="showCopilotButtons$ | async" graniteButton (click)="getAIHelp()">
     <granite-icon>help-ai</granite-icon>
</button>

getTeamsAudioCall

Start a Teams audio call with a contact person

Parameters:

  • email [string] - Email address of the contact

Example:

this.widgetFrameworkUtilsService.getTeamsAudioCall('alain.prost@mmail.com');

getTeamsVideoCall

Start a Teams video call with a contact person

Parameters:

  • email [string] - Email address of the contact

Example:

this.widgetFrameworkUtilsService.getTeamsVideoCall('alain.prost@mmail.com');

startTeamsChat

Start a Teams chat with a contact person

Parameters:

  • email [string] - Email address of the contact

Example:

this.widgetFrameworkUtilsService.startTeamsChat('alain.prost@mmail.com');

showToastMessage

Show a toast message in IFS Cloud

Parameters:

  • type [MessageType] - Type of toast message (Error | Warning | Info | Success)
  • message [string] - Message to be shown in the toast
  • title [string] - (optional) Title of the toast message
  • details [string] - (optional) Additional details for the toast message

Example:

this.widgetFrameworkUtilsService.showToastMessage(MessageType.Error, 'Error occured while loading Widget data!', 'Failed Loading Widget Data');

showMessageBox

Show a message box in IFS Cloud

Parameters:

  • message [string] - Message to be shown in the message box
  • type [MessageBoxType] - (optional) Type of the message box (Error | Warning | Information | Question | Generic | Server),
  • title [string] - (optional) Title of the message box
  • standardActions [MessageBoxActions] - (optional) Standard message box actions (Ok | OkCancel | YesNo | YesNoCancel)
  • customActions [Array] - (optional) Set of custom action button names
  • customIcon [string] - (optional) Custom icon
  • preselected [any] - (optional) Pre-selected action button
  • wide [boolean] - (optional) Is a wide message box

Returns:

  • Observable - User Response for the message box action

Example:

this.widgetFrameworkUtilsService.showMessageBox('Error occured while loading Widget data!', MessageBoxType.Error, 'Failed Loading Widget Data', MessageBoxActions.Ok);
  • odataFunction(fn: string, options?: any): Observable
  • odataAction(fn: string, params: any): Observable
  • getApplicationContext(): Observable
  • translate$(key: string): Observable
  • translationsLoadingState$(): Observable
  • getConfig$(): Observable
  • getRequest(url: string): Observable | null>
  • postRequest(url: string, data: any, etag?: string): Observable | null>
  • patchRequest(url: string, data: any, etag: string): Observable | null>
  • deleteRequest(url: string, data: any, etag: string): Observable | null>
  • navigate(url: string, context: any): Promise
  • download(url: string, context?: any): void
  • upload(url: string, data: File | string, etag?: string, id?: number): Observable

For crud actions, odata functions, actions and translations require the corresponding client and projection to be added to the metadata.ts. A widget can be mapped to only one projection and one client.

For testing the widgets with these services locally, the below service in TestGround can be mocked. Refer custom-widget-base.service.ts

Writing your own injectable services

If the above base services are not sufficient for your implementation, you can write your own abstract service and inject the actual implementation from the client application. Refer fnd-sample-widget-1-context-provider.service in fnd-sample-widget-1 sample library.