Servlet Invoker Utility Component

This post will be a 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, but 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 contains the field for which servlet to invoke and what parameters to pass to the Servlet .

It's html contains a simple Button on press of which our servlet will invoke.

For ex:

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

(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 path, Since most probably, you will be using this utility component in 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. In my next post, I'll create a servlet and show you how to invoke it through this component.