Resco JavaScript Bridge: Difference between revisions

Jump to navigation Jump to search

Resco JavaScript Bridge (view source)

Revision as of 16:33, 12 February 2020

5,523 bytes added ,  12 February 2020
→‎Form manager
Line 735: Line 735:
</syntaxhighlight>
</syntaxhighlight>


== Form manager ==
=== Form manager ===
 
An interesting feature of Resco JavaScript Bridge is the ability to show standard (native) UI forms from JavaScript. This is especially useful if you don't want to recreate the whole UI in HTML, but you want to switch back and forth between HTML to standard UI. There are three Form Manager functions available for this:
* opening new entity dialog (edit form for a new entity)
* entity detail dialog (contact information form)
* entity edit dialog.
 
In the following example, we create a simple HTML page for a Contact associated with an Account. It displays just the Contact’s name. After clicking on one of items (name), standard Contact edit dialog appears. There is one more option to create a new associated contact: by opening entity new dialog with a predefined Account id. In our solution, we don’t use auto-reload when you save a newly created associated contact. We just create the button with a function to reload the page. We also use some basic Javascript and DOM html functions to print the result on a page.


<syntaxhighlight lang='js'>
<syntaxhighlight lang='js'>
</syntaxhighlight>
function OpenForm()
{
   data.innerHTML = "";
   var entity = new MobileCRM.FetchXml.Entity("account");
   //entity.addAttributes();
   var linkEntity = entity.addLink("contact", "parentcustomerid", "accountid", "inner");
   linkEntity.addAttribute("contactid");
   linkEntity.addAttribute("fullname");
 
   entity.filter = new MobileCRM.FetchXml.Filter();
   entity.filter.where("accountid", "eq", accountId);
 
   var fetch = new MobileCRM.FetchXml.Fetch(entity);
   fetch.execute(
      "Array",
      function (res) {
         if (res && res.length > 0) {
         for (var i in res) {
            var contact = res[i];
         try {
            var a = document.createElement("a");
            a.href = "#";
            a.id = contact[0];
            a.addEventListener("click",
               function (e)
               {
                  MobileCRM.UI.FormManager.showEditDialog("contact", e.target.id);
                  reloadData();
               },
            false);
 
            a.appendChild(document.createTextNode(contact[1]));
            data.appendChild(a);
            data.appendChild(document.createElement("br"));
            }
         catch (err)
         {
            alert("Exception Error : \n\n" + err);
         }
      }
   }
   },function (err) {alert(err); });
}
 
   function addAssociatedContact()
   {
   // Create reference for associated account
   try{
      var target = new MobileCRM.Reference("account", accountId);
      var relationShip = new MobileCRM.Relationship("parentcustomerid", target, null, null);
      MobileCRM.UI.FormManager.showNewDialog("contact", relationShip);
 
      // Show all associated contact at the begining;
      reloadData();
      } catch (err)
      {
         alert("Exception : " + err);
      }
   }
 
   function reloadPage()
   {
      document.location.reload(true);
   }
 
   function reloadData()
   {
      OpenForm();
   }</syntaxhighlight>
 
First, we use FetchXML to get data and in loop of getting result data we create the DOM element object of “a” and create event handler “onclick” with a function to Open Edit Form for specified Account. Function “reloadData” is used to fetch and display data.


<syntaxhighlight lang='js'>
<syntaxhighlight lang='js'>
a.addEventListener("click",function (e) {
   MobileCRM.UI.FormManager.showEditDialog("contact", e.target.id);
   reloadData();
   }, false);
</syntaxhighlight>
</syntaxhighlight>
To create a new associated contact we use Method for FormManager object, showNewDialog.
We need to create a reference for the specified account and create a relationship object, which contains our reference as a target of relationship.


<syntaxhighlight lang='js'>
<syntaxhighlight lang='js'>
function addAssociatedContact()
   {
      // Create reference for associated account
      try{
         var target = new MobileCRM.Reference("account", accountId);
         var relationShip = new MobileCRM.Relationship("parentcustomerid", target, null, null);
         MobileCRM.UI.FormManager.showNewDialog("contact", relationShip);
         // Show all associated contact at the begining;
         reloadData();
      } catch (err)
      {
         alert("Exception : " + err);
      }
   }
</syntaxhighlight>
</syntaxhighlight>


<syntaxhighlight lang='js'>
Our HTML looks like this:
</syntaxhighlight>
 
<syntaxhighlight lang='html'>
<h3>Account : </h3>
   Name <p id="accountName"></p>
   <button id="reload" onclick="reloadPage()">Reload page</button><br /><br />
   <button id="reload" onclick="reloadData()">Reload Data</button><br /><br />
   <button id="createNew" onclick="addAssociatedContact()">New Contact</button><br /><br />
   <div id="data">
</div></syntaxhighlight>
 
 
 
 
 
 


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

Navigation menu