Demo: How to create a code to do app with UI Builder

  • Home / Web Development / Demo: How to…

Demo: How to create a code to do app with UI Builder

With the help of “CodeCode” tools, anyone can build a faster mobile or web app than ever before. In this step-by-step demo of BackSendless UI Builder, we walk you through creating a completely codeless to do app.

Backupless UI Builder 6 version is one of our favorite features. UI Builder is a 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 the video demo, we guide you to create a “to do list” app without coding using backsendless for both frontend and backend. You may be asking yourself, “Another app.”

We chose the One-to-App because it can easily display all four CRUD operations: Create, Recover, Update, and Delete. These actions are the four basic functions required for a client’s application to interact with the database.

As we discuss further below, the synergy between the front end and the back end is what sets us apart from other visual app development platforms (VADPs). We want to make it as easy as possible for your app to work with your database.

In the video above, Mark will walk you through most of the functionality of the 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 basic blocks of your application’s client side: they are the various elements that make up your app’s user interface. Ingredients include items such as text boxes, list containers, checkboxes, buttons, forms and more. This video demonstrates some simple uses for a number of common components.

List UI Builder screenshot

UI Builder lets you customize every component without code. Thanks to our nuncode approach to the platform, it’s very easy to change things like component size, color, position, font, etc.

We will not cover every single component in this video as there are quite a few to choose from.

CRUD operations

CRUD (create, retrieve, update, delete)As mentioned above, one of the biggest differences between backups and other VADPs is how tightly connected your frontend and backend are. With your backend, our goal is to offer you virtually unlimited functionality while making it easy for anyone to get started.

We also want to enable developers with simple apps to easily interact with their databases. In this way, we’ve made access to CRUD operations much easier and more intuitive.

In the video, Mark makes sure to cover every element of CRUD, showing how a simple app still needs all four operations to do:

  • to create New items in the to-do list
  • Recovery Items that still need to be completed
  • update As objects they are completing
  • Delete Items that have been completed or are no longer required to be completed

Data binding in UI Builder

Data binding is a complex sounding concept that is easy for both backupless apps. It is the “force” that gives your UI the power to influence and influence your data.

Context: The force that binds us  Orientalism: The Danger of the PhantomSo what did you actually do? Is Data binding? Data binding occurs when we map features from a data object to a UI element. Therefore, this element is changed in some way (appearance, behavior) based on the condition of a particular property. This state can be changed to backend through user actions or in the database itself.

Below is an example of how to configure data binding in UI Builder. In the Component Logic tab (in this case, an input box), you will have the option to name the data object to which the input box is bound. Data Binding in Backupless UI Builder

For example, let’s say we have a checkbox element. We want to link this component "DONE" List Data Object Properties. Thus, when data is received, it speaks to the component "DONE" Is true Or false. This determines if the checkbox is checked (true) Or not (false).

This data property can be changed by user actions. Therefore, in the above example, if the user “checks” the unchecked checkbox, the data property bound to that element ("DONE"Will switch from false To do true.

Codeless logic in UI Builder

If we were designing version 6, if there was one thing in mind, it was “How can we make this codeless?” UI Builder is designed to be fully coded, including logic. If you wish, you can add your own code.

Not all logic needs to be handled by the backend. There are many instances where you want user actions – where they click, where they scroll, the data they enter, and so on. To tell you what your app does.

However, you do not want to send an API call to the backend for every small action. The UI builder is designed so that all components have their own individual logic. Not only this, logic can be built using our codeless feature, no code is required.

List UI Builder is full of codeless logic

The video example above shows how to delete a “do” item in the database and UI. With codeless logic displayed, we’ve set the button so that on “On Click”, an API call will be sent to delete in the background. "Row1 data" From "Task" Table. Additionally, this function will remove items from the UI by editing the dynamic list.

Let’s look at another example. You may want a button in your app to go to another page, but that page depends on the user’s profile preferences. It doesn’t make sense to put this simple logic in the background (even if you want to). Instead, we can tie this logic to a button in the UI Builder. Very easy!

Development for everywhere

The UI Builder was built with three main device types in mind: phone, tablet, and PC / laptop (web). UI Builder lets you easily switch between views. That way, you can be sure that your application looks as active on a user’s computer as it does on their phone.

Backup-less databases have already been developed with cross-platform data in mind. Your backend will automatically convert your data to the appropriate format for all different clients (iOS, Android, JavaScript, etc.). Again, no code required.

As you prepare, you will definitely want to test different platforms. The UI Builder’s preview mode makes it easy to test your app in your laptop browser while also making it very easy to see what it looks like on any phone or tablet.

Cross device UI developmentWhen you select Mobile Preview, you will be presented with a QR code. To view the app in your phone’s web browser, scan this code from the device you want to test.

Mobile preview in UI Builder

These videos and articles only scratch the surface of what a UI builder can do. If you have any unanswered questions about UI Builder, please leave a comment. As always, congratulations N0-Code Coding!


Write a Comment

Your email address will not be published. Required fields are marked *