JazzTeam Experience in Using OutSystems

    Introduction

    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.

    OutSystems benefits

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

    • Maximum development speed. Visual programming allows creating fully-functional applications very quickly and then sending them to the server with a single click.
    • Integration with everything. OutSystems makes it possible to effectively integrate applications with any environment. The platform generates all methods and data structures for the integration with SOAP and REST services and SAP systems. Initially, there is connection with the following main database systems: SQL Server, SQL Azure, Oracle, MySQL, and DB2 iSeries. Connectors for the most popular cloud, storage services and social networks are available in OutSystems Forge.
    • Great UI/UX by default. A large number of beautiful and ready-to-use interface templates, excellent performance, and a feature-rich drag-and-drop editor.
    • Unlimited code. It is possible to extend both the front-end and the back-end of an application with your own code.
    • Excellent vertical and horizontal scalability. You can add supplementary processing power and interface servers to any production environment with no difficulties. It helps achieve high availability when user load, business logic complexity, batch processing amount or the number of transactions increase.

    JazzTeam practical experience in using OutSystems 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.

    Computer club management system

    The system includes the following:

    • Desktop application for Windows (installed on client machines; a web application for the club administrator; a set of web services for data synchronization and exchange between client machines and servers. Among unconventional technical problems solved during the development of this system you can single out, for example, “dead” user sessions closing, organizing network connections via the websocket protocol.
    • Mobile application of the computer club administrator. Powerful capabilities of the OutSystems platform were used for the rapid development of mobile applications during the design. As a result, the full cycle of development took significantly less time under conditions of guaranteed code quality. At the same time the UI meets modern trends in the world of mobile applications.

    Web application for financial transactions audit

    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.

    Training

    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.

    Interesting experience

    WebSocket connection creation

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

    setInterval() JS function inside the table field

    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);

    Time Zones

    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:

    "<script>
    $(document).ready(function() {
      if(Intl.DateTimeFormat().resolvedOptions().timeZone != undefined)
      {
        $('#" + TzInput.Id +
          "').val(Intl.DateTimeFormat().resolvedOptions().timeZone);
        $('#" + IanaBtn.Id + "').click();
      } else {
        $('#" + TzInput.Id + "').val(new Date().getTimezoneOffset());
        $('#" + OffsetBtn.Id + "').click();
      }
    });
    </script>"

    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.

    Email validation

    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

    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.

    jQuery plugins

    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.

    Authorization in REST requests

    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.

    Conclusion

    Outsystems is deservedly among the leaders in the lists:

    • “The Forrester Wave™: Low-Code Development Platforms For AD&D Pros, Q1 2019”
    • “Gartner Magic Quadrant for MXDP (Multiexperience Development Platforms)”

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

    Example of the Preparation action performed before web block drawing
    Example of working with C#, an extension for email data type validation

    Used links

    1. https://www.outsystems.com/
    2. https://itnext.io/push-outsystems-to-the-limit-797a0af2033b
    3. https://en.wikipedia.org/wiki/Low-code_development_platform
    4. https://www.highcharts.com/
    5. https://www.outsystems.com/forge/component-overview/500/time-zone