AC Tips & Tricks: Custom API - Load data into Adobe Campaign WebApp using AJAX (Part 2)

[#1]

Context

In this topic, you will learn how to leverage a custom API created in this blog and load data into a WebApp form using AJAX.

Dependencies

1. bootstrap@5.1.3
2. jquery-3.6.0.min

WebApp HTML

Copy the code attached in the recipientAjaxForm.docx and paste it into a page activity webapp such as below.

JS Script logic

The following script is pretty self explanatory, it calls custom API endpoint using AJAX, parses and retrieves response data into webapp form and does the error handling, complete html code is available in the attached file.

    <script type="text/javascript">
     $(document).ready(function() {
            checkErrors(); //check any errors on page load
          });
		  
		  /*** event listeners ***/
          var btn = document.getElementById("search"); btn.addEventListener('click', getDetails);
		
		  /* 
			 function which parses response data and loads it in the corresponding fields
			 this is possible by matching response keys with html form element fields names, they must have
			 the same name otherwise data won't be parse correctly.
		  */
          function addToForm(data) {
            Object.keys(data).forEach(key => document.querySelector(`input[name="${key}"]`) == null ? 0 : document.querySelector(`input[name="${key}"]`).value = data[key])
          }
			
		/* Function to check for any errors sent by API */
          function checkErrors(arg) {
            var err = document.controller.getValue('/ctx/vars/err');
            var id = document.controller.getValue('/ctx/vars/id');
            if (err) {
              $('#neoErr').modal('show');
              $(".modal-body").append("<span class='errNeo'>" + err + "</span>");
            }
            if (arg == 1) {
              $(".errNeo").remove();
            }
          }
		  
		  /*
			Function to call API endpoint and retrieve data through http response
		  */
          var getDetails = function() {
            event.preventDefault(); 
            var id = document.getElementById("recipientId").value; //get recipient id from field
            var url = "/cus/recipientAPI.jssp?id=" + id; //url construct
            document.controller.setValue('/ctx/vars/id', id); //set recipient id to ctx context variable
            var request = $.ajax({
              type: 'GET',
              url: url,
              async: true,
              success: function(response) {
                $('#recipientData').trigger("reset");
                addToForm(response) //call function to map response data to field values
				
                /*** parse response errors ***/
                const errors = Object.keys(response).filter(k => k.startsWith('error')).map(k => response[k]);
                document.controller.setValue('/ctx/vars/err', errors);
                checkErrors(); //check for errors now
              }
            });
          }
          
    </script>

HTML Render

Operation

1. Start by typing in the search box the ID of the adobe campaign recipient record you would like to load into the webapp form.
2. After clicking search, JavaScript will construct the API endpoint and include the id param, then it makes a call to our custom API created in our previous blog.
3. If the ID of the operator does not exist, you will get an error in a popup, otherwise, data is loaded into the form.

Enhancements

Ideas to further develop this project:

1. Modify the API to load data from custom schemas rather than the recipient schema
2. Enforce bootstrap validation rather than adobe campaign validation
3. Retrieve and submit data without page refresh

recipientAjaxForm.docx ‏20 KB

[#2]

@david--garcia 

It is really a great piece of information for someone who is new to the concept of queryDef API and AJAX.

But there are a few things that should be considered from a security standpoint.

1. Make sure the AJAX endpoint is not publicly accessible else you end up exposing PII data.

2. Use some sort of rate-limiting mechanism to limit multiple requests coming from the same IP to avoid data scraping.

3. Make sure the AJAX origin is allowed by checking the headers.

[#3]

Hey@_Manoj_Kumar_ 

Appreciate your feedback, (part 3) which aims to cover the security features is in the making, I've layed out some topics to cover, it would be great if you could join me in the making of part 3 to go over your suggestions in more detail, contact me at davidgarcia_uk@adobe.com and we can start collaborating.

[#4]

what about use ajax to send json data, request.getParamter should be invalid.