How Do I Use JavaScript in XMMobile?

Answer

To use custom JavaScript, place your JavaScript in any of the following locations:

• Global
  • If the script is to be included in all the Activities, put it in ~/XMMobile/Scripts/custom/custom.js
• Per Activity
  • If the script is to be included in a particular ActivityA specific step in a process.  It will be the user interface for that step (web form or a screen), for example, the Leave Application (screen interface or web form) will be the first Activity in the Leave Requisition process.  The Leave Application Authorization will be the second step or Activity in the Leave Requisition process.  One Process can have multiple activities., then it can be placed in the same folder, but with the name as of the Activity. For example, if the name of the Activity is NP10Activity then the following file, along with the custom.js, will be loaded
    ~/XMMobile/Script/custom/NP10Activity.js

Setting a value of a Dropdown

$(targetControl).val(value).selectmenu('refresh');

Setting a value of Checkbox

$(targetControl).attr("checked", value).checkboxradio('refresh');

Setting a value of Radio Button

$(targetControl).attr("checked", value);
$(targetControl).closest('.ui-page').find('input:radio[name=' + targetControl.attr('Name') + ']').checkboxradio('refresh');

Binding an event to a control

• Non-Object Group

  • $(document).on("change", "#NP20400BillingStreet", function () {
    alert('value changed');
    //to get another control from here
    var tgt = $('#NP2010OtherControl', $(this).closest('.ui-page'));//always use the scope: $(this).closest('.ui-page')
    });

• Object Group

  • $(document).on("change", "input[id^='NP20400BillingStreet']", function () {
    alert('value changed');
    //to get another control from here
    var tgt = $('#NP2010OtherControl', $(this).closest('.ui-page'));//always use the scope: $(this).closest('.ui-page')
    });

Document.Ready or Load Alternative

$(document).on("pageshow", function (e) {
var tgt = $('#NP20400BillingStreet', $(e.target));//always use the scope: e.target
});