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 access these methods use the xmpProvider global variable.

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 access the XMPL library methods.
• window.xmpProvider.api.getAdorValues(accessToken, rid, isLogin, adors, resolved, async) - creates a request to get a list of ADORs.
  • accessToken - config accessToken.
  • rid - ID of the recipient for whom the ADORs are fetched.
  • isLogin - set value to "true" to eliminate the need to make two calls (one login, and one for ADOR fetching).
  • adors - the array of requested ADORs.
  • resolved - the array of ADOR 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 ADORs 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) - creates a POST request to send a list of ADORs in order to update the ADORs. This request returns an updated list of ADORs. After you get the updated data you can update the template.

Note: For more information about the xmpProvider object, see XmpProvider-NG