LianjaDev

I'm sure you may have heard the term "Responsive UI" used. This article explains what it is and how Lianja handles a responsive UI in more ways than can be imagined.

Let's look at the functionality built into Lianja to let you build Apps that can run on multiple devices all with possibly different screen resolutions. This is a fundamental feature of LIanja and requires no coding to build Apps with a responsive UI.

The UI of an App can adjust its appearance based on what we call Responsive Breakpoints. These breakpoints can be set to cause UI elements to be shown/hidden depending on the width or height of the screen. Some UI elements (e.g. section menus) auto collapse and expand as screen resolution changes. Think of turning a phone on its side (landscape) or vertical (portrait). Clearly this affects how an App is shown on the screen.

Page layout



Collapsible sections

The use of collapsible sections makes good use of space available in the UI. The user can collapse and expand sections by clicking or touching the secton headers. Checking the "Stretch last section" attribute in the page attributes will cause the last section displayed on a page to automatically stretch into the viewport.



Accordion sections

The use of accordion sections increases the space available to individual sections without sacrificing usability. The user can collapse and expand sections by clicking or touching the secton headers.



Accordion stack

Accordion stacks work in conjunction with the page "Navigation Panel". At any one time the user can select a page and/or section to display from the Navigation Panel. The sections are stacked on top of each other with the selected one being on top. Navigating data affects hidden and well as displayed sections that are related.



TabView sections

TabView sections make good use of screen real estate. The TabBar may optionally be hidden if the sections displayed in each tab are to be shown programatically using Lianja.showDocument().



Section UI Presentation rules



Search Panel responsive UI width breakpoint

If the screen width is less than to the specified value the search panel will be hidden. It the screen width is greater or equal to the specified value it is shown.

Menu responsive UI width breakpoint

If the screen width is less than to the specified value the menu will be collapsed. It the screen width is greater or equal to the specified value it is expanded.

Responsive UI width breakpoint

If the screen width is less than to the specified value the section will be hidden. It the screen width is greater or equal to the specified value it is shown.

Responsive UI height breakpoint

If the screen height is less than to the specified value the section will be hidden. It the screen height is greater or equal to the specified value it is shown.

Responsive UI Form width breakpoint

If the screen width is less than to the specified value the form section is set to this minimum width and a horizontal scrollbar is added. It the screen width is greater or equal to the specified value the scrollbar is hidden. Note that in Tablet/Phone Apps the scrollbar is only visible as you flick the section contents left or right.

Locale language responsive UI

In Web/Mobile Apps the UI can be dynamically translated adding to the responsive capababilities of Lianja Apps. Once selected the language is remembered and will automatically be used the next time an App is run. The language translations are cached in the browser to optimize App load performance.



Page UI Presentation rules



Navigation Panel Responsive UI width

If the window is resized or phones switch between portrait and landscape mode the the Navigation Panel will collapse into just diplaying icons.





App delegates that can be used to handle a Responsive UI



Hint: you can use the built-in screenWidth() and screenHeight() functions in these delegates.

Orientation Changed

You can respond in low-code with a custom delegate that detects changes to device orientation e.g. landscape or portrait. One use would be to only allow editing of data in portrait mode.

Connection State Changed

You can respond in low-code with a custom delegate that detects changes in connection state. One use would be to only allow editing of data when connected.

Inactive

You can respond in low-code with a custom delegate that detects no activity in the UI for a specified period of time. One use would be to log the user out and return to the home page or the App Center.

Data is Responsive too

When a user logs into the App Center, any row filters (RLS) and dynamic data masks (DDM) restrict what the user can see. This is a core feature of Lianja and is included in this article as Apps are responsive to the row filters assigned to individual users.

Permissions and Roles the ultimate controls for a Responsize UI

When a user logs into your server, the Apps that the user has permission to run are displayed in the App Center based on the roles assigned to the authenticated user. When an App is loaded the UI elements are assigned CRUD (Create Read Update Delete) permissions based on the roles of the authenticated user. So, the responsive nature of an App is dynamically affected by the roles of the authenticated user.

Summary

In this article I have provided a brief overview of what modern Responsive UIs are and how Lianja handles these in a simple yet effective manner. If you have any questions don't be afraid to ask.