Resco JavaScript Bridge: Difference between revisions

Jump to navigation Jump to search

Resco JavaScript Bridge (view source)

Revision as of 16:27, 12 February 2020

10,684 bytes added ,  12 February 2020
→‎Form commands
Line 553: Line 553:


Commands can be very useful and can enable certain actions throughout the whole form, on all detail tabs. The main principle is to create a command in Woodford but to define and bind the logic in JavaScript.
Commands can be very useful and can enable certain actions throughout the whole form, on all detail tabs. The main principle is to create a command in Woodford but to define and bind the logic in JavaScript.
For general information about form commands, see [[Command editor]].
==== Creating commands in Woodford ====
First, create a custom command in Woodford.
# Select an entity from the '''Project''' menu and edit its form.
# Click '''Edit Commands''' to open the command editor.
# Click '''New Command'''. Provide a name and a label, then click '''OK'''.
A command defined like this will be visible on all detail tabs of the form, but won’t be available on associated tabs, iframe tabs, or map tabs.
Now you can add an iframe to the form and upload your HTML/Javscript file.
# Select a tab and click '''Add IFrame'''.
# Click '''Manage''' and upload your offline HTML files, then return to the iframe configuration.
# Click '''Browse''' and select the uploaded file.
# Enter other parameters as needed, then click '''OK'''.
In our scenario, we create a command that deletes the associated parent customer for a contact entity as well as the contact itself. We have added a new custom command to the Contact form and prepared following JavaScript code for handling this command.
As you can see in the code below, we are defining a custom onCommand callback. This gets triggered when a command is pressed – and with the first parameter which is the name of the command, we specify that we want this callback to be called only for our command with the name ‘custom_Delete’. The second parameter is the callback function with entity form as a parameter. Our command is created on the Contact entity form so we can find parent customer’s ID for the associated record via entity form’s property ‘entity’. In this situation, our contact is associated with one parent only, but in the case when there would be more records for one contact, you will need to create a fetch with additional filter and pass the results to “delete Item(entityName,id)”. When you have the entity name and correct ID, you can call Dynamic Entity function deleteById to erase the Account record. In our example, after all this is done, we close the current form as follows:
<syntaxhighlight lang='js'>
MobileCRM.bridge.closeForm();
</syntaxhighlight>
Full code:
<syntaxhighlight lang='js'>
MobileCRM.UI.EntityForm.onCommand(
   "custom_Delete", // Name of custom command created in Woodford
   function (entityForm) {
      deleteItem(entityForm.entity.properties.parentcustomerid.entityName, entityForm.entity.properties.parentcustomerid.id);
      deleteItem(entityForm.entity.entityName, entityForm.entity.id)
      close();
   },
   true, null
);
// delete the record
function deleteItem(entityName, id) {
   var entity = new MobileCRM.DynamicEntity.deleteById(entityName, id,
      // Delete existing Dynamic entity by Exsting entity ID
      function (success) {
         if (success != null) {
            alert("Update sucess error " + success);
         }
         else {
            alert("Item Was deleted");
         }
      },
      function (err) {
         if (err != null) {
            alert("Update failed error " + err);
         }
         else {
            alert("Item Was deleted");
         }
      },
      null);
}
function close() {
   // Close Form containing the HTML
   MobileCRM.bridge.closeForm();
}
</syntaxhighlight>
==== Creating command via JSBridge ====
We continue exploring the commands on the forms and this time, we will show you how to create a command on the iframe tab. We will create three commands to showcase some of the features of JavaScript Bridge – one to scan barcode, another to get the device info and third to update the location.
The big difference between the previous approach and this one is that we are not binding the commands created in Woodford with JavaScript methods, but we are creating new commands directly from JavaScript. These commands are displayed only on the iframe tab.
As for the commands themselves, they show different special features of JavaScript Bridge – you can see how to display a scan barcode dialog and process the result, how to get the device information like operating system or model of the device, and also how to obtain the location information (latitude and longitude).
<syntaxhighlight lang='js'>
function CommandExample() {
   MobileCRM.UI.ViewController.createCommand(true,
   ["Scan Barcode", "Get Device Info", "Update Location"],
   function (command) {
      // Check if command with label name "scan barcode" was clicked
      if (command == "Scan Barcode") {
         ScanBarcode(command);
      }
      else if (command == "Get Device Info") {
         GetDeviceInfo(command);
      }
      else if (command == "Update Location")
         UpdateLocation();
   });
   function CheckVersion(command) {
      //<param name="command" type="MobileCRM.Configuration"></param>
      if (command.applicationVersion < "6.0")
         return false;
      else
         return true;
   }
   function ScanBarcode(command) {
      data.style.display = "none";
      if (CheckVersion(command) == true) {
         MobileCRM.Platform.scanBarCode(
            function (res) {
               // Input parameter to function is "array" of data
               if (!res || res.length <= 0)
                  MobileCRM.bridge.alert("result doesn’t contain any data");
               else {
                  // simply display barcode on Html Page
                  var code = document.createElement("span");
                  code.appendChild(document.createTextNode(res[0]));
                  data.appendChild(code);
                  data.style.display = "block";
               }
            },
            function (err) {
               alert("Scan barcode failed due to \n " + err);
            },
            null);
      }
   }
   function GetDeviceInfo(command) {
      MobileCRM.Configuration.requestObject(
         function (config) { // Input paramter is object , with configuration properties
            var setting = config.settings;
            var span = document.createElement("span");
            span.appendChild(document.createTextNode("Absoulte URL : " + setting.absoluteUrl));
            span.appendChild(document.createElement("br"));
            span.appendChild(document.createTextNode("Device Info : " + setting.deviceInfo));
            span.appendChild(document.createElement("br"));
            span.appendChild(document.createTextNode("Application Edition : " + config.applicationEdition));
            span.appendChild(document.createElement("br"));
            if (config.isOnline == true)
               span.appendChild(document.createTextNode("Is Online : True"));
            else
               span.appendChild(document.createTextNode("Is Online : False"));
            span.appendChild(document.createElement("br"));
            if (config.isBackgroundSync == true)
               span.appendChild(document.createTextNode("Is BackGroundSync : True"));
            else
               span.appendChild(document.createTextNode("Is BackGroundSync : False"));
            span.appendChild(document.createElement("br"));
            data.appendChild(span);
            data.style.display = "block";
         },
         function (err) {
            alert("An error has occured \n " + err);
         },
         null);
   }
   function UpdateLocation() {
      MobileCRM.Platform.getLocation(
      // If device supports it, create object with prop. lat and long.
         function (res) {
            //This result is object with properties latitude and longitude
            if (!res || res.length <= 0)
               alert("No info about location");
            else {
               var latLong = document.createElement("p");
               latLong.appendChild(document.createTextNode("Latitude : " + res.latitude));
               latLong.appendChild(document.createElement("br"));
               latLong.appendChild(document.createTextNode("Longitude : " + res.longitude));
               data.appendChild(latLong);
               data.style.display = "block";
            }
         },
         function (err)
         {
            alert("Get Location INFO failed due to \n" + err);
         },
         null);
   }
}
</syntaxhighlight>
== Form manager ==
<syntaxhighlight lang='js'>
</syntaxhighlight>
<syntaxhighlight lang='js'>
</syntaxhighlight>
<syntaxhighlight lang='js'>
</syntaxhighlight>
<syntaxhighlight lang='js'>
</syntaxhighlight>


<syntaxhighlight lang='js'>
<syntaxhighlight lang='js'>
Retrieved from "https://docs.resco.net/wiki/Special:MobileDiff/1918"

Navigation menu