Skip to content

Dealing With User Interface Limitations in Low-Code

Technology

Jun 19, 2020 - 7 minute read

Dealing_With_User_Interface_Limitations_in_Low_Code_768x440
Wojciech Machniak Senior UI Developer

Wojciech Machniak an experienced Senior UI Developer at Objectivity, specialised in low-code platforms and solutions. He teaches his co-workers from Rapid Development Guild how to create layouts and write in proper styles. He participates in creating widgets and extensions in low-code platforms and shares his knowledge with others at various conferences and meetups. 

See all Wojciech's posts

2988 HC Digital Transformation 476X381

Share

The start of every project can be challenging and anyone who hasn’t had to deal with low-code platforms before may think that they have limitations in terms of creating dedicated solutions. The same is often thought about creating user interfaces for a client for whom visual identification and branding are key business aspects.

Contrary to what is commonly said, low-code platforms offer several possibilities that enable the creation of eye-catching user interfaces (UI) – all in accordance with the requirements we receive from our customers. As a company, Objectivity has a wide range of qualified specialists in the fields of UI, UX, and graphic design, which enables us to quickly adapt to the requirements placed before us in low-code platforms and to expand them in various ways.

Most of today’s leading platforms such as Mendix or OutSystems are based on dedicated UI frameworks, which help Rapid Application Developers to create user interfaces faster. Each platform offers different solutions and UI elements. Unfortunately, they have some limitations because they are strictly defined and prepared for re-usability. The limitations, however, allow you to build digital solutions quickly, while focusing on product development instead of on creating controls. Unfortunately, sometimes a given UI framework does not offer an out-of-the-box component that solves the problem and meets our needs.

It should be mentioned that in classic software development, the UI Developer prepares HTML code, which contains the application’s structure. In low-code, the approach is completely different, as pages are built using tools provided by the platform which uses the ‘drag & drop’ method. In terms of extensibility, these tools provide the following possibilities: widgets, building blocks, style sheets, and JavaScript customisations.

Widgets

Widgets are one of the most powerful tools that can be used to create dedicated solutions, allowing us to extend the basic functionality of the UI framework. There are predefined widgets which can be downloaded from a store closely related to a given low-code platform. We can also create our extension using traditional programming languages such as Java, C# or JavaScript (depending on the platform) and share them with the whole community by publishing them in a store or on GitHub.

An example of such a widget is the solution we prepared for one of our customers in the UK. Our challenge was to prepare an application that looks completely different depending on which store an employee logs into. These were three completely different layouts with different logos and colours, which had to be changed right after logging in. Built-in low-code platform capabilities didn't allow us to deliver such requirements. To do what was required, we created an extension that adjusts branding right after users log into the application. This widget is available in the store and was presented at a Mendix meet up in London.

Of course, this is just one example – we have several successful widgets in our portfolio, and their number is constantly growing. We try to solve the problems we face, while also helping other developers in their challenges by publishing widgets online.

Building Blocks

Building blocks are elements that can be reused to improve the application development process. They’re an integral part of the UI framework, contain no business logic, and focus mainly on the layout of UI elements and their appearance. Depending on the low-code platform, we can either choose from out-of-the-box building blocks (i.e. popular cards, lists, page headers), or create our own. Prepared building blocks have CSS styles created by the manufacturers of the platform. Using them is very helpful and developers don’t have to focus on the appearance and layout. They can just use them and speed up the whole process of application creation.

Their most significant value lies in the fact that they can be easily exported to another project. At Objectivity, we created a package of our building blocks, which we use in different projects to optimise the time needed to put the controls on the UI. This package is 100% expandable and allows you to add/remove elements as needed.

Using building blocks also helps to prototype new demo applications for potential customers.

Style Sheets

Each time we want to give our application a unique look, ‘cascading style sheets’ (CSS) can help us do so. They’re part of every UI framework and are responsible for the look of the whole application. All components, building blocks, or layouts have their own styles, which are prepared by the developers of a given platform and provide the basic look of UI elements in both desktop and mobile versions of the application. It’s possible to overwrite existing styles (change the default layout) or write your own, which allows us to have a significant impact on the final look of the product.

Some platforms are based on a CSS pre-processor (e.g. SASS) where we can make modifications even faster, for example, by changing the default values assigned to SCSS variables using built-in functions or previously prepared mixins.

In most projects, developers don’t have to focus on writing CSS code. This is the responsibility of UI Developers who write their styles according to the graphic design prepared by the Visual Designers. Knowledge of CSS and frameworks such as Mendix Atlas UI or OutSystems UI allows for quick changes to be made according to our clients' requests.

JavaScript

The last possibility to extend the layout in a low-code platform is to use JavaScript (JS) or jQuery snippets. We can inject JS code into the source of our application. By using JavaScript snippets, we can add an interactive element to static pages.

Nonetheless, using built-in components can work just fine – and, as an added bonus, it facilitates extremely fast development.

Low-code platforms provide graphical user interfaces that help you create business solutions faster using the ‘drag & drop’ method. Thanks to this, only limited programming experience is required, and the need to write code is reduced to a minimum. A low-code developer moves the components and arranges them on the screen, without spending time on writing code or working on the appearance of the application. The collection of out-of-the-box components covers most of customers’ requirements – which is great, as the most important aspect of low-code development is to provide business value in the shortest possible time.

Best Practices

How do we create UI on low-code platforms? First, we listen to our customers and make sure to keep a proper balance between creating applications from out-of-the-box components and bespoke elements. We believe that it’s good practice to use as much as possible of what the platform has to offer, and to look for custom solutions as the next step. With low-code, it’s often crucial to create solutions that won’t take too much time.

Before we start to work on a project, we organise workshops with one of our UX specialists that take place at the client's chosen site. During the workshops, a UX specialist learns about the client's business and their customers’ needs. UX specialists use various tools such as persona, user journey maps, and project-specific market research. Based on the data collected during the workshop, we prepare the first mock-ups, which are then discussed and accepted by the client. It should also be noted that, at the design stage, all the limitations of a given low-code platform are taken into account, and UX specialists adjust the controls on the mock-ups by selecting their equivalents from the UI framework. This step has a huge impact on the speed of application development.

Once all the mock-ups have been accepted, our Visual Designers can start the graphic design process. Based on the final mock-ups, a graphic design is prepared, which is based on the controls from a given low-code platform enhanced with additional user interface elements. If we’re talking about a larger project, the Visual Designers prepare a Style Guide, which is a set of colours, form elements, components, etc., that are collected in one place to be used as a reference. The design process also involves UI Developers who, when necessary, discuss the possibility of creating certain elements for a specific platform.

Finally, the final project is handed over to the UI Developer, who prepares CSS styles and arranges the elements on the layout. Depending on the platform, this may look different. First, CSS (SCSS) variables are changed. In a well-written framework, each component has its variables, where we can adjust things such as the background colour, the rounding of corners, font size, etc. The things we can't change by using the variables, we overwrite by our CSS rules. We build the CSS selectors which have the same specificity as the CSS classes which we get from used components. It’s easier to overwrite them later. We style custom solutions ourselves, remembering about the importance of organising frequent consultations between UX Specialists and Visual Designers. It’s good practice to use global helper classes, which the framework offers.

Building applications with out-of-the-box components is very fast. Customers are often surprised that we’re able to build something that works and has real value in so little time. During the UI design process, it’s important to organise consultations regularly and to recognise the best approach. When creating a custom item, we provide a development time estimation and compare it to that of the out-of-the-box solution.

Summary

Low-code platforms offer many extension possibilities, such as the most popular widgets, style sheets, or re-usable building blocks. In terms of creating UI and writing styles, the whole process is very similar to creating dedicated solutions in other modern applications. However, we need to remember that we don’t write any code – with the exception of the CSS used by UI Developers to create aesthetic layouts. The key to fast low-code UI development is to know the platform you’re using well, to understand how it works, and to not overdo it with bespoke elements.

For more information on how low-code can benefit your organisation, download Objectivity’s latest white paper: „Gain more by doing less”.

2988 HC Digital Transformation 476X381
Wojciech Machniak Senior UI Developer

Wojciech Machniak an experienced Senior UI Developer at Objectivity, specialised in low-code platforms and solutions. He teaches his co-workers from Rapid Development Guild how to create layouts and write in proper styles. He participates in creating widgets and extensions in low-code platforms and shares his knowledge with others at various conferences and meetups. 

See all Wojciech's posts

Related posts

You might be also interested in

Contact

Start your project with Objectivity

CTA Pattern - Contact - Middle