One of the common requirement in MAS Manage Mobile customizations is to filter the lookup values of a field based on the value selected in another field.
Unlike MAS Manage Maximo, field lookups in Maximo Mobile are implemented differently. Understanding how to configure attributes in a datasource, lookup in dialog, smart input fields and dynamically filter them is essential when developing client-side customizations.
In this article, we'll demonstrate how to add COMMODITYGROUP and COMMODITY fields to the createwo page in TECHMOBILE application, where the Commodity lookup is filtered based on the selected Commodity Group.
Solution Overview:
The implementation consists of the following steps:
- Create shared lookup datasources.
- Add the UI fields to a datasource in createwo page.
- Create lookup dialogs.
- Add the fields to the page UI layout.
- Filter the lookup values using AppCustomizations.js.
Step 1 – Create Shared Lookup Datasources
Create datasource definitions for both Commodity Group and Commodity lookup in the common section of the application ( outside the createwo page).
If we use the same set of data in multiple places, avoid creating separate datasources using same object structure.
Instead, use the maximo-datasource-override tag to inherit the parent datasource values while applying filter using AppCustomizations.js. This keeps configuration simple and easier to maintain.
In this implementation, the parent datasource
commodities is shared by the child datasources commoditygroup and commodity, each of which applies different filters. 
<maximo-datasource id="commoditiesGroupDS" lookup-data="true" object-structure="MXAPICOMMODITY" offline-immediate-download="true" selection-mode="single">
<schema id="cugp45x">
<attribute id="cu_ej8z1" name="commoditiesid" unique-id="true"/>
<attribute id="cu_d889x" name="commodity" searchable="true"/>
<attribute id="cu_r5v8q" name="description" searchable="true"/>
<attribute id="cu_d3wqg" name="parent"/>
<attribute id="cu_pqny2" name="servicetype"/>
</schema>
<maximo-datasource-override id="commodityGroupDS" pre-load="true" saved-query=""/>
<maximo-datasource-override id="commodityDS"/>
</maximo-datasource>
Using the
savedquery or mobile-qbe-filter tag at the datasource level would not support these different filtering requirements in Mobile device, though it works in Role Based Applications in browser. Since we use the same object structure MXAPICOMMODITY, it will display the same values in both lookups in Mobile device. <!-- Separate datasource with savedquery or mobile-qbe-filter DONT work in Mobile -->
<!-- As both datasource use same Object Structure, refresh will work only in RBA appls -->
<maximo-datasource id="commodityGroupDS" lookup-data="true" object-structure="MXAPICOMMODITY" mobile-qbe-filter="{{'parent':'!=*'}}" offline-immediate-download="true" selection-mode="single">
<schema id="cugp45x">
<attribute id="cu_ej8z1" name="commoditiesid" unique-id="true"/>
<attribute id="cu_d889x" name="commodity" searchable="true"/>
<attribute id="cu_r5v8q" name="description" searchable="true"/>
<attribute id="cu_d3wqg" name="parent"/>
<attribute id="cu_pqny2" name="servicetype"/>
</schema>
</maximo-datasource>
<maximo-datasource id="commodityDS" lookup-data="true" object-structure="MXAPICOMMODITY" savedquery="CUSTOMCOMGROUP" offline-immediate-download="true" selection-mode="single">
<schema id="cugp45x">
<attribute id="cu_ej8z1" name="commoditiesid" unique-id="true"/>
<attribute id="cu_d889x" name="commodity" searchable="true"/>
<attribute id="cu_r5v8q" name="description" searchable="true"/>
<attribute id="cu_d3wqg" name="parent"/>
<attribute id="cu_pqny2" name="servicetype"/>
</schema>
</maximo-datasource>
Step 2 - Add the fields to a datasource in createwo page
Locate the createwo page tag and include these fields in the maximo datasource.
Step 3 - Create lookup dialogs
Create separate lookups for Commodity Group and Commodity fields under the dialog section.
<lookup border="true" datasource="commodityGroupDS" height="400" id="commodityGroupLookup" lookup-attributes="{['commodity', 'description', 'servicetype']}" lookup-heading="Commodity Group" reset-datasource="true" show-search="true" tight="true" width="60">
<lookup border="true" datasource="commodityDS" height="400" id="commodityLookup" lookup-attributes="{['commodity', 'description','parent']}" lookup-heading="Commodity" reset-datasource="false" show-search="true" tight="true" width="60"">
The Commodity Group lookup reloads its datasource whenever it opens with values where parent is null, while the Commodity lookup uses the filtered datasource prepared after a Commodity Group is selected.
Step 4 - Add the fields to the page UI layout
Add two smart-input field controls in createwo page UI component.
<box children-sizes="100" direction="row" fill-child="true" fill-parent-horizontal="true" manage-children="true" padding-bottom=".5" id="cu6znb">
<border-layout fill-parent="true" width="100%" padding="true" id="cuamyd">
<middle horizontal-align="end" horizontal-overflow="hidden" id="cugmw3r">
<smart-input id="cudq45" label="Commodity Group" lookup="commodityGroupLookup" enable-lookup-buttongroup="true" placeholder="Enter Commodity Group" select-lookup-attribute="commodity" value="{dsCreateWo.item.commoditygroup}"/>
<smart-input id="cdrq46" label="Commodity" lookup="commodityLookup" enable-lookup-buttongroup="true" placeholder="Enter Commodity" select-lookup-attribute="commodity" value="{dsCreateWo.item.commodity}"/>
</middle>
</border-layout>
</box>
Step 5 - Filter the lookup values in AppCustomizations.js
The filtering logic is implemented using two out-of-the-box Mobile lifecycle methods in AppCustomizations.js file.
Filter the Commodity Group Lookup
Use the
onAfterLoadData() method to display only top-level commodity groups (records that do not have a parent).// This method will filter the values in Commodity Group field // to display items without parent async onAfterLoadData(dataSource, items) { if (dataSource.name === 'commodityGroupDS') { dataSource.clearQBE(); dataSource.setQBE('parent', '!=', '*'); await dataSource.searchQBE(); } }
Filter the Commodity Lookup
When the user selects a Commodity Group, use the
onValueChanged() method to filter the Commodity datasource so that only child records belonging to the selected Commodity Group are displayed.
// This method will filter the values in Commodity field
// with a value choosen in Commodity Group field
async onValueChanged({ datasource, item, field, oldValue, newValue }) {
if (field === 'commoditygroup') {
item.commodity = null;
const commodityDS = this.app.findDatasource("commodityDS");
commodityDS.clearQBE();
commodityDS.setQBE("parent", "=", item.commoditygroup);
await commodityDS.searchQBE();
}
}
Whenever the Commodity Group changes, the Commodity field is cleared and its lookup is refreshed to display only the corresponding child commodities.
After completing the above configuration:
- The Commodity Group lookup displays only top-level commodity groups.
- Selecting a Commodity Group automatically filters the Commodity lookup.
- Users can only select Commodities that belong to the chosen Commodity Group.
- The same lookup datasource can be reused across multiple pages without duplicating configuration.
This approach provides a clean, reusable, and maintainable solution for implementing dependent lookup fields in MAS Manage Mobile.
References:
