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.

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:

Conditions

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

Loops

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