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.
A couple of things are happening here, I tried to explain in the screenshot:
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.
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.
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.
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:
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:
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 It actually took me longer to describe all this than to put it together.
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:
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:
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.
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!
It actually took me longer to describe all this than to put it together.
