Bind element contents to database updates

[daniellivingston]

Question

Hi, I am using SQLAlchemy with an SQLite backend. I want to be able to update the contents of an element, like a ui.label's text, under certain database updates.

For example, say you have a page like this:

|          Edit User         |
| -------------------------- |
|  Hello, Joe                | <-- ui.label showing ${name}
| -------------------------- |
|  Name: _Joe____            | <-- ui.input with name
| -------------------------- |

Normally, you might use something like on_change or bind_value to link the ui.label with the ui.input.

In my case,

1. The ui.input would update the "name" column of the "profile" SQLite database on row X
2. ?????
3. The ui.label's text is updated automatically from the correct row / column of the SQLite "profile" database

What can I do to solve (2)?

[frankvp11]

If you don't mind me asking, how are you updating the database with the input function?
If you have a function that does the updating logic, surely you can write a wrapper that takes that function as an argument, along with perhaps the labels as argument, and then updates it there?
Here's a simple example with SQLmodel that I quickly 'cooked up':

from nicegui import ui, app
from sqlmodel import Session
from models.main import engine, User


class MainPage:
    def __init__(self, session):
        self.session = session
        self.user = self.session.query(User).first()
        self.render()

    def render(self):
        self.label = ui.label("Hello user! " + self.user.name)
        #when the user presses enter, we want to change the username
        self.inputter = ui.input("Enter your (new) name").on("keydown.enter", self.change_username)

    def change_username(self, event):
        # update the model 
        self.user.name = self.inputter.value
        # update the database
        self.session.commit()
        self.label.text = "Hello user! " + self.inputter.value
        self.label.update()

@ui.page("/")
def index():
    # get the first user in the database
    with Session(engine) as session:
        MainPage(session)


ui.run(port=8080, host="0.0.0.0")

You'll need to modify it to your use-case. Let me know if you have an MRE you could give, or if you need more help from there

[daniellivingston]

Thanks for the response and your example.

To be more specific about what I'm doing, I'm writing a chat application with NiceGUI. You can imagine a layout similar to this: https://quasar.dev/layout/gallery/whatsapp

The main frame of the application is the left sidebar conversation list. A router (based off the SPA example) changes the main content view, i.e. the specific conversation and messages rendered, when a conversation is selected.

When a message is sent or received, it is saved to the database and added to the conversation view with a ui.chat_message.

The core problem I'm trying to solve is to update the last sent message in the conversation list with the last message sent or received:

However, due to the architecture of this app, the main application frame (conversation list sidebar) and conversation view are in totally different classes. Let's call it MainWindowView for the conversation list and ConversationView for the specific conversation messages.

So I have a need to "notify" MainWindowView that a database update has occurred once a message has been sent or received in the ConversationView.

[frankvp11]

One idea that is stuck in my head right now is that you use a SQL trigger to update the app.storage.user , which you can bind to the label?
Let me know if that helps you.

[daniellivingston]

Hmm, I'm not currently using any app.storage (intended to be a single-user application with all data stored in an SQLite database & a YAML config file), but maybe I should be?

Regardless, when the conversation list loads, it's creating a ui.label from the last message for every conversation in the conversation SQL table.

I suppose I could refactor this logic so that the conversation list has its data populated from app.storage, instead of directly through database reads. There's an extra layer of indirection there that I don't love, but it could definitely unblock me

[frankvp11]

Yeah, that definitely wouldn't be ideal I could imagine.
Is there a chance that you could provide a MRE? It would help me to help you a lot.
Given that you want things to run from the SQL database, and assuming multiple users are going to be writing to this database, I can't imagine you can escape using a SQL trigger. From there, you just need to define the correct update functions in both classes, which should be straightforward enough.
Besides that, I'm not too sure on how to help, sorry

[daniellivingston]

Sure thing, thanks. Appreciate your help. I'll get back to you with an MRE in the next day or two.