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:
- 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:
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
This is not as complex as it sounds It actually took me longer to describe all this than to put it together.
Hope this helps!