How to add custom design to your digital workplace with ELMA365 low-code

How to add custom design to your digital workplace with ELMA365 low-code

Contributor: ELMA365 team 
Date: 23.05.2022

For many years companies have been competing  with each other trying to create a unique office environment. The one that has a spirit of the brand and team, encourages collaboration and delivers corporate values. 
When you work remotely or hybrid the digital workplace design becomes a key to your employee engagement and satisfaction. 
It has a positive effect on employees’ mental health, creates a unique working environment for collaboration, and lets your employees interact with the brand. 

In this article I want to show you how you can easily create a custom design workplace using ELMA365 low-code platform. 

Affordable Custom design for small business with no-code 

Custom design is always a privilege. It used to be reasonable only for large companies, but small and medium sized companies also need to think about employees’ engagement and design brand-friendly digital workplaces. 
Nocode has obvious limitations, but there is still a lot of space for creativity. Let’s start with some simple No-code features that don't require any special skills to start. 

Ill 2

Using ELMA365 No-code tools you can easily 

  • Add you company logo
  • Choose icons for apps 
  • Change the background color 
  • Change the colors of the buttons
  • Pick UI color from the standard color scheme 

Using these features you can follow your Brand guidelines and keep your digital workplace updated to your current company identity. 

Ill 1

Flexible forms help to arrange data and increase performance 

User-friendly digital workplace is not only about logos and color schemes. 
Even when you use a pretty-designed solution from some well-known vendor, it doesn’t mean that it’s the best choice for your employees. 

Every company has a unique working environment and collaborates in a very special way. You will be surprised to find out how different the ideal User Interface is, especially when we take into consideration some cultural aspects, company size, team experience and number of years on the market. 

Using advanced mode for flexible form creation you can design interfaces and arrange data the way your team prefers to read it. 

Ill 3
Low-code design tools for middle and large companies 

When the company grows bigger the employees become involved in more complex processes. It means that they have to interact with more teams via the digital workplace interfaces and be involved in more processes. 
To keep the high level of employee engagement the company creates more elaborate design guidelines. 
This is the place where low-code interface design can help. 

What the widget code is 

The Code widget allows you to work with HTML code. For example, you can highlight form elements or display data from ELMA365 and other systems on a page. In addition, with this widget you can add scripts to a form or a page, as well as create dynamic task and app forms.

Ill 4

What you need to know for using widget Code in interface design 

To configure the widget, drag it to the canvas or click +Widget. In the pop-up window you can add HTML code to a form that is dynamically generated using special syntax constructions.

Syntax constructions

In this widget you can use syntax constructions of 3 types:
1. <% Constructions, declarations %>. See the examples below.
2. <%- Escaping of HTML characters %>. For example, if the value is preceded by the "<" sign, it will be represented as "<".
3. <%= Unescaping of HTML characters %>. For example, is the value is "Attention!",  the displayed text will be Attention (in bold).

Let's have a look at the syntax contractions of the first type:


<% if (data.Value > 10) { %>
Content that you want to display.
<% } %>


<% for (const item of data.items) { %>
Content that you want to display.
<% } %>

Declarations (for example, function)

<% function renderValueInTag(value, tag) { %>
<<%= tag %>>
<%- value %>
<% } %>

Code widget in custom form interfaces

By using a script in the Code widget you can customize any table: 

  • arrange form interface including special blocks for pictures, description, titles 
  • color the most important blocks 
  • arrange the table interface: columns, colors, length, checkboxes, links 
  • add special buttons 
  • add custom filters 

Ill 5
There are more places to use Code widget when you customize the starting page of the business application. 

Ill 6

By using a script in the Code widget, you can customize the Page Header Menu in the Customer portal page.

Ill 7

Here you can learn more about using widgets in custom design