Embedded views

This page describes how to integrate the embedded views provided by the Maintenance Management module.

Task overview

When using this view, you are able to display maintenance tasks for tools or devices. It is possible to filter the results with provided query parameter.

Current Version: 1.0
Name of Context: maintenanceManagementTaskOverview

Query Parameter

Name	Possible Values	Required	Used for
mappingType	integer 0 = device tasks 1 = tool tasks	x
isCommandBarEnabled	boolean (default = true)
malfunctionId	string		filter/create task dialog
deviceId	string		filter/create task dialog
toolId	string		filter/create task dialog
reportDateStart	Date	when reportDateEnd is provided	filter
reportDateEnd	Date	when reportDateStart is provided	filter
dueDateStart	Date	when dueDateEnd is provided	filter
dueDateEnd	Date	when dueDateStart is provided	filter
taskState	integer/integer[] 0 = new 1 = started 2 = resolved		filter
maintenanceType	integer/integer[] 0 = corrective 1 = preventive		filter
priority	integer/integer[] 0 = low 1 = medium 2 = high		filter
title	string		create task dialog
description	string		create task dialog
solverGroupId	string		create task dialog
facilityIds	string/string[]		create task dialog
lockFacility	boolean		create task dialog
lockDevice	boolean		create task dialog
malfunctionStartDate	Date		create task dialog
errorCodeIds	string/string[]		create task dialog
userPhoneNumber	string		create task dialog

Name

Possible Values

Required

Used for

mappingType

integer
0 = device tasks
1 = tool tasks

isCommandBarEnabled

boolean (default = true)

malfunctionId

string

filter/create task dialog

deviceId

string

filter/create task dialog

toolId

string

filter/create task dialog

reportDateStart

Date

when reportDateEnd is provided

filter

reportDateEnd

Date

when reportDateStart is provided

filter

dueDateStart

Date

when dueDateEnd is provided

filter

dueDateEnd

Date

when dueDateStart is provided

filter

taskState

integer/integer[]
0 = new
1 = started
2 = resolved

filter

maintenanceType

integer/integer[]
0 = corrective
1 = preventive

filter

priority

integer/integer[]
0 = low
1 = medium
2 = high

filter

title

string

create task dialog

description

string

create task dialog

solverGroupId

string

create task dialog

facilityIds

string/string[]

create task dialog

lockFacility

boolean

create task dialog

lockDevice

boolean

create task dialog

malfunctionStartDate

Date

create task dialog

errorCodeIds

string/string[]

create task dialog

userPhoneNumber

string

create task dialog

If a malfunction id is specified, all other filter parameters are ignored. All tasks for this malfunction are displayed. For the parameters taskState, maintenanceType and priority it is possible to specify multiple values by using an array.

How to implement

For detailed information about the view embedding feature, see the documentation from the portal. https://inside-docupedia.bosch.com/confluence/display/NP1/UI+API

Embedded View Example:

@Component({
  selector: '*****',
  templateUrl: '*****',
  styleUrls: ['******'],
  providers: [{ provide: Window, useValue: window }]
})
export class DetailsDashboardComponent implements OnInit {
  @ViewChild('embeddedMmTasksView', { static: true, read: ElementRef }) embeddedMmTasksView!: ElementRef<HTMLIFrameElement>;

  constructor(private window: Window) {}

  ngOnInit(): void {
    view.getContextContribution(
      'EMBEDDED_VIEW', 'maintenanceManagementTaskOverview', '1.0'
      ).then(
        (data: Context[]) => {
          const taskStates = JSON.stringify([0,1]);
          view.embedView(data[0] as ContextEmbeddedView, this.embeddedMmTasksView.nativeElement, {
            'mappingType': '0', 'taskStates': taskStates
          });
          view.listenToEmbeddedView(this.window, this.embeddedMmTasksView.nativeElement);
      }
    );
  }
}

Events Currently we support two types of events.

viewHeightChanged
toolIdUpdate

It is possible to dynamically update the size of the iFrame. To achieve this, we use the viewHeightChanged event. This can be implemented as follows.

private loadEmbeddedView(): void {
    this.portalViewService.getContextContribution('EMBEDDED_VIEW', 'maintenanceManagementTaskOverview',
      '1.0').then((data: Context[]): void => {
      this.portalViewService.embedView(data[0] as ContextEmbeddedView,
        this.embeddedMmTasksView.nativeElement, {
          mappingType: MaintenanceTaskMappingType.ToolTasks.toString(),
          toolId: this.toolId!,
        });
      this.embeddedViewSubscription = this.portalViewService.listenToEmbeddedView(this.window, this.embeddedMmTasksView.nativeElement, this.handleEmbeddedViewEvents.bind(this));
    });
}

private handleEmbeddedViewEvents(messageEvent: MessageEvent<{ name: EmbeddedViewEventNames, value: { viewHeight: number } }>): void {
    if (messageEvent.data.name === 'viewHeightChanged') {
      this.updateFrameHeight(messageEvent.data.value.viewHeight);
    }
}

private updateFrameHeight(height: number): void {
    this.embeddedMmTasksView.nativeElement.style.height = `${ height }px`;
}

To avoid reloading the iframe when the tool identifier (originally specified via query parameters) changes, the toolIdUpdate event is provided. This can be implemented as follows.

private handleTooIdChange(toolId: string): void { this.portalViewService.sendEventToEmbeddedView(this.embeddedMmTasksView.nativeElement, 'toolIdUpdate', { toolId }); }