Servlet Invoker Utility Component

This post will be the beginning of various posts in which I will create a Servlet Invoker utility component and through this component invoke the servlet for various operations in AEM by passing parameters from our component as an argument to the servlet.

Often times, we create a utility in AEM in form of Services, Servlets, etc. and call them by various means using Sling Models, WCMUSEPojo, etc. which is not consistent though it achieves your functionality, here through a common component we can invoke our Servlets and pass parameters to it and achieve our functionality.

To begin with, create a component in AEM and it's dialog. The dialog can contain the field for which servlet to invoke and what parameters to pass to the Servlet.
Its html contains a simple Button on the press of which our servlet will invoke.

For Example:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

   <h2>Welcome to Servlet Invoker Utility Component</h2>

   <strong>Source path:</strong> <span id="path1">${properties.path1}</span> <br>

   <strong>Destination path:</strong> <span id="path2">${properties.path2}</span>

   <br><br>

   <input id="submitButton" type="submit" title="Submit" value="Begin Operation">

   <div id="result">

       <h3 data-sly-test="${properties.path1 && properties.path1}">

                        Press Begin Operation button to invoke servlet</h3>

       <h3 data-sly-test="${!(properties.path1 && properties.path1)}">

                        Please author source and destination path</h3>

   </div>

<sly data-sly-call="${clientlib.js @ categories='servlet.invoke'}" />

It looks something like this:




Along with the html file of the component, create a clientlibs for the component with your categories say servlet.invoke and write a JS code which contains a logic to do an ajax call to your servlet on the press of the Button. Also, you can pass the parameters to your servlets through the same ajax call which you can get from your html.

For Example:

(function ($, document) {

    'use strict';

    $("#submitButton").click(function(){

        var r = confirm("This will invoke the servlet and begin operation.

                         Do you want to proceed? ");

        if (r == true) {

            $("#result").html('<h3>

                          Operation in progress...Please wait</h3>');

            $.ajax({

                    type : "GET",

                    url : '/system/utility/servletinvoker',

                    data : {

                        path1: $("#path1").html(), path2:$("#path2").html()

                    },

                    success : function(data) {

                        $("#result").html('<h3>

                                          '+data+'</h3>');

                    },

                    error : function(XMLHttpRequest, textStatus, errorThrown) {

                        $("#result").html('<h3>

                    Error calling utility servlet: '+errorThrown+'</h3>');

                    }

            });}});

})(Granite.$, document);

Notice the url of the servlet for ajax call, by this you can understand that the servlet is registered via a path, Since most probably, you will be using this utility component in the author instance, you can find out a path for the servlet to be registered in AEM.

Now, you are good to go with your simple component.