Why does set_text not work?

[shakamoushie]

In the code below, why is it not possible to set the value of the wch_calc variable to the e.value of the ui.tree widget with on_select=lambda e: wch_calc.set_text(e.value)?

Because wch_calc cannot be set, it is not being processed by the if wch_calc == '' statement.

Any help is appreciated...

Thanks in advance.

from nicegui import ui

wch_calc = ''

def DisplayCalcOverview():
    global wch_calc
    return f"<h1>You chose {wch_calc.upper()}</h1>"

@ui.page('/main_page')
def main_page():
    global wch_calc
    with ui.left_drawer(top_corner=False, bottom_corner=False).style('background-color: #F8EDE3').props('width=260 bordered'):
        with ui.row():
            with ui.column():
                with ui.row():
                    ui.html("<p style='font-size: 24px;'>Calculators:</p>")

                ui.tree([
                            {'id': 'Drug Dose', 'children': [{'id': 'BSA'}]},
                            {'id': 'Oncology', 'children': [{'id': 'Recist S'}, {'id': 'Recist M'}, {'id': 'Recist A'}]},
                            {'id': 'Gastroenterology', 'children': [{'id': 'Mayo Score'}, {'id': 'Harvey Bradshaw'}, {'id': 'SCCAI'}, {'id': 'SESCD'}]},
                        ], label_key='id', on_select=lambda e: wch_calc.set_text(e.value))
                ui.notify(wch_calc)

        if wch_calc == '':
            ui.label('No Calc chosen')
        else:
            htmlstr = DisplayCalcOverview(wch_calc)
            ui.html(htmlstr)

ui.button("Click for Main Page", on_click=lambda: ui.open('main_page'))

ui.run()

[falkoschindler]

wch_calc is a Python string. Therefore it has no set_text method. Unfortunately there seems to be no (sane) way to alter a plain variable within a lambda expression...
But you can define a global set_wch_calc function and register it like this: on_select=lambda e: set_wch_calc(e.value).

[shakamoushie]

Thanks @falkoschindler for the prompt response. I amended the code as further below.

I have a follow-up question. Even though I am able to assign the value (e.value of the ui.tree) to the variable (wch_calc) in the function set_wch_calc, its value is not retained in wch_calc even after ui.update. The statement (after the ui.tree statement) ui.label(f"wch_calc: {wch_calc}") has no value.

from nicegui import ui

wch_calc = ''
def set_wch_calc(vval):
    global wch_calc

    wch_calc = vval
    ui.update

def DisplayCalcOverview():
    global wch_calc
    return f"<h1>You chose {wch_calc.upper()}</h1>"

@ui.page('/main_page')
def main_page():
    global wch_calc

    with ui.left_drawer(top_corner=False, bottom_corner=False).style('background-color: #F8EDE3').props('width=260 bordered'):
        with ui.row():
            with ui.column():
                with ui.row():
                    ui.html("<p style='font-size: 24px;'>Calculators:</p>")

                ui.tree([
                            {'id': 'Drug Dose', 'children': [{'id': 'BSA'}]},
                            {'id': 'Oncology', 'children': [{'id': 'Recist S'}, {'id': 'Recist M'}, {'id': 'Recist A'}]},
                            {'id': 'Gastroenterology', 'children': [{'id': 'Mayo Score'}, {'id': 'Harvey Bradshaw'}, {'id': 'SCCAI'}, {'id': 'SESCD'}]},
                        ], label_key='id', on_select=lambda e: set_wch_calc(e.value))
                
        ui.label(f"wch_calc: {wch_calc}")
        if wch_calc == '':
            ui.label('No Calc chosen')
        else:
            htmlstr = DisplayCalcOverview(wch_calc)
            ui.html(htmlstr)

ui.button("Click for Main Page", on_click=lambda: ui.open('main_page'))
ui.run()

[shakamoushie]

Yes, I got that @falkoschindler, thank you.

I am specifically only referring to the 2nd scenario below.

So, if I understand correctly, if I need to update a database with the value of myvar, it will need to be only from within the Asgn callback, right?

Now, consider this: What if I had multiple widgets on the screen, like one has in any database-related data entry form? This means I would have the widget values only accessible from within each widget's callback function, right? This means I would have to update each widget value into the database independently only when that widget has a callback? Is this the correct understanding?

[falkoschindler]

What if I had multiple widgets on the screen, like one has in any database-related data entry form? This means I would have the widget values only accessible from within each widget's callback function, right? This means I would have to update each widget value into the database independently only when that widget has a callback?

Sorry, I don't understand what you are saying or asking.

[shakamoushie]

Ok, I will rephrase that @falkoschindler,

Referring to the the 2nd scenario above, let's say I have 3 ui.toggle widgets, with variables (myvar1, myvar2 & myvar3) on screen. Each widget will have its own callback (Asgn1, Asgn2 & Asgn3) respectively. All these 3 widget values need to put into a database as part of a single record.

How do I update the database if the values of myvar1, myvar2 and myvar3 are only accessible from within their own callback and not outside it?

If the user enters a value in the 1st ui.toggle (myvar1), program control will go to the Asgn1 callback after entry, where I can access the value of myvar1. I will have to have database update code within Asgn1 to update the database with only the value of myvar1 (as myvar2 & myvar3) are not accessible from within Asgn1.

And then the same thing is applicable when the user enters the value for myvar2 and myvar3?

In programming languages I have gone through, there is a way to control the scope visibility of a variable, so that its values can only be accessed from certain parts of a program. In nicegui, do you have to have a class for accessing multiple variable values at one place?

Do you have a simple program that I can refer to that has 3-4 different types of widgets, that need to go into a database as part of a single record?

Thanks in advance.

[falkoschindler]

How do I update the database if the values of myvar1, myvar2 and myvar3 are only accessible from within their own callback and not outside it?

Since myvar1, myvar2 and myvar3 are global, you can access them from any function:

x = 1.0
y = 2.0

def set_x(value):
    global x, y
    x = value
    ui.notify(f'Writing x = {x}, y = {y} to database')

def set_y(value):
    global x, y
    y = value
    ui.notify(f'Writing x = {x}, y = {y} to database')

ui.number('x', value=x, on_change=lambda e: set_x(e.value))
ui.number('y', value=y, on_change=lambda e: set_y(e.value))

Usually you try to avoid using the global scope too much. It is good practice to move model state into a dedicated class. Besides holding the state it can also contain some convenience methods like set_x and set_y:

class Model:
    def __init__(self, x, y):
        self.x = x
        self.y = y

    def set_x(self, value):
        self.x = value
        ui.notify(f'Writing x = {self.x}, y = {self.y} to database')

    def set_y(self, value):
        self.y = value
        ui.notify(f'Writing x = {self.x}, y = {self.y} to database')

model = Model(1.0, 2.0)

ui.number('x', value=model.x, on_change=lambda e: model.set_x(e.value))
ui.number('y', value=model.y, on_change=lambda e: model.set_y(e.value))

But NiceGUI comes with a simpler method for updating the model: We can bind UI elements to model attributes, so we don't need those setters. Now the on_change event is only used for writing the model to the database:

class Model:
    def __init__(self, x, y):
        self.x = x
        self.y = y

model = Model(1.0, 2.0)

def write_to_database():
    ui.notify(f'Writing x = {model.x}, y = {model.y} to database')

ui.number('x', value=model.x, on_change=write_to_database).bind_value_to(model, 'x')
ui.number('y', value=model.y, on_change=write_to_database).bind_value_to(model, 'y')

And once we are here, we can make use of Python's dataclasses that are designed as pure data containers and shorten the code once more:

from dataclasses import dataclass

@dataclass
class Model:
    x: float
    y: float

model = Model(1.0, 2.0)

def write_to_database():
    ui.notify(f'Writing x = {model.x}, y = {model.y} to database')

ui.number('x', value=model.x, on_change=write_to_database).bind_value_to(model, 'x')
ui.number('y', value=model.y, on_change=write_to_database).bind_value_to(model, 'y')

[shakamoushie]

Hi @falkoschindler, this is precisely what I wanted to know. Thank you so much. You are the best. Sorry for troubling you so much.

God bless :-)