About this task
You specify an event handler in the app.xml file
to control whether to show or hide a field that depends on values
of another field when the value is selected by the mobile user. Event
handlers are implemented in JavaScript files that are associated with
a view in the mobile app.
For example, if a work order has a
work type of Emergency Maintenance, the Risk field
should appear on the Work Order Details view.
The Risk field is not needed for other types
of work orders, so you need to apply a condition to control when the
field appears. You create an event handler for the Risk field
to monitor the resource and attribute that is associated with the
work type and show the field if a mobile user selects Emergency Maintenance
in the Work Type field. If a mobile user also
changes the value for the work type, the handler checks the value
to determine whether the Risk field is shown.
- In MobileFirst
Studio,
open the app.xml file for the app that you want
to update and add the field that you want to apply the
condition to.
- In the UI section of the app.xml file,
add a render type of event handler to the view that the fields belong
to.
- In the <text> element of the new field, add a child
element named <eventHandlers>.
- In the <eventHandlers> element, add a child element
named <eventHandler>.
- Specify render as the event attribute,
and add the method and class attributes.
For example, to
show the Risk field for emergency work types,
add an event handler to the <groupitem> element for the Risk field
in the Work Order Details view
where the event attribute is render and the method
attribute is handleConditionalRisk.
<view id="WorkExecution.WorkDetailView" label="Work Order Details">
...
<groupitem>
<text resourceAttribute="risk" label="Risk"
editable="true" placeHolder="Tap to enter" />
<eventHandlers>
<eventHandler event="render" method="handleConditionalRisk"
class="application.customerExtensions.WODetailExtensionHandler" />
</eventHandlers>
</text>
</groupitem>
....
</view>
- Apply the condition for the event handler to a JavaScript
file.
- Create a folder for the handler in the MaximoAnywhere\apps\app_name\common\js\application directory.
The folder name must match the name that is applied to the class attribute
of the event handler.
- Add the JavaScript file to the MaximoAnywhere\apps\app_name\common\js\application directory.
The name of the JavaScript file must match the name that is applied
to the class attribute of the event handler.
- Add the condition for the render event handler to the
JavaScript file.
For example,
to add the JavaScript code for the event handler to show the Risk field
for emergency work types, create the WODetailExtensionHandler.js file
in the MaximoAnywhere\apps\app_name\common\js\application\customerExtensions directory
and add the JavaScript code.define("application/customerExtensions/WODetailExtensionHandler",
[ "dojo/_base/declare",
"dojo/_base/lang",
"platform/handlers/_ApplicationHandlerBase",
"application/handlers/CommonHandler"],
function(declare, lang, ApplicationHandlerBase, CommonHandler) {
return declare( [ApplicationHandlerBase], {
handleConditionalRisk: function(eventContext){
// This is an render handler for the WO Details View
// to handle changes made to the worktype field and show the Risk field
// current workOrder is on the eventContext
var currWO = CommonHandler._getAdditionalResource(eventContext,"workOrder").getCurrentRecord();
var worktype = currWO.get('worktype');
// The current risk field is on the eventContext
// to show the risk field if worktype equals to EMERGENCY
eventContext.setDisplay(worktype && worktype == "EM");
// Hook a listener to watch the worktype attribute,
// and make the risk field appear when worktype is Emergency
if (!eventContext.hasResourceWatch("workTypeWatch")) {
eventContext.addResourceWatchHandle(currWO.watch('worktype',
lang.hitch(this, function(attrName, oldValue, newValue)
{
eventContext.setDisplay(newValue && newValue=="EM");
}
)),"workTypeWatch");
}
}
});
});
- Save your changes and preview the updated mobile app in
a mobile browser simulator.