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

Note: You are currently viewing the XMPL-NG wiki. If you wish to visit the XMPL-Legacy wiki, click here.

Access the XmpProvider in a Non-XMPL Page

XMPL provides simple access to the XMPL methods. To get access to these methods use the global variable xmpProvider.

You can see an example here.

<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 a request to get a 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

You're currently viewing XMPL V5. Alternatively, go to XMPL V3