Customize Process App in Web Runner

This part of documentation will help to perform customization of user interface in WebRunner. To conclude changes user has to perform several basic steps for import and export as discussed earlier:

1. Export the Process App from web runner using Export functionality
2. 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.

Following customizations will be achieved in Web Runner at the completion of this part of guidelines:

• Modification of Logo
• Validation of Lot Size
• Personalization of Front-End UI
• Customization of Lookup

Modification of Logo

This section will illustrate the modification of Logo in Change_Material_Lot on Innowera Web Runner through mutation in its HTML File. HTML file can be edited using any HTML Compatible Editor though these guidelines implement Visual Studio Code for editing the HTML File. Before proceeding towards edition of HTML- file, ensure to adopt the following note:

Note: Go to extracted folder of Process App and browse to InnoweraPKG --> WebRunner --> AppFiles and paste the desired logo at this location. If the 'AppFiles' folder is absent at InnoweraPKG -->WebRunner, create the folder at this location. Change_Material_Lot Process App is assumed here for customization of logo. Moreover 'Visual Studio Editor' is utilized for editing HTML file though users can adapt any other HTML Compatible Editor.

To edit the HTML file,

1. Go to the extracted folder and browse to InnoweraPKG> PublishedFiles > MM02 and open the file in HTML Compatible Editor.

   

2. Find out id=ilogo in Change_Material_Lot.html file.

   

3. Replace the path of image from [src= ../Content/images/companylogo.png] to[src=../AppFiles/MyLogo.png] and change the image tag [id=ilogo] to[id=MyLogo].

   

Note: My Logo.png is the name of image that can vary as per user's preference.

4. Save the changes made in the HTML File and Exit from Editor.
5. Import the process app through Import Process APP guidelines as discussed earlier.

The customized screen with modified logo is as shown in the following screenshot.

Validation of Lot Size

This part of document will demonstrate the insertion of validation in fields. Validation determines a behavioral mutation that is triggered upon violations of validation fields. As in Change_Material_Lot, we will hereby insert the following validations:

• Minimum Lot Size should be greater than 10
• Maximum Lot size should be less than 100
• Maximum Lot Size should be greater than Minimum Lot Size

To insert validations in fields,

1. Go to the extracted folder and browse to InnoweraPKG -> WebRunner -> PublishedFiles -> Change_Material_Lot.html and open the file in HTML Compatible Editor.
2. Find the text- Minimum Lot Size and Maximum Lot Size in Change_Material_Lot.html file shown in the following screenshot.

   

3. Insert new properties (E.g. itag=minlotsize and itag=maxlotsize) for defining minimum lot size and maximum lot size at the below displayed positions of Change_Material_Lot.html file.

   

Note: The names minlotsize and maxlotsize are used in this examples; you can use any name.

4. Now find validate function in Change_Material_Lot.html file as shown in the following screenshot.

   

5. Replace the above highlighted code of Change_Material_Lot.html with the code given below.

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

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

   if (_minlotsize < 10) {

   alert("Minimum Lot Size must be greater than 10");>

   return false;

   } else if (_maxlotsize > 100) {

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

   return false;

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

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

   return false;

   } else {

   var HeaderData = GetHeaderData(this);

   var PageIsValid = validatepage(this);

   var FooterData = GetFooterData(this);

   if (PageIsValid) {

   var ObjProcessData = {

   HeaderData: HeaderData,

   FooterData: FooterData,

   AdditonalData: null,

   AutoShowResult: true,

   IsUpdateOnly: false,

   IsDoNotDeleteFromDraftBox: false,

   IsDoNotSaveInSentbox: false

   };

   RunProcess_V2(ObjProcessData, this, function(result) {});

   }

   return false;

   }

   }

   });

   

6. Save the changes made in the HTML file and Exit from Editor.
7. Import the process app through Import Process APP guidelines as discussed earlier.
8. After importing the process app to Innowera WMS; Access Change_Material_Lot Process App
9.  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:

1. 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.

   

2. 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.

   

3. If Minimum Lot Size = 50 and Maximum Lot Size = 40 then a window will pop-up stating Maximum Lot Size must be greater than Minimum Lot Size.

   

Personalization of Front-End UI

• The following image displays by default user interface:

  

• After implementing several customizations in to by default image through changes in html file the following image is the output:

  

Customization of Lookup

The customization of lookup refers to a logical change in retrieval of Lookup values of Change_Material_Lotprocess 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 gain 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 appear upon lookup are related to the Plant that is entered.

Example: If 1000 is entered in plant field- The values (Material Number) belonging to 1000 Plant will only be retrieved.

The following steps will direct towards the modification discussed in Custom Behavior:

1. The basic step towards this customization is to Import MARC.ite Process file using
2. Search for the Material Number in Change_Material_Lot.html as highlighted in the image below.

   

3. Replace the name lookup with Customlookup in the above section of code.

   

4. Find the given highlighted section of code in Change_Material_Lot.html and swap as demonstrated below.
• Search <th>Material Number</th> and <th>Plant</th> and swap as stated in the following screenshot.

  

• The following screenshot exhibits the changes after swapping.

  

5. Search for the below mentioned part of code in Change_Material_Lot.html file- for adjoining custom code.

   

6. Paste the following code at the position mentioned in the above image.

   $('img[role="CustomLookup"]').click(function () {

   var lookupname = $(this).attr("lookupname");

   var lookupinput = $(this).attr("lookupinput");

   var title = $(this).attr("title");

   var lookupfile = $(this).attr("lookupfile");

   if (lookupname != null && lookupname != "")

   GetLookupList_New(lookupname, lookupinput, title);

   else if (lookupfile != null && lookupfile != "")

   GetLookupList_New(lookupfile, lookupinput, title);

   ;});

7. Now add the following JavaScript code between <head> </head> in the Change_Material_Lot.html file.

   <script type="text/javascript">

      var _lookupcoll = new Array();

      function GetLookupList_New(lookupname, fieldname, title) {

          displayLookupList_New(lookupname, fieldname, function(returnValue) {

              if (returnValue) {

                  $("#titlelookup").val(title);

                  $("#dvDialog .btn").on("click", function(e) {

                      selectRow(fieldname);

                      $('#dvDialog').modal('hide');

                  });

    

                  $("#dvDialog").modal({

                      "backdrop": "static",

                      "show": true

                  });

                  $(document).on("click", '#divlookupcontent tr', function(e) {

                      $(".lookup-selected").removeClass("lookup-selected");

                      $(this).addClass("lookup-selected");

                  });

              }

          });

      }

      function displayLookupList_New(lookupname, fieldname, callback) {

          $.jgrid.gridUnload("divlookupcontent");

          var rowNum = jQuery("#divlookupcontent").getGridParam('rowNum');

          jQuery('body').showLoading('', "Processing Look up data...");

          var LookupID = lookupname;

          var _Plant = $("input[name='txt2']").val();

          if (_Plant != null || _Plant != "")

              var FilterCond = "WERKS like '" + _Plant + "'";

          else

              var FilterCond = "";

          var BodyContent = {

              ProcessFileName: "MARC.ite",

              UserID: UserID,

              LogonID: DefaultShortcutId,

              IsTestRun: false,

              HeaderItems: FilterCond,

              ProcessDisplayName: $("#title").html().trim(),

              ProcessHTMLFile: "Change_Material_Lot.html",

              ProcessType: "Data Extractor",

              FooterItems: null,

              FormName: null,

              DetailTables: null,

              BapiReturnTables: null,

              IsTestRun: false,

              IsDataForReview: false,

              IsSave: false,

              UserNote: null,

              UserNotes: null,

              ParentDataID: null,

              InboxID: 0,

              CreatedDate: new Date().toISOString(),

              ResultObjects: null,

              IsOutbox: false,

              DataID: null,

              UniqueID: null

          };

          try {

              $.ajax({

                  url: "../../Innowera/Default.aspx/PostProcessData",

                  type: "POST",

                  dataType: "json",

                  contentType: "application/json; charset=utf-8",

                  data: JSON.stringify({

                      runprms: BodyContent

                  }),

                  success: function(result) {

                      var result = JSON.parse(result.d);

                      var _ColumnName = "Material Number,Plant";

                      var Data = result.SapReturnTable;

                      var _ColumnDesc = "MaterialNumber,Plant".split(",");

                      var _column = new Array();

                      _column = "MATNR,WERKS".split(",");

                      CreateJqGrid(_column, LookupID, result.LookupName, Data, fieldname, _ColumnDesc, function(returnValue) {

                          if (returnValue) {

                              $(".ui-jqgrid-titlebar").hide();

                              $(".ui-jqgrid-hdiv").removeProp("overflow-y");

                              $(".ui-jqgrid-hdiv").removeProp("overflow-x");

                              jQuery('body').hideLoading();

                              callback(true);

                          } else

                              callback(false);

                      });

                  },

                  error: function(jqXHR, textStatus, errorThrown) {

                      jQuery('body').hideLoading();

                      ShowError(jqXHR, textStatus, errorThrown);

                      try {

                          var errorDetail = JSON.parse(jqXHR.responseText);

                          var msg = errorDetail.ExceptionMessage;

                          var requestedData = JSON.stringify(msg);

                          var messagetype = JSON.stringify("Error");

                          var messageno = JSON.stringify("FC-147");

                          FileSaveLog(messagetype, messageno, requestedData);

                      } catch (e) {}

                      callback(false);

                  }

              });

          } catch (e) {

              jQuery('body').hideLoading();

              ShowError(null, e.description, null);

              try {

                  var msg = e.Message;

                  var requestedData = JSON.stringify(msg);

                  var messagetype = JSON.stringify("Error");

                  var messageno = JSON.stringify("FC-148");

                  FileSaveLog(messagetype, messageno, requestedData);

              } catch (e) {}

          }

          return true;

      }

      function CreateJqGrid(column, LookupID, lookupname, result, fieldname, ColumnDesc, callback) {

          try {

              $("#divlookupcontent").jqGrid({

                  url: '../../ProcessDatabox.ashx',

                  datatype: 'json',

                  postData: {

                      Method: 'LookUpData',

                      LookUpId: LookupID,

                      ColumnNames: column

                  },

                  colNames: ColumnDesc,

                  colModel: columnsModel(column),

                  pager: '#Pager',

                  viewrecords: true,

                  caption: lookupname,

                  rowNum: 10,

                  rowList: [10, 20, 30],

                  hoverrows: false,

                  altclass: 'myAltRowClass',

                  height: "250",

                  shrinkToFit: false,

                  autowidth: true,

                  ignoreCase: true,

                  shortorder: "desc",

                  jsonReader: {

                      cell: "",

                      search: "isSearch",

                      page: "page",

                      records: "records",

                      total: "total",

                      rows: "rows"

                  },

                  ondblClickRow: function(rowid, iRow, iCol, e) {

                      var cm = $("#divlookupcontent").jqGrid("getGridParam", "colModel");

                      var colName = cm[0];

                      var _value = $('#divlookupcontent').jqGrid('getCell', iRow, colName.name);

                      if (_value != "") {

                          $("input[imapvalue='" + fieldname + "']").val(_value);

                          $("input[imapvalue='" + fieldname + "']").removeClass("error");

                      }

                      // $('div[itag="lookupdialog"]').dialog("close");

                      $('#dvDialog').modal('hide');

                      $('body').removeClass('modal-open');

                      $('.modal-backdrop').remove();

                  },

                  loadComplete: function(rowid) {

                      var _iscomplete = false;

                      for (var i = 1; i < rowid.rows.length + 1; i++) {

                          $('#divlookupcontent').jqGrid('setCell', i, column[0], "", "keyfielcol");

                          if (!_iscomplete) {

                              var _value = $("input[imapvalue='" + fieldname + "']").val();

                              if (_value != null && _value != "") {

                                  var rowData = $(this).jqGrid('getRowData', i);

                                  if (rowData[column[0]] == _value) {

                                      $(this).jqGrid('setSelection', i);

                                      var selrowid = $(this).getGridParam('selrow');

                                      _iscomplete = true;

                                  }

                              } else

                                  _iscomplete = true;

                          }

                      }

                      //Added by Nevil Gandhi

                      var gw = '830';

                      if (column.length <= 6) {

                          $("#divlookupcontent").jqGrid('setGridWidth', gw);

                      }

                      if ($("#divlookupcontent").width() < 1660) {

                          $('#divlookupcontent').css('width', $("#divlookupcontent").width() + 17);

                          $(".ui-jqgrid-htable").css('width', $(".ui-jqgrid-htable").width() + 17);

                      }

                  },

                  beforeSelectRow: function(rowid, e) {

                      //alert("1");

                      //var selrowid = $(this).getGridParam('selrow');

                      //restoreErrorStateFromData($("#" + selrowid)[0]);

                      //ptr = $(e.target).closest("tr.jqgrow");

                      //saveErrorStateInData(ptr);

                      return true;

                  },

                  searchoptions: {

                      attr: {

                          maxlength: 5

                      },

                      clearSearch: false, //==== to resolve clear button defect Added by Manali - 20/11/2014

                      dataInit: function(elem) {

                          $(elem).height(30).width(40);

                      }

                  }

              });

              $("#divlookupcontent").jqGrid('filterToolbar', {

                  searchOnEnter: false,

                  stringResult: true,

                  defaultSearch: "cn",

                  loadonce: true,

                  //clearSearch: false,

                  beforeSearch: function() {

                      $("#divlookupcontent").trigger('reloadgrid');

                  }

              });

              if (callback != undefined)

                  callback(true);

          } catch (e) {

              ShowError(null, e.description, e.message);

              if (callback != undefined)

                  callback(false);

          }

      }

   </script>

8. Save the changes made in the HTML file and Exit from Editor.
9. Import the Process App through Import Process APP.
10. After importing process app to Innowera WMS, access Change_Material_Lot process app and verify the changes.

Conclusion

• On accessing Change_Material_Lot process app, click lookup beside the Plant field.

  

• Select a particular Plant from list.

  

• Now click lookup button stationed near Material Number field.

  

• A pop-up window appears when clicking lookup of Material Number that will display its related Material Number only.