JavaScript Access

When creating your webpage you may want to access the XMPL objects from your JavaScript code. You may want to access the XMPL services, which allow you to perform activities related to your XMPie campaign data, such as get the ADORs of a recipient, update their data and track activities. If you have an XMPL controller in your page you may want to access it as well.

If you are working with AngularJS, calling the services from your code is a simple matter of including the xmpResource service, which should be available once you include the basic XMPL javascript (xmp.min.js).

You can see example here

Access the XmpProvider in a Non-XMPL Page

XMPL provides simple accesses for the XMPL methods. To get access to these methods uses the global variable xmpProvider.

<script>

    $(document).ready(function () {
      var accessToken = localStorage.getItem('serviceToken');
      var rid = localStorage.getItem('xmpRecipientID');
      var adorList = ['FirstName', 'LastName', 'Email', 'Feedback'];

      function setAdorsValue() {
        $("#FirstName").text(window.xmpProvider.store.xmp.r.FirstName);
        $("#LastName").text(window.xmpProvider.store.xmp.r.LastName);
        $("#Email").text(window.xmpProvider.store.xmp.r.Email);
        $("#Feedback").text(window.xmpProvider.store.xmp.r.Feedback);
      }

      function setAdorsToInput() {
        $("#FirstNameInput").val(window.xmpProvider.store.xmp.r.FirstName);
        $("#LastNameInput").val(window.xmpProvider.store.xmp.r.LastName);
        $("#EmailInput").val(window.xmpProvider.store.xmp.r.Email);
        $("#FeedbackInput").val(window.xmpProvider.store.xmp.r.Feedback);
      }

      function getAdors() {
        setAdorsValue();
        setAdorsToInput();
      }

      window.xmpProvider.api.getAdorValues(accessToken, rid, true, adorList, [], false)
        .then(getAdors);

      $(' #form ').submit(function (event) {
        event.preventDefault();
        var adorsForm = {
          FirstName: $("#FirstNameInput").val(),
          LastName: $("#LastNameInput").val(),
          Email: $("#EmailInput").val(),
          Feedback: $("#FeedbackInput").val()
        }
        window.xmpProvider.api.updateAdors(adorsForm)
          .then(setAdorsValue)
      })

    });
  </script>
....

window.xmpProvider - object that can take access to the XMPL library methods. window.xmpProvider.api.getAdorValues(accessToken, rid, isLogin, adors, resolved, async) - create request to get list of ADORs. accessToken - accessToken from config, rid - the recipient ID of the recipient for whom to get the ADORs isLogin - set the value to "true" to eliminate the need to make two calls – one login and one ADOR fetching, adors - the array of requested ADORs, resolved - the array of adors names. ADORs in this list should go through asset resolving, async - if not passed, a result is returned that when complete will have the recipient data key/value object. if true, an async request will start a query job on the server, and return with a job ID.

After you get the list of ARORs you can use it in the template. For Example:

function setAdorsValue() {
   $("#FirstName").text(window.xmpProvider.store.xmp.r.FirstName);
   $("#LastName").text(window.xmpProvider.store.xmp.r.LastName);
   $("#Email").text(window.xmpProvider.store.xmp.r.Email);
   $("#Feedback").text(window.xmpProvider.store.xmp.r.Feedback);
}

window.xmpProvider.api.updateAdors(adorsForm) - create POST request to send list of ADORs in order to update ADORs. This request return an updated list of ADORs. After you get updated data you can update the template.

Note: to get more information about xmpProvider object follow to the link