Calling Configuration Web Services from Client Side Code in a Creatio Freedom UI Page

One of my favorite features in Creatio is the ability to create web services that you can call from client side code. This allows you to do heavy operations on the server and then consume it from the client, making an overall better user experience. I wrote about how to create and consume web services in a previous article. This article will show how to do this from a Freedom UI Page.

View previous article: Creating a Web Service and Consuming it From Client-Side Javascript in Creatio

Refer to the previous article for details on how to create the web service itself This article will only focus on how to consume it from a Freedom UI Page. In Creatio 8.0.6 and later, there is a new DevKit SDK which provides various modules for doing different things. We’ll be using a module named HttpClientService in this article to consume the web service.

To use this devkit, you’ll need to add “@creatio-devkit/common” to the modules list of your page. This will look like this (note the “@creatio-devkit/common” in the square brackets and the sdk without quotes in the parenthesis):

define("UsrMyCustomEntity_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, 
function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
	return {
		// ... the rest of the page here
	};
});

Now, with that module available, you can access things in the SDK, such as the HttpClientService. We’ll need to create an instance of it, then we’ll have methods available such as get and post to call the service. Using the same web service defined in the previous article, our code would look like this:

// NOTE: in this example, my source code schema is named "UsrSourceCode1" 
// and a method named "SayHelloTest", which takes a single string parameter named "Name"

var payload = {
	Name: "Ryan"
};

const httpService = new sdk.HttpClientService();
const response = await httpService.post("rest/UsrSourceCode1/SayHelloTest", payload);
Terrasoft.showInformation(response.body.SayHelloTestResult);

In the example above, there’s a few things to point out that are different than before when using ServiceHelper (as outlined in the previous article):

1. We provide the relative URL for the service as “rest/ClassName/FunctionName”
2. We retrieve the result using the same name as before, but its a property of the response body
3. The request returns a promise, which we can await, if wanted, rather than as a callback

Also, something to note about HttpClientService, it can also be used to call external services as well. If the URL is prefixed with http or https, it understands that this is an external URL and will not prefix the base URL of the system. The HttpClientService module contains several methods for calling a URL. In the example above, we’re calling the “post” method, but also available is: get, post, delete, put, and patch.