The Backendless UI builder offers a visual way of building an app user interface. In the UI builder, you can create the screens of your app with drag and drop. Also, you can use data pages to build screens and code pages to define logic and components to create custom widgets.
With Backendless UI builder, it is possible to build the entire app without writing a single line of code in most cases.
You can use code pages to write code and data pages to create screens, but you can also use the UI builder to create the screens for your app and let Backendless do all of the heavy lifting.
If you prefer coding over drag-and-drop tools, you are free to create data tables on code pages or build logic steps via blocks in them.
However, with most apps, many repetitive tasks can be automated using ready-made functions and features found on data pages, e.g. search.
What are the Concepts of the Backendless UI Builder?
In the Backendless mobile backend you’ll find a few core concepts. These include;
- Pages,
- Screens
- Components.
Page is a container for components. It’s like an area of your application that contains several components or even another page.
The screen is a page with multiple pages inside it. Pages can have zero or more screens. It’s like an area of your application containing several areas of your application in it.
A component is what makes up the content on each screen and could be code or data-based. A code-based component has access to all the native functions of Backendless services.
Of course, the same way you would use them when building mobile applications using Backendless SDKs.
At the same time, data-based components are based on data tables from which they can be configured to receive real-time updates as new records get saved into those tables via backendless services. Each page represents a single screen.
How Many Screens Can There Be Per Page?
A page can contain up to five screens. For example, if you have an app with five different pages such as home, about us, contact us etc., each page will only have one screen associated with it.
There are two types of pages in the Backendless UI builder. These include data and code.
Data pages are great for form-based screens, while code pages are better suited for programmable screens. Data pages can’t be customized with JavaScript or TypeScript code, but code pages can.
Data pages allow you to build screens based on data from your app’s data tables. They can also be used for form-based screens such as login and registration forms, password recovery screens, etc.
You Don’t Need to Know How to Code to Use Backendless UI Builder
A backendless application is a hybrid of mobile and web applications. It enables you to quickly build, deploy and update your app using both web technologies for the frontend and Backendless UI Builder for the backend. With Backendless UI Builder, you can:
- Create screens with data pages and code pages
- Navigate between screens using navigation components such as buttons
- Add custom components to your screen
Key Takeaway
A UI Builder page consists of multiple components where each component represents an HTML element and its properties. These HTML elements are defined using special markup syntax specific to each component type.
