JazzTeam Experience in Using OutSystems

OutSystems is a robust and flexible low-code platform intended for the development of enterprise mobile and web applications that are deployed in local or hybrid environments.

A low-code development platform (LCDP) is software that provides developers with an environment used to create application software through graphical user interfaces and configuration instead of traditional computer programming. LCDPs reduce the amount of traditional handwritten code and ensure faster application development, installation, and deployment. A common advantage is that LCDPs have a smoother learning curve as compared to most programming languages and, accordingly, more people can participate in development.

In addition to the high level of application support and operation safety, developers highlight the following benefits of this platform:

JazzTeam actively uses the OutSystems platform for both training and commercial development.

Projects based on Outsystems platform in various domain areas, in particular, social networks, organization management, and financial audit, were developed by efforts of the company’s employees within a short time.

The system includes the following:

It allows organizing monitoring and reporting on suspicious financial transactions. The application was developed within a short time, both using the capabilities of the OutSystems platform itself and using ready-made templates provided by the platform’s community of developers.

JazzTeam developed and successfully uses a training and certification system for product development engineers based on the OutSystems platform. This system is effectively used in-house to train professionals in a relatively short period of time.

To create a WebSocket connection, you can use external service https://pusher.com/, which provides a WebSocket server and API to work with it. Forge offers module https://www.outsystems.com/forge/component/1493/pusher-com-apis/ that provides Server Actions and web components to work with pusher.com.

PusherPublish is a Server Action that allows posting a message on a specific channel of a WebSocket server to distribute it among subscribers.

PusherSubscribe is a UI component that allows listening to a channel (the name of the channel is specified in the arguments) to get to know about the occurrence of certain events (the type of events is specified in the arguments of the component). When an event occurs, the Screen Action specified in the parameters will be called.

Runtime refresh of a web page or a web block on it is an applied example of using a WebSocket connection. The user opens a page with a PusherSubscribe listening channel embedded in its body. A timer is created in the page Preparation that starts the Server Action. PusherPublish is called in this Server Action, which executes the Screen Action of the page. Changed data available on the page is uploaded to the Screen Action.

Let’s simulate the situation. Objective: to display a web block consisting of the setInterval() function and a container (the value of which is received from this function) as the value of the table field. The following problem may arise here – only the value of the last row of the table is displayed.

Nature of the problem: when calling the container from setInterval(), we access using

id = document.getElementById(‘” + displayContainer.Id +”‘)

All the containers will have equivalent ids, and if we access through the document DOM model, we will only access the last web block.

Possible solution. To change the container id inside the JS function and transfer the new id as an argument into the function (which is the first argument of the setInterval() function).

See the example below (one of the options for initializing uniqId is to make a global variable that will increment the value of uniqId when the web block is being initialized):

let displayContainerId = ‘ displayContainer’ + uniqId;
document.getElementById(‘” + displayContainer.Id + “‘).setAttribute(‘id’, displayContainerId);
let interv = setInterval(
    function() {
    render(startDuration, displayContainerId);
  },
  1000);

To ensure correct communication, OutSystems infrastructure components shall be time-synchronized and UTC shall be set. However, to display the time on the screen in the user’s time zone, you should use the following trick.

Add the Time Zone module in the application dependencies. After that, determine the User’s TimeZone using JS, hidden Input and the following two buttons:

GetIANATimeZone action (from the Time Zone module) with Tz input parameter is linked to the IANA button. GetSystemTimeZones – to the Offset button. You should use GetSystemTimeZones.TimeZones to check condition GetSystemTimeZones.TimeZones.Current.TimeZone.UtcOffset = Tz, and if it is true, then the required TimeZone is GetSystemTimeZones.TimeZones.Current.

The user’s current TimeZone.Identifier can be stored in the Session Property or, even better, in an auxiliary Entity with the User Identifier.

To display the time value, write the following function: ConvertFromTimeZone(DateTimeToDisplay, GetCurrentTimeZone(), Visitor.TimeZoneId). For the purposes of formatting, you can wrap it in the FormatDateTime function.

Despite the abundance of built-in functions and features, it is sometimes worth reading the documentation or studying a forum before using them, since you may encounter behaviour that you do not expect. For example, OutSystems has Email data type and, accordingly, the function to validate it, but you shouldn’t rely on it. It was experimentally found that addresses that consist of characters before and after @ (e.g., 1@1), as well as an empty string, will be valid. This can be easily fixed by an extension written in C# or through internal logic (like Regex_Search).

Charts API is a built-in chart tool based on Highcharts external resource. The documentation of the parent component contains descriptions of all the elements, classes, methods, parameters and functions encountered when working with various types of charts. It allows customizing charts and diagrams more freely, and, possibly, building dependencies that are not presented in OutSytems. For example, using JSON formatting according to the Highcharts rule, you can immediately set all the elements and get the required chart with the help of a single action.

The platform allows connecting jQuery plugins, which are presented in large amounts on the Internet, with no difficulties. You can expand and diversify the content of the application using them. For this purpose, you need to read the readme file and connect the necessary code components correctly. The guideline is available on OutSystems website.

Some REST services require authorization, in which the combination of login + password (api-key + secret key) must be encoded in base64.

For example, Twitter API. When making basic requests, Twitter API requires a Bearer token for authorization. To receive it, you need to send a token request and transfer base64 encoded api-key and secret-key through the Authorization field. First, you need to connect the TextToBinaryData and BinaryToBase64 functions from the BinaryData module in the dependencies. Then you should encode the “ApiKey: ApiSecretKey” string using TextToBinaryData and transfer the result to BinaryToBase64. Write “Basic” + BinaryToBase64.Base64 in the Authorization header of the REST request for a token. In response, you receive access_token, which can be used for further requests in the Authorization: “Bearer” + access_token.

Outsystems is deservedly among the leaders in the lists:

JazzTeam plans to continue a series of articles that reveal our practical experience in solving business challenges using Outsystems platform.