Configurable work log types in IBM Maximo Mobile Technician application

In the Graphite packages under maximo-library, four files have been added for the chat-Log component.

1. chatlog-dialogs.xml

In this XML file, three dialogs have been created:

• maxlib_chatLogListDialog
  This dialog is used to display existing log entries and allows users to add a log.
• maxlib_chatDetailDialog
  This dialog is used to create a log with additional details such as log description and log type selection.
• maxlib_chatDetailViewDialog
  This dialog is used to display logs that were created using the maxlib_chatDetailDial

<dialogs id="maxlib_chatlog">
  <sliding-drawer id="maxlib_chatLogListDialog" full-height="false" on-close-action="closeDialog" content-padding="false" align="start" header-text="{dialog.state.chatlogdata.headerText}" controller="sharedResources/maximo/ChatLogListController.js">
    ...
  </sliding-drawer>
  <dialog id="maxlib_chatDetailDialog" on-close-action="closeDialog" background-color="ui-background" title="{dialog.state.chatlogdata.title}" size="lg" passive="true" fill-parent="true" controller="sharedResources/maximo/ChatDetailController.js">
    ...
  </dialog>
  <dialog id="maxlib_chatDetailViewDialog" background-color="ui-background" title="{dialog.state.labor}" size="lg" passive="true" padding="none">
    ...
  </dialog>
</dialogs>

2. log-type-datasource.xml

In this XML file, a new Maximo datasource named maxlib_logtype_synonymdomain_lookupDS has been added.

Previously, in the Technician application, the synonymdomainData datasource was used for log types. To retrieve specific log types, filtering had to be implemented in the JavaScript controller file.

To simplify this, a new datasource (maxlib_logtype_synonymdomain_lookupDS) has been introduced with the required where clause and mobile-qbe-filter defined directly in the datasource.

As a result:

• There is no longer a need to apply filters in the controller file.
• Any additional customization can now be handled directly in the datasource by extending the filter as needed.

<maximo-datasource id="maxlib_logtype_synonymdomain_lookupDS" offline-immediate-download="true" order-by="value" lookup-data="true" object-structure="mxapisynonymdomain" saved-query="MOBILEDOMAIN" where="domainid=&quot;LOGTYPE&quot;" mobile-qbe-filter="{{'domainid': '=LOGTYPE'}}" selection-mode="single">
  <schema id="maxlib_bn686">
    <attribute name="value" searchable="true" id="maxlib_xp2e9"/>
    <attribute name="maxvalue" searchable="true" id="maxlib_g58pj"/>
    <attribute name="description" searchable="true" id="maxlib_wwwzq"/>
    <attribute name="domainid" searchable="true" id="maxlib_m2ebr"/>
    <attribute name="valueid" unique-id="true" searchable="true" id="maxlib_aakrv"/>
    <attribute name="siteid" searchable="true" id="maxlib_r27qk"/>
    <attribute name="orgid" searchable="true" id="maxlib_wz5gx"/>
    <attribute name="defaults" id="maxlib_avz96"/>
  </schema>
</maximo-datasource>

3. ChatLogListController.js

This is the controller file for maxlib_chatLogListDialog. It handles all events triggered from this dialog.

4. ChatDetailController.js

This is the controller file for maxlib_chatDetailDialog. It handles all events triggered from this dialog.

The chat-log dialogs are designed to capture user input and display a list of logs. The overall behavior, including UI elements and interactions, is controlled through the dialog state.

All aspects of the dialog such as button enable/disable states, dialog titles, and data handling are managed dynamically through states. There are no hardcoded values defined within the dialogs themselves.

Before displaying a dialog to the user, it is necessary to properly configure its state in the JavaScript controller. This ensures that the dialog behaves correctly based on the specific use case.

In the following section, the approach used in the Technician application is explained in detail, including how the dialog state is initialized and configured from the controller.

Importing dialogs and datasource

To use the chat-log dialogs, the required dialogs and datasource must first be imported into the app.xml file of the application.

Since these dialogs are part of the maximo-library, they need to be referenced at the application level. In the Technician application, they are imported globally at the app level.

Configuring dialog state before display

Before displaying any dialog, it is necessary to configure its state properly. The dialog behavior and UI are fully controlled through this state configuration.

The following elements must be set in the dialog state:

1. Datasource configuration
   Define the datasource that will be used to:
       Display existing logs.
       Retrieve log types.
2. Event endpoints
   Specify the event endpoints that will handle dialog actions.
   These endpoints must be implemented in the controller of the page from which the dialog is opened. This will be explained in detail in the upcoming sections.
3. UI properties
   Configure UI-related properties such as:
       Dialog title
       Button states (enable/disable)
       Other UI control behaviors

Input state Initialization
Any state variables used for capturing user input should be initialized with default values before opening the dialog.

Example: 

const chatlogdata = {
    chatLogsDataSource: workLogDS,
    chatLogTypeDatasource: 'maxlib_logtype_synonymdomain_lookupDS',
    onCloseChatLogListDialog: 'closeChatLogListDialog',
    onCloseChatDetailDialog: 'closeChatDetailDialog',
    onSave: 'saveWorkLog',
    headerText: app.getLocalizedLabel('worklogs_placeholder','Work logs'),
    title: 'Add note',
    sendDisable: true,
    visibility: false,
    summary: "",
    longdescription: ""
  }

  if (dialog.state.chatlogdata) {
    Object.assign(dialog.state.chatlogdata, chatlogdata);
  } else {
    dialog.state.chatlogdata = {}
    Object.assign(dialog.state.chatlogdata, chatlogdata);
  }
  
  app.showDialog('maxlib_chatLogListDialog');

Event handling and controller interaction

The names of the event handler methods must also be passed in the dialog state. For example, methods such as onCloseChatLogListDialog, onCloseChatDetailDialog, and onSave are configured as part of the state.

These methods must be implemented in the controller of the page from which the dialogs are launched.

How it works

In the Technician application, the work log dialog is launched from the Schedule page. The controller of this page contains all the required event handler methods.

The interaction flow is as follows:

• When the dialog is displayed and a user action is triggered, the event is first handled by the dialog controller.
• The dialog controller manages the dialog-specific logic, such as updating the dialog state with user input.

setChatSummary(event) {
    this.dialog.state.chatlogdata.sendDisable = !event.currentTarget.value;
    this.dialog.state.chatlogdata.summary = event.currentTarget.value
  }

• For actions like Save, the event is then redirected to the page controller (that is, the controller from which the dialog was opened).

  async saveChatLog() {
    if (this.dialog.state.chatlogdata.onSave) {
      this.app.currentPage.callController(this.dialog.state.chatlogdata.onSave, this.dialog.state.chatlogdata);
    }
  }

• The page controller receives the user input and performs the required processing.

 async saveWorkLog(value, directSave = false) {
    await CommonUtil.saveWorkLog.call(this, value, directSave, 'woWorklogDS');
  }

This approach ensures a clear separation of responsibilities between the dialog and the page controllers, making the implementation more modular and maintainable.

Getting help
If you need assistance:

• Review this technical note - Ensure that you have followed all recommended solutions.
• Test in a non-production environment - Validate your changes before upgrading to a production environment.
• Contact IBM Support - If you encounter issues not covered in this technical note, open a support case with details about your customizations and the specific errors you are experiencing.