In the first of our series of articles about the brand-new UI Builder, we demo the creation of a no-code To-Do app in Backendless.
The Backendless UI Builder is one of our favorite new features in Version 6. UI Builder is a no-code, drag-and-drop interface for building the frontend of your app. Whether your app is mobile, web, or both, you can design for all platforms.
In this demo, CEO Mark Piller is going to build a To-Do list app without coding using Backendless for both the frontend and the backend. You may be asking yourself, “Another To-Do app?”
We chose to do a To-Do app because it can easily showcase all four CRUD operations: create, retrieve, update, and delete. These operations are the four basic functions required for a client application to interact with a database – in this case, Backendless Database.
As we discuss more below, the synergy between frontend and backend is what sets us apart from other visual app development platforms (VADPs). We want to make it as easy as possible to enable your app to work with your database.
In the above video, Mark will walk you through much of the functionality of UI Builder, such as:
Components are the building blocks of your application’s client-side: they are the various elements that make up the user interface for your app.
Components include items like text boxes, list containers, checkboxes, buttons, forms, and much more. This video showcases some simple use cases for a number of common components.
UI Builder lets you highly customize every component without code. Thanks to our no-code approach to the platform, changing things like component size, color, position, font, etc. is super easy.
We won’t get into every single component in this video as there are quite a few for you to choose from. Many, however, have their own “about” video that can be found with Backendless Navigator or on this playlist on our YouTube channel.
As mentioned above, one of the biggest differences between Backendless and other VADPs is how tightly integrated your frontend and backend are with Backendless.
Our goal with your backend is to offer you virtually unlimited functionality while making it so simple to start that anyone can do it. We want to make it possible for even beginning developers with simple apps to be able to easily build interactions with their database.
Thus, we have made accessing the CRUD operations extremely easy and intuitive.
In the video, Mark makes sure to cover each element of CRUD, showing how a simple To-Do app still needs all four operations to function:
Data binding is a complicated-sounding concept that is both simple yet critical to Backendless apps. Data binding is “the Force” that empowers your UI to impact, and be impacted by, your data.
So what actually is data binding? Data binding is when we map properties from a data object to a UI element. Thus, that element is modified in some way (appearance, behavior) based on the state of a particular property. That state can be changed on the frontend by user actions or on the backend within the database itself.
Below is an example of how to set data binding in UI Builder. In the Logic tab of the component (in this case, an Input box), you will have the option to name the data object that the input box is bound to.
For example, let’s say we have a checkbox component. We want to bind that component to the
"DONE" property of the to-do list data object. Thus, when the data is received, it communicates to the component whether
false, and that determines whether the checkbox is checked (
true) or not (
This data property can be changed by the user’s actions. So in the above example, if the user “checks” an unchecked checkbox, the data property bound to that element (
"DONE") would switch from
If there was one thing at the front of mind when we were designing Version 6, it was “how can we make this codeless?” UI Builder is designed to be completely codeless (although you can add your own code if you want to!), including the logic.
Not all logic needs to be handled by the backend. There are many instances where you want the user’s actions – where they click, where they scroll, data they enter, etc. – to dictate what your app does. However, you don’t want to have to send an API call to the backend for every little action.
UI Builder is designed so that all components can have their own individual logic. Not only that, but the logic can all be built using our Codeless feature, no code required.
The above example from the video shows how to implement the deletion of a “to-do” item in the database and in the UI. With the Codeless logic shown, we have set up the button so that “On Click”, an API call will be sent to the backend to delete
"Row1 data" from the
"Task" table. Additionally, the function will remove the deleted item from the UI by modifying the Dynamic List.
Let’s look at another example. Perhaps you want a button in your app to navigate to another page, but that page is dependent on the user’s profile preferences. It would not make sense to put this simple logic on the backend (although you could if you wanted). Instead, we can tie this logic to the button in UI Builder. Piece of cake!
UI Builder was built with all three of the major device types in mind: phone, tablet, and PC/laptop (web). UI Builder lets you easily switch between views. That way, you can ensure that your application looks just as slick on a user’s computer as it does on their phone.
As you develop, you will of course want to test across different platforms. UI Builder’s preview mode makes it easy to test your app in your laptop’s browser while also being super easy to see what it looks like on any phone or tablet.
When you choose to preview for mobile, you will be presented with a QR code. Simply scan this code with the device you want to test with to view the app in your phone’s web browser.
It’s never fun to spend hours tweaking your mobile UI only to discover you broke your desktop UI in the process. Backendless makes it easy to switch between device layouts. That way, you can always be sure you’re changing the right element for the right device.
This video and article merely scratch the surface of what UI Builder can do. You can find many more videos on UI Builder on our YouTube channel and much more content is coming to our website soon.
As always, Happy N0-Code Coding!