Add custom query to Service Request app

Overview

• Add a new saved-query to Service Request work list. In this case, we are going to use an existing saved-query “SERVICEREQUESTHISTORY”.
• Display historical service requests separately from active requests for better organization
• Create custom filtered views for specific service request categories (e.g., by department, priority, or status)

• Basic understanding of datasources and saved queries
• Access to MAF Configuration application
• Familiarity with Service Request app structure
• Knowledge of AppCustomizations.js file structure
• Existing saved query configured in Maximo (e.g., SERVICEREQUESTHISTORY)

Implementation

Step 1: Add a new override datasource as child of srDS datasource to set saved query.

<!-- Add descriptive comments explaining key attributes -->
<maximo-datasource id="srDS" [...]>
    <!-- [...] -->
  </schema>
  <maximo-datasource-override id="historySrDS" selection-mode="none" saved-query="SERVICEREQUESTHISTORY" offline-immediate-download="false" lookup-data="false" page-size="5"/>
</maximo-datasource>
Copy to clipboardCopied!

Step 2: Include the item in the work list dropdown

<dropdown id="rzvz4" [...]>
  <!-- [...] -->
  <dropdown-item value="history" text="History SR" id="maqby"/>
</dropdown>
Copy to clipboardCopied!

Step 3: Intercept the dropdown change event with your custom method

<dropdown slot="dropdown" on-change="customLoadSrListData" id="rzvz4" […]>
Copy to clipboardCopied!

Step 4: Create the method to handle dropdown item change event

  async customLoadSrListData(evt) {
    try {
      const page = this.app.activePage || this.page || this.app.currentPage;
      this.app.state.pageLoading = true;
      page.state.selectedSwitch = 0;
      // Enable the line below to customize the empty message for saved query 
      // page.state.emptystring = this.app.getLocalizedMessage(this.app.name, 'noUnsyncedRequests', 'No unsynced requests');
      if (evt === 'history') {
        const srDs = this.app.findDatasource("historySrDS");
Copy to clipboardCopied!

Validation & Testing

1. Test Step 1: Open the Service Request app and locate the dropdown filter in the work list

   • Expected Result: The dropdown should now include a “History SR” option alongside existing filter options

2. Test Step 2: Select “History SR” from the dropdown

   • Expected Result: The work list should reload and display only service requests matching the SERVICEREQUESTHISTORY saved query criteria

3. Test Step 3: Switch between different dropdown options (e.g., from “History SR” to another filter)

   • Expected Result: The work list should update accordingly without errors, and the page loading indicator should appear during transitions

• Issue: Dropdown item appears but clicking it shows no data or causes an error

  • Cause: The datasource ID in the customLoadSrListData method doesn’t match the datasource-override ID in app.xml
  • Solution: Verify that the datasource ID “historySrDS” matches exactly in both app.xml and AppCustomizations.js

• Issue: Original dropdown options stop working after adding custom method

  • Cause: The custom method doesn’t properly call the original controller method for non-custom options
  • Solution: Ensure the else block in customLoadSrListData correctly invokes controller.loadSRListData(evt)

• Issue: Page loading indicator doesn’t disappear

  • Cause: Error in async method prevents finally block from executing
  • Solution: Check console for errors and ensure try-catch-finally structure is properly implemented

• Issue: Saved query returns no results even though data exists

  • Cause: The saved query SERVICEREQUESTHISTORY may not be properly configured or may have restrictive filters
  • Solution: Verify the saved query definition in the Object Structure application and test it independently

Best Practices

• Use descriptive IDs for datasource overrides that clearly indicate their purpose (e.g., “historySrDS” instead of “ds1”)
• Always include error handling with try-catch blocks in custom methods to prevent app crashes
• Set page-size appropriately for the expected data volume to optimize performance
• Test the saved query independently in Maximo before integrating it into the app
• Use the finally block to ensure loading indicators are properly cleared regardless of success or failure
• Add console logging during development to help troubleshoot issues

• Modify the original controller methods directly - always use the pattern of calling the original method from your custom wrapper
• Forget to check if the datasource is initialized before calling load() - this can cause errors
• Use hardcoded strings for datasource IDs - consider using constants if you reference them multiple times
• Remove the original dropdown functionality when adding custom options - maintain backward compatibility
• Set offline-immediate-download="true" for large datasets that aren’t needed immediately

• Use selection-mode="none" for datasources that don’t require row selection to reduce overhead
• Set appropriate page-size values - smaller sizes (5-20) for mobile, larger (50-100) for web
• Consider using lookup-data="false" if the datasource won’t be used in lookups
• Avoid loading multiple large datasources simultaneously on page initialization

Related Resources

• Basic MAF Concepts - Understanding datasources and state management
• Datasources Guide - Deep dive into datasource configuration
• Update App Saved Query - How to modify saved queries

• Replace Existing Method - Pattern for intercepting controller methods
• Modify Default Queries - Alternative approaches to query customization
• Client-Side Datasource Filtering - Filtering without saved queries

• Combine Static and Dynamic Filters - Advanced filtering techniques
• Dynamic Mobile Filter - Creating dynamic filter options
• Additional Logic - Extending app functionality further

• IBM Maximo Application Framework Documentation
• Maximo Object Structures and Saved Queries

Additional Notes

• This configuration applies to Maximo Application Framework 8.x and later
• Service Request app structure may vary between versions - verify component IDs in your specific version
• The pattern of intercepting controller methods is consistent across MAF versions

• The dropdown filter works identically on mobile and web interfaces
• Consider setting smaller page-size values (5-10) for mobile datasources to improve performance
• Test on actual mobile devices to ensure the dropdown is easily accessible and usable
• Mobile apps may cache datasource data - ensure proper refresh behavior when switching filters

• You can add multiple custom queries by creating additional datasource overrides and dropdown items
• Use the onBeforeLoadData lifecycle event to add dynamic filtering logic before data loads
• Combine saved queries with additional where clauses for more complex filtering scenarios

• Enable browser developer tools console to see detailed error messages
• Add console.log statements in your custom method to trace execution flow
• Use this.app.log.d(TAG, message) for debug logging that can be controlled via app settings
• Verify datasource initialization by checking datasource.initialized property
• Test the saved query directly in Maximo’s Object Structure application to isolate query issues
• Check network tab in browser dev tools to verify API calls are being made correctly