AJAX-Calls in a Low-Code Environment

If you want to get data from a database or a web service, you usually have to fill an HTML-form, click a submit-button and wait for the server to send the content of the target-page. So you reload the whole page every time you need new data.

With AJAX the server is called from a JavaScript function. The same JavaScript function receives the result, which now may be a data-structure instead of a well-formed HTML page, and decides what to do with this data. This all is done without reloading the page.

In this post I’ll show you how you can use AJAX in Intrexx to call a Groovy script.

How to use AJAX in Intrexx?

Actually, Intrexx  already does several AJAX calls by itself. For example, if you are on a page of an application and click on a link from the application menu, Intrexx does an AJAX call to just receive the application page area, without the need of reloading the application menu or page header.

Now sometimes you want to do an AJAX call in your own application. Since AJAX is an interaction between server and client you of course need JavaScript on the client side and on the server side either Groovy, Velocity or an Intrexx user workflow.

So the goal is to send a request parameter to a Groovy script and then back to JavaScript.

For all three of these languages Intrexx offers predefined code-snippets. You can use these snippets to write your own scripts, like we do now.

An AJAX ready Groovy script

The code-snippet in the Groovy code library is somewhat hidden, because it is just called JSON Response which looks like this:

response.json()

// define an error handler
response.onError = {e, err ->
	//err.type = "default"
	// either title/description, ...
	err.title = "my error"
	err.description = e.message
	err.showEmbedded = true
	// ... or a redirect
	// err.redirectUrl = "http://www.example.org/"
	// err.redirectDelay = 1500 // milliseconds
}

// check permissions
g_permissions.check {
	// application("<Application GUID>": "access")
	// dataGroup("<Datagroup GUID>": "read", "<another Datagroup GUID>": "write,create")
}

// create some JSON content
writeJSON("person": [
	givenName: "Donald",
	lastName: "Duck",
	age: 78,
	nephews: ["Huey", "Dewey", "Louie"]
])

Now what does this snippet do?

First you define the response to send a JSON structure back to the origin of the call.

After that you have the possibility to define an error handler. The error handler describes how Exceptions that occur while the script is executed are presented in the browser. By default exceptions are shown in a small box in the lower right corner of a page. In this error handler you define the title and description of this box, as well as if the box should be embedded in the default Intrexx error box. You are able to redirect the user after the error message appears as well, by defining an URL and a delay.

The snippet also contains a closure which checks the permissions of the current user. So if the current user doesn’t have the permission to access the given applications, read,write, or create records of the given datagroups, the closure fails with an Exception and the AJAX call ends with an error.

The last part you need is to write the JSON response itself. For this, Intrexx offers the global writeJSON method. This method converts an object to its JSON representation, which means that you can pass single values, but also arrays, lists and maps filled with data.

Between the permission check and the writeJSON method you would like to place your own business logic, for example database calls, calculations, plausibility checks, calls to external Java or Groovy libraries or what ever logic you need.

In this example, the logic checks if the request value is set and if it is, the result is “success” and passes the request value back to the JavaScript. Else it returns “error” and an appropriate error message.

So after some adjustments the complete Groovy script looks like this:

response.json()

// define an error handler
response.onError = {e, err -&gt;
	err.title = "error while calling Groovy-Script"
	err.description = e.message
	err.showEmbedded = false
}

// check if current user has access to this application
g_permissions.check {
	application("AE...93": "access")
}

def result = [:]
if(g_request.containsKey("param_a") &amp;&amp; g_request.get("param_a").size()&gt;0){
	def value = g_request.get("param_a")
	result["result"] = "success"
	result["value"] = value
}else{
	result["result"] = "error"
	result["value"] = "request value missing"
}
// create JSON content
writeJSON(result)

Place the AJAX call in JavaScript

In the JavaScript code library there are several code snippets you could use to call either Groovy, Velocity or a user workflow. In order to call the Groovy script from before, which I placed inside the application folder, I use the snippet “Retrieve JSON calling a groovy file (Application)”.

For this snippet to work, I need to pass a contextual element so that the business logic can determine the application to look for the Groovy script. In this case I use a textcontrol on the current page.

Also I need to pass the name of the Groovy script to be called.

In the data attribute of the call I pass the value of the textcontrol I used before. I pass it as “param_a” which is the name of the request value I checked before in the Groovy script.

The success attribute defines an event handler which is executed if the Groovy script doesn’t result in an exception.

In the background this function executes the jQuery ajax() function so there are additional parameters you can set, for example the async attribute to force the call to be synchronous or asynchronous, or the error attribute where you can define an event handler which should be executed in case of an exception in the Groovy script.

The complete JavaScript for this example looks like this:

function call_groovy_script(){
	var el = getElement("72...3F"); /*Value  textcontrol*/
	ix.ajax().requestAppGroovy("ajaxScript.groovy", {
	    dataType: "json",
	    data: {
	        "param_a": Browser.getValue(el)
	    },
	    success: function (data) {
	    	if(data.result == "success"){
	        	alert("result is: "+data.value);
	    	}else{
	        	alert("error: "+data.value);
	    	}
	    },
	    ixWaitAnim: {
	        element: el,
	        type: "overlay"
	    }
	}, el);
	return true;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.