Real-time for Codeless (to-do app example)

Just learning Backendless. Very cool stuff!

I haven’t found a whole lot of info for using the real-time API in codeless/UI builder.

Would it be possible to provide actual codeless example for a real-time client update of the To-Do app shown in the example video here? For instance, to display update to “done” or “name” in client if updated in backend just as an example.

I grasp the To-Do app, and I have seen this thread which pointed me in the right direction, but I’m wondering if a working codeless example could be whipped up to get me over the hump.


Hi Rover,

Here’s an example I put together. Open it in two separate browsers and start typing up entries in the input field - pressing Enter saves it in the database:

The implementation details are below:
My database table:

Page Enter event:

A couple of things are happening here, I tried to explain in the screenshot:

  1. We create an empty list and put into Page Data, the list will be a data model for a collection of text entries you will be sending in via the input field.
  2. Then we register a real-time listener for the create event in the SillyEntry database table. The listener will be receiving a real-time event from the database when a new object is created.
  3. In the listener block (inside of the green connector above), we get the list of the entries from Page Data and add the text we got from the real-time event. Important: notice the object variable, it is the object added to the database. From that object we get the name property, since this is where the entered text is stored - see the name column in the database table screenshot above.
  4. Once the text entry is added to the list, we put the list pack into Page Data and the data binding wil trigger an update for the UI component that lists our entries.

The Input component has the following logic for the On Key Down event:

In here we check if the key code is 13 which corresponds to the Enter button on the keyboard. When Enter is pressed, we save an object in the SillyEntry database table and clear out the input field. Saving the object in the database will trigger a real-time event in all browsers that render our page.

A list of entries is stored in a Block component that has Dynamic List Behavior enabled:

The Block has a data binding for Dynamic List Items:

If you scroll up, you will see that we’re updating that property (listOfEntries) in our real-time listener. The property contains a list of text entries.

There is a Text component inside of the Block described above with some codeless logic:

The codeless logic for the Text component is as simple as this:

You might ask what the logic in that last screenshot means. Keep in mind that the listOfEntries contains a collection of text elements. When data binding is triggered, UI Builder will iterate over that collection and replicate the Text element inside of our block for each item in the collection. The logic above returns an item from that collection to render in the Text element.

This is not as complex as it sounds :wink: It actually took me longer to describe all this than to put it together.

Hope this helps!


Perfect, that’s just what I was looking for! I recreated that and will have to delve in further tomorrow to really get a firm understanding of it.

My recreation is writing to the table, but “name” is being sent as null for some reason. I must be overlooking something super-simple (it’s late!).

Thanks again!

It is actually my oversight, I left out an important detail. The Input component needs to have a data binding for the value typed in. Select the component and click the puzzle/logic icon:

Type in text in the Value logic field:

What this does is it binds the value that is typed into the input field to the text property in Page Data. That value is used then in the On Key Down event:


Perfect, that did the trick. That gives me a lot of excellent information to digest. Very, very helpful and exactly what I was looking for!

1 Like

Thanks again for this - makes complete sense. One thing I haven’t quite grasped yet: what if I wanted to add rows to a container in realtime? Everything I’ve tried hasn’t worked (the above example is using a block instead).

For instance, I’d like to display the first X number of entries, then add new entries above those as they are created.

A simple example would be if I had a Contacts table with Name, Email, Phone columns and wanted to display each new entry as it was created in the db.

Hope that makes sense.

This means you would need to preload data and put that data into the same data model that is used in real time processing.

Have you tried that approach?


Yep, but didn’t have luck. I’ll play around with it again in the next few days, and if I don’t get it I’ll post a screengrab of my logic and perhaps you can point me in the right direction. Doing some tutorials/etc. in the meantime just to cut down on the learning curve. Thanks!