Integrating advanced classification lookup functionalities into Maximo Mobile poses a common challenge for asset management professionals. Specifically, replicating the drill-down filters available in Maximo Manage within the mobile platform requires strategic customisation. In this guide, we'll explore the steps necessary to achieve this seamless integration, offering practical insights and code snippets along the way. By addressing this gap in functionality, users can enhance their Maximo Mobile experience and optimise their asset management workflows. Let's dive into the details of customising Maximo Mobile to meet your specific needs.
To begin, we delve into defining the necessary data sources for displaying classification data. Key parameters include "object-structure", "id", and "lookup-data". We'll outline the schema attributes required and ensure all configurations allow for seamless appearance. Refer to the provided source code for a detailed walkthrough.
|
<!-- Add lookup for classification --> <maximo-datasource id="classificationLookupDS" offline-immediate-download="true" lookup-data="true" object-structure="MXCLASSIFICATION" page-size="100" order-by="classificationid" selection-mode="single"> <schema id="gvnna"> <attribute name="classstructureuid" unique-id="true" id="k9d4_"/> <attribute name="classstructureid" searchable="true" id="dyz3a"/> <attribute name="classificationid" searchable="true" id="wxdq4"/> <attribute name="classificationdesc" searchable="true" id="evn6x"/> <attribute name="hierarchypath" searchable="true" id="akjm2"/> <attribute name="parent" id="aarv8"/> <attribute name="haschildren" id="wpywy"/> <attribute name="hasparent" id="zzqyq"/> </schema> </maximo-datasource> |
In this phase, we establish a custom lookup interface to facilitate classification selection within the work order creation page. By associating the previously defined data source and specifying display attributes, users gain intuitive access to classification lists. Crucially, custom JavaScript functions execute the logic behind lookup hierarchies, ensuring smooth retrieval of selected classification data. Detailed code snippets guide you through this process.
|
<!-- lookup for classification --> <lookup-with-filter on-close="bpdWOClassClose" id="bpdWOClassLookup" width="99" datasource="classificationLookupDS" on-item-click="bpdSelectWOClass" show-search="true" show-count="true" has-filter="true" lookup-heading="WO Classification"> <list-item id="py7aw"> <border-layout fill-parent="true" width="100%" padding="true" id="gbbmk"> <start shrink="1" width="20" direction="row" horizontal-overflow="hidden" vertical-align="center" id="w64q8"> <label label="{item.classstructureid}" id="dzkv8"/> </start> <middle horizontal-align="start" horizontal-overflow="hidden" id="k_7r7"> <label label="{item.classificationdesc}" id="jm48d"/> </middle> <end horizontal-align="end" vertical-align="center" direction="column" id="dg9yk"> <button hidden="{!item.haschildren}" icon="Carbon:arrow--right" kind="ghost" padding="false" on-click="bpdWOClassNext" on-click-arg="" id="q8n9k"/> </end> </border-layout> </list-item> </lookup-with-filter> |
The final stage involves crafting a classification form within the app.xml file. Here, users can seamlessly display and re-display selected classifications. JavaScript functions with logic to manage selected classifications are integrated, ensuring a user-friendly experience. Detailed code breakdowns accompany this stage to facilitate smooth implementation.
|
<!-- Add section for classification attribute lookup --> <box direction="column" background-color="field-01" padding="{app.state.screen.size === 'sm' || app.state.screen.size === 'md' ? 0 : 0.5}" id="kqz6v"> <border-layout fill-parent="true" width="100%" padding="true" id="rjrw6"> <start direction="row" horizontal-overflow="hidden" vertical-align="center" width="60" shrink="0" id="jwzz_"> <field required="false" label="Classification" label-class-name="header-small" value="{dsCreateWo.item.classificationdesc}" empty-field-placeholder="Select a class" swap-position="false" id="xkym7"/> </start> <middle horizontal-align="end" horizontal-overflow="hidden" id="p929q"> <button icon="Carbon:close--outline" kind="ghost" on-click="bpdSelectWOClass" on-click-arg="" hidden="{!dsCreateWo.item.classificationdesc}" padding="false" id="mwd74"/> </middle> <end horizontal-align="end" vertical-align="center" direction="column" id="y35yv"> <button icon="Carbon:chevron--right" kind="ghost" padding="false" on-click="bpdOpenWOClassLookup" on-click-arg="" id="xvadv"/> </end> </border-layout> </box>
|
Here are the custom JavaScript functions essential for executing the classification lookup feature within the application:
'bpdOpenWOClassLookup': This function displays the lookup dialog and is invoked upon clicking the chevron right icon.|
async bpdOpenWOClassLookup(evt) { let woClass = this.app.findDatasource("classificationLookupDS"); if (woClass) { woClass.clearState(); await woClass.initializeQbe(); woClass.setQBE("parent", "=", "null"); await woClass.searchQBE(); this.page.showDialog("bpdWOClassLookup"); this.page.state.oldparent = [];
} } |
'bpdSelectWOClass': Handle events when a classification item is selected; it saves and displays its value in the classification form.|
bpdSelectWOClass(event){ this.page.datasources.dsCreateWo.item["classificationdesc"]=event.classificationdesc; this.page.datasources.dsCreateWo.item["classstructureid"] = event.classstructureid; this.page.state.woclassseq=-1; } |
'bpdWOClassNext': Navigate to child classifications, typically displayed on the arrow icon within the lookup list.|
async bpdWOClassNext(event) { let woClass = this.app.findDatasource("classificationLookupDS"); if (woClass) { woClass.clearState(); await woClass.initializeQbe(); woClass.setQBE("parent", "=", event.item.classstructureid); await woClass.searchQBE(); if(this.page.state.oldparent.length>0){ this.page.state.woclassseq += 1; this.page.state.oldparent[this.page.state.woclassseq] = event.item.parent; }else{ this.page.state.woclassseq = 0; this.page.state.oldparent[this.page.state.woclassseq] = ""; } console.log(this.page.state.oldparent[this.page.state.woclassseq]); } } |
'bpdWOClassClose': Navigate to parent classifications or exit the dialog, ensuring smooth interaction with the classification lookup feature.|
async bpdWOClassClose(event){ console.log(this.page.state.woclassseq); console.log(this.page.state.oldparent[this.page.state.woclassseq]); if(this.page.state.woclassseq>=0){ let woClass = this.app.findDatasource("classificationLookupDS"); if (woClass) { woClass.clearState(); await woClass.initializeQbe(); if(this.page.state.woclassseq==0){ woClass.setQBE("parent", "=", "null"); }else{ woClass.setQBE("parent", "=", this.page.state.oldparent[this.page.state.woclassseq]); } await woClass.searchQBE(); this.page.state.woclassseq -= 1; } }else{ let csyn = this.page.findDialog('bpdWOClassLookup'); if(csyn) { csyn.closeDialog(); } } } |
These functions enable the interaction and functionality of the classification lookup feature within the application.
Experience the intuitive Classification Lookup UI designed to streamline user interaction. With a simple click on the arrow buttonin the classification list, users seamlessly navigate to children classifications. If a classification lacks children, the arrow dynamically disappears. Similarly, accessing previous classifications is made easy with a click on the chevron left icon.
Conclusion
By embracing these customisations, users can harness the full potential of Maximo Mobile, seamlessly integrating advanced classification lookup functionalities. Unlock the power of Maximo Mobile customisation to elevate your asset management experience today!
If you're eager to explore further or require assistance in implementing these customisations, don't hesitate to reach out to us. We're here to guide you through maximising the potential of your Maximo Mobile solution.