Blog

How To Build A No-Code App With UI Builder

by on July 6, 2020

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?”

But Why GIFs - Get the best GIF on GIPHY

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:

  • No-Code Components
  • CRUD Operations
  • Data Binding
  • Codeless Logic
  • Mobile And Web Development

No-Code Components In UI Builder

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.

To-Do List UI Builder Screenshot

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.

CRUD Operations

CRUD (Create, Retrieve, Update, Delete)

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:

  • Create new to-do list items
  • Retrieve items that still need to be completed
  • Update items as they are completed
  • Delete items that are completed or are no longer necessary to complete

Data Binding In UI Builder

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.

Context: the Force that Binds us | Orientalism: The Phantom Menace

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.

Data Binding in Backendless UI Builder

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 "DONE" is true or false, and that determines whether the checkbox is checked (true) or not (false).

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 false to true.

Codeless Logic In UI Builder

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.

To-Do List UI Builder Codeless Logic Full

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!

Develop For Everywhere

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.

Backendless Database is already designed with cross-platform data in mind. Your backend will automatically transform your data into the appropriate form for all different clients (iOS, Android, JavaScript, etc.); again, no code required.

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.

Cross-device UI DevelopmentWhen 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.

Mobile Preview in UI Builder

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.

If you have any questions about UI Builder that aren’t addressed here, leave a comment below or head over to our support forum or Slack channel for answers.

As always, Happy N0-Code Coding!

Leave a Reply