Customize Process App in Mobile Runner

This part of documentation will help to perform customization of user interface in Mobile Devices viz. Android Phone and Apple i-Pad. To conclude changes user has to perform several basic steps for synchronization as stated below:

Export the Process App from web runner using Export
After changes in HTML file of Change_Material_Lot import the modified package to Innowera Web Mobile Server from local system using Import Process APP.
Synchronization of Mobile Device : Synchronization in Mobile Devices is the final stage through which the changes made in html file are reflected in users experience.

Note: Ensure to import the changed package in Innowera Web and Mobile Server before proceeding towards Synchronization.

There are 2-Modes of synchronization available on Web and Mobile Server namely:

Automatic Synchronization

The automatic synchronization can be done from Web Runner through following steps:

Go to Admin > Settings > Device Settings.
Select the required options that is be synchronized at login and select Apply to implement the changes.

Manual Synchronization

Manual synchronization can be conducted from the application on device as follows:

Tap Options, and then select the Sync icon.
Select Download Process... stationed at the top-left corner of the Web and Mobile Server Application to check for updates.
The changes to the Apps will be displayed on the confirmation window. Select Sync from bottom-right of the window that will lead to download the required files.
In the confirmation window, select OK.
Completion of synchronization process will lead to the Index Page with changes as shown in the following screenshot.

Synchronization of Mobile Device

Synchronization in Mobile Devices is the final stage through which the changes made in html file are reflected in users experience.

Note: Ensure to import the changed package in Innowera Web and Mobile Server before proceeding towards Synchronization.

Automatic Synchronization

The automatic synchronization can be done from Web Runner through following steps:
1. In Innowera Web and Mobile Server, select Admin > Settings > Device Settings. The Device Settings page is displayed.
2. Select the required options in Auto sync on logon. Select Apply to implement the changes.
Manual Synchronization

Manual synchronization can be conducted from the application on device as follows:
1. Tap Options, and then click Sync icon.
2. Tap Download Process... stationed at the top-left corner of the Innowera Web and Mobile Server Application to check for updates.
3. The changes to the Apps will be displayed on the confirmation window, Click Sync from bottom-right of the window that will lead to download the required files.
4. In the confirmation window, select OK.
5. Completion of synchronization process will lead to the Index Page with changes as shown in the following screenshot.

Validation of Lot Size

This part of document will demonstrate the insertion of validation in fields. As an example in Change_Material_Lot, we will hereby insert the following validations:

Minimum Lot Size should not be less than 10
Maximum Lot Size should not be more than 100
Minimum Lot Size should not be greater than Maximum Lot Size

To insert validations in fields,

In case of Android Phone, browse to InnoweraPKG -> MobileRunner -> Android -> PublishedFiles -> Change_Material_Lot.html and open the file in HTML Compatible Editor. In case of Apple i-Pad, browse to InnoweraPKG -> MobileRunner ->iOS-> PublishedFiles ->Change_Material_Lot.html and open the file in HTML Compatible Editor.
Find out the functions Minimum Lot Size and Maximum Lot Size as highlighted in the following screenshot.
Insert a new property (E.g. itag=minlotsize and itag=maxlotsize) for defining minimum lot size and maximum lot size at the below displayed positions in html file.

Note: minlotsize and maxlotsize are the names used for examples; Users can use any names instead.

In case of Android Phone, browse to InnoweraPKG -> MobileRunner -> Android -> JS -> Change_Material_Lot.js and open the file in HTML Compatible Editor. In case of Apple i-Pad, browse to InnoweraPKG -> MobileRunner ->iOS-> JS -> Change_Material_Lot.js and open the file in HTML Compatible Editor.
Now find highlighted section as shown in the image below.
Replace the above highlighted code with the code given below.

$("[itag='btnSendToSAP']").on("touchend", function (e) {

CommonScripts.ShowLoader("Loading...");

var FormID = $(this).attr("formid");

CheckValidation(function(status){

if(status == true) {

var _minlotsize = $('input[itag="minlotsize"]').val();

var _maxlotsize = $('input[itag="maxlotsize"]').val();

if (_minlotsize < 10) {

navigator.notification.alert("Minimum Lot Size must be greater than 10");

} else if (_maxlotsize > 100) {

navigator.notification.alert("Maximum Lot Size must be less than 100");

} else if (Number(_minlotsize) > Number(_maxlotsize)) {

navigator.notification.alert("Maximum Lot Size must be greater than Minimum Lot Size");

} else {

SubmitPage(FormID, "SAP",$("[itag='btnSendToSAP']"));

}

}

});

e.preventDefault();
Save the changes made in the HTML file and Exit from Editor.
Import the process app through Import Process APP.
Synchronization in Mobile Devices and go to Change_Material_Lot.
Enter the data in the fields for test. General Fields like Plant, Material Number and Storage Location are filled as follows for verification of changes made:
- Plant: 1000
- Material Number: 100-100
- Storage Location: 0001

Note: Users can enter their relevant inputs for confirmation.

Conclusion

The following are the results that indicate successful implementation of Validation in Lot Size.

If Minimum Lot Size = 5 and Maximum Lot Size = 40, then a window will pop-up stating Minimum Lot size must be greater than 10.
If Minimum Lot Size = 50 and Maximum Lot Size = 400 then a window will pop-up stating Maximum Lot Size must be less than 100.
If Minimum Lot Size = 500 and Maximum Lot Size = 40 then a window will pop-up stating Maximum Lot Size must be greater than Minimum Lot Size.

Personalization in Front-End User Interface

The following image displays by-default User-interface of Mobile Runner:
After implementing several css customizations to by default image through changes in html file the below image is the output:

Customization of Lookup

The customization of lookup refers to a logical change in retrieval of Lookup values in Change_Material_Lot process app.

Default Behavior

The Default Behavior in Change_Material_Lot process app is as follows:

Plant is entered.
If Lookup is clicked for browsing various Material Number- the Material Numbers are retrieved from database file.
The Material Numbers which are displayed upon lookup are retrieved without any filters. i.e. all the Material Numbers in database are displayed.

Custom Behavior

These guidelines will lead user to mutate the logic and achieve the following modifications:

Plant is entered.
When Lookup is clicked for browsing the Material Number- the Material Number data are retrieved from SAP Table MARC using data extractor process file recorded for MARC table.
The Material Number data that are displayed upon lookup are related to the Plant that is entered.

For example: If 1000 is entered in plant field- The values belonging to 1000 Plant will be retrieved.

The following steps describe customization discussed in Custom Behavior:

The basic step towards this customization is to Import/Publish MARC.ite Process file using Process File.
In case of Android, browse to InnoweraPKG -> MobileRunner -> Android -> PublishedFiles -> Change_Material_Lot.html and open the file in HTML Compatible Editor. In case of Apple i-Pad, browse to InnoweraPKG -> MobileRunner ->iOS-> PublishedFiles -> Change_Material_Lot.html and open the file in HTML Compatible Editor.
Search for the Material Number in Manage_Material_Lot.html file as highlighted in the image below.
Replace the value of onclick Property at the location highlighted in the below image as onclick="javascript:lookupForMaterialNumber('A','Material Number Look up')" in html file.
Find the given highlighted section of code in Change_Material_Lot.html file and swap as demonstrated below.

Search Material Number and Plant and swipe as shown in the following screenshot.
The following screenshot exhibits the changes after swapping.

Now export MARC.ite (data extractor) process file as shown in the following screenshot.
Now extract the exported file and navigate to MobileRunner\Android\PublishedFiles and open MARC.html in compatible editor.
Once MARC.html is open, find starting form tag (<form>) and copy the code till ending form tag (</form>).
Switch to Change_Material_lot.html and find ending form tag (</form>) and paste the following code.

<h3 class="panel-title "> Header</h3>

</a> </div>

<div class="form-group "> <label class="col-sm-3 control-label " for="demo-is-inputsmall " data-role="none "> Material Filter: </label>

</div>

<tr>

<th imatno="MATNR ">Material Number</th>

<th imatno="WERKS ">Plant</th>

</tr>

</thead>

</table>

</div>

</div>

<div class="ProcLogonShortcutTitle " style=" "> <label class="lblProcLogonShortcut ">Logon Shortcut</label> </div>

</select>

</div>

</div>

</div>

</form>

Browse to InnoweraPKG -> MobileRunner ->iOS-> JS -> Change_Material_Lot.js and open the file in HTML Compatible Editor in case of Apple i-Pad.
Paste the following code in end of the Change_Material_Lot.js file.

//*********custom function for lookup *****

var itagCustom = "";

var lookupNameCustom = "";

function lookupForMaterialNumber(itag,lookupName) {

itagCustom = itag;

lookupNameCustom = lookupName;

var sesMobileSettings = JSON.parse(sessionStorage.MobileSettings);

sesMobileSettings.DataID = "";

sesMobileSettings.UniqueID = "";

sessionStorage.MobileSettings = JSON.stringify(sesMobileSettings);

SubmitPage("Form20170518165337720", "SAP",$("[itag='btnSendToSAP']"));

}

function printLookupCustom(jsonRecordWithResult){

gArrLookupFileData = jsonRecordWithResult.ResultObject.SapReturnTable;

PaintLookup(lookupNameCustom, itagCustom);

}

Now find the ProcessOperationSuccess function and paste the following JavaScript as shown in the following screenshot.

if( FormID == "Form20170518165337720") {

//enableCtrl();

gArrColumnName = ["MATNR","WERKS"];

printLookupCustom(jsonRecordWithResult);

}
After implementing the mentioned steps, save and exit.
After importing the process file to Innowera WMS Sync the device using Synchronizaiton and go to Change_Material_Lot through in InnoweraApp to verify the changes.

Conclusion

On accessing Change_Material_Lot process app, follow these steps.

Tap on Lookup button stationed near Plant field, and then select a particular Plant from the list.
Now tap on Lookup button stationed near Material Number Field.
A pop-up window will appear on tapping the Lookup button of Material Number that will display the material numbers related to selected plant only.