How to add javascript function and get it reusable inside props?

[siwikm]

Question

I want to add custom function getBadgeColor and use is as prop inside custom_badge_age_slot.

Tried with add_static_files, adding it as <script> inside prop and nothing works as expected.

This is my minimal example

from nicegui import ui

columns = [
    {'name': 'age', 'label': 'Age', 'field': 'age',},
    {'name': 'age2', 'label': 'Age2', 'field': 'age2'},
]

# Sample data, structure based on the image
data = [
    {"age": 5, "age2": 5},
    {"age": 20, "age2": 20},
    {"age": 15, "age2": 15},
    {"age": 25, "age2": 25},
    {"age": 25, "age2": 25},
    {"age": 35, "age2": 35}
]


def custom_badge_age_slot():
    return '''
    <q-td key="age" :props="props">
        <q-badge :color="getBadgeColor(props.value)">
            {{ props.value }}
        </q-badge>
    </q-td>
    '''

def plain_badge_age_slot():
    return '''
    <q-td key="age2" :props="props">
        <q-badge :color="props.value < 21 ? 'red' : 'green'">
            {{ props.value }}
        </q-badge>
    </q-td>
    '''

java_script_func = '''
function getBadgeColor(value) {
    if (value < 20) {
        return 'red';
    } else if (value < 30) {
        return 'yellow';
    } else {
        return 'green';
    }
}
'''

with ui.table(columns=columns,
         column_defaults={
        'align': 'center',
        'headerClasses': 'text-primary',
         },
         rows=data,
         pagination={'rowsPerPage': 10}
         ) as table:
    table.add_slot('body-cell-age', custom_badge_age_slot())
    table.add_slot('body-cell-age2', plain_badge_age_slot())


ui.run(port=7771)

[falkoschindler]

Hi @msiwik-epruf, that's a very good question. I thought it should be possible to define the function within the globally accessible window object or some other Vue trickery, but nothing I tried seems to work. Does anyone else have an idea?

[ed2050]

What errors are you getting and what do you expect to see?

Slightly different, but I use ui.add_head_html to load a js file with functions. Then I call it from a table like below.

Your func custom_badge_age_slot generates the DOM nodes text directly, whereas ui.table generates them for me. But perhaps comparing the output created by ui.table to your output could show where things are going wrong? Look at the rendered DOM in page inspector and see what's different.

    columns = [
        {
            'name'  : 'File' ,
            'label' : 'File' ,
            'field' : 'filename' ,
            'align' : 'left' ,
        } ,
        {
            'name'  : 'size' ,
            'label' : 'Size' ,
            'field' : 'size' ,
        } ,
        {
            'name'  : 'mtime' ,
            'label' : 'Mod time' ,
            'field' : 'dl' ,
            'align' : 'left' ,
            ':format' : 'value => window.fmt_time_js (value, false)' ,
        } ,
    ]
    table = ui.table (columns = columns, rows = filedata)

[siwikm]

@ed2050 Can you show full working example?

[ed2050]

It's pretty simple. I load js from an external file, but for simplicity here's inline version.

These days I would skip tables and slots and js nonsense. Instead I'd write a brython script that scans the page for table cells of appropriate class and converts the values. Since nicegui doesn't know or care how the mtime field is actually displayed.

import random
import string
import json

import nicegui
from nicegui import ui

# ---

js = '''
function fmt_time_js (stamp, showtime = true) {

    fmtr = new Intl.DateTimeFormat ('en-US') ;
    console.log ('fmt stamp : ' + stamp) ;

    let val = stamp;
    try {
        const dobj = new Date (stamp * 1000);
        const options = {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: 'numeric',
            minute: 'numeric'
        } ;

        val = dobj.toLocaleString ('en-US', options);   // Nov 1, 2023, 3:42 PM
        console.log ('fmt val : ' + val) ;
        parts = val.split (', ') ;

        val = `${parts[1]} ${parts[0]}`   // 2023 Nov 01
        if (showtime) {
            val += ` . ${parts[2]}`   // 3:42 PM
        }

    } catch (error) {
        console.warn(`error with stamp: ${stamp}: ${typeof stamp}`);
        console.warn(error);
    }

    return val;
}
'''

# ---

@ui.page ('/')
def mainpage () :

    ui.add_head_html (f'<script type="text/javascript"> { js } </script>')

    # make random data
    data = [
        {
            'file' : ''.join (random.choices (string.ascii_lowercase, k = 10)) ,
            'size'  : random.randint (1000, 10 * 1000) ,
            'mtime' : random.randint (14e8 , 17e8) ,  # timestamp in seconds
        }
        for x in range (50)
    ]

    # setup columns
    fields = [ 'file', 'size', 'mtime' ]
    cols   = []
    for field in fields :
        cols.append ({'name' : field , 'label' : field.title () , 'field' : field , 'align' : 'left'})

    cols [-1] [':format'] = 'value => window.fmt_time_js (value, false)'

    # show table
    print (f'{ data [0] = }')
    print ('cols = ' + json.dumps (cols, indent = '\t'))

    table = ui.table (
        columns = cols ,
        rows    = data ,
        pagination = { 'rowsPerPage' : 20 } ,
    )

# ---

if __name__ in {'__main__', '__mp_main__'} :
    ui.run (dark = True)

[gsal1000]

@msiwik-epruf & @falkoschindler , while I wasn't trying to use a javascript function from inside a slot, I was trying to bind a custom event to a table using .on(...) which would run a python function; and then have that event emitted when a button in the additional slot was clicked. The problem was I couldn't use the emitEvent javascript function as suggested in the nicegui docs because apparently there's no access to the global scope in Vue templates - see explanation here: https://stackoverflow.com/questions/54055097/use-global-variable-in-vue-template

So, my workaround was to use the Vue $emit() method to send the event to the table as in the following:

<q-btn size="sm" color="accent" round dense
    @click="() => $parent.$emit('edit_button_clicked', props.row.id)"
    :icon="'edit'" />

Not exactly the same problem, but I think similar underlying cause (i.e. no access to the global scope from Vue).

Here's the full working source for how I worked around the issue (well parts relevant to the discussion anyway). It is essentially using the "Table with expandable rows" example from the nicegui docs https://nicegui.io/documentation/table#table_with_expandable_rows :

def display_table(data: List[Dict],
                  columns: List[Dict],
                  visible_columns: List[str],
                  sort_column: str,
                  display_name: str,
                  container) -> None:

    def handle_edit_button_clicked(event: events.GenericEventArguments) -> None:
        global main_content
        global right_drawer
        color = 'lightgrey' if event.args else 'white'
        main_content.style(f"color: {color}; background-color: {color}")
        rowid = event.args
        logger.info(f"Edit button clicked for row: {rowid}")
        ui.notify(f"Edit button clicked for row: (ID: {rowid})")

    container.clear()
    with container:
        row_key = next(iter(data[0]))
        table = ui.table(columns=columns,
                         rows=data,
                         row_key=row_key,
                         pagination={'rowsPerPage': 15, 'sortBy': sort_column, 'page': 1}
                ).props(f'title="{display_name}" dense visible-columns="{visible_columns}"')
        table.classes('w-full overflow-x-auto sticky-header-table').mark('main_data_table')
        table.add_slot('header', r'''
            <q-tr :props="props">
                <q-th auto-width />
                <q-th auto-width />
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.label }}
                </q-th>
            </q-tr>
        ''')
        table.add_slot('body', r'''
            <q-tr :props="props">
                <q-td auto-width>
                    <q-btn size="sm" color="accent" round dense
                        @click="() => $parent.$emit('edit_button_clicked', props.row.id)"
                        :icon="'edit'" />
                </q-td>
                <q-td auto-width>
                    <q-btn size="sm" color="accent" round dense
                        @click="props.expand = !props.expand"
                        :icon="props.expand ? 'remove' : 'add'" />
                </q-td>
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.value }}
                </q-td>
            </q-tr>
            <q-tr v-show="props.expand" :props="props">
                <q-td colspan="100%">
                    <div class="text-left">Editing '{{ props.row.name }}' (ID={{ props.row.id }}).</div>
                </q-td>
            </q-tr>
        ''')
        table.on('edit_button_clicked', handle_edit_button_clicked)

        search = ui.input('Search').bind_value(table, 'filter')
        search.move(target_index=0)

Perhaps you could bind a handler using the js_handler argument. How you would update the value of the :color attribute though, I'm not sure of as javascript isn't my strong suite.

[ed2050]

@msiwik-epruf going back to original post - what are you actually trying to accomplish? You describe the technique you want - use custom function in a prop blah blah blah - without saying why.

What behavior do you want your app to perform? eg "When user clicks this button, I want to change color of their name" or whatever. Instead of starting with a solution, describe the problem. Then maybe we can suggest a better approach than slots and js.

@gsal1000 same question. I'd like to propose an alternative for your use case - even though you already found a solution, it may help others compare a different approach. But I don't know what you're trying to accomplish with all those slots and Vue code stuff. What behavior do you want?

[gsal1000]

Fairly simple what I'm after. Which is an "edit" button in each row of data in the table. On being pressed, the value of a hidden id column for that row needs to be passed to a function that will pull in all the data details for that row from the data store; then show a ui.right_drawer containing all the details of the row data in various ui.input etc. elements for editing. All the editing functionality is already in place using 'native' nicegui elements and python code; only thing using slots and Vue are the buttons.

Even for simply viewing the row data, I like the idea of the +/- button as well for an expandable row that can display all the row data (including image and/or video data). The database tables can be data dense which usually won't fit in the width of the table (without having to scroll - i.e. only a subset is displayed in the main table). So, my intent is to keep that as well.

@ed2050 , I'm all for not having to use slots and Vue (one reason I picked NiceGUI for this project to begin with), if you can suggest a better alternative.

[ed2050]

@gsal1000, @falkoschindler

I posted my solution to editable table rows here: #4402
Interested to hear your thoughts.

Expandable rows can be addressed in similar way, though I haven't done so yet.
Best,

[ZiyadBastaili]

Hello @siwikm @falkoschindler.
I managed to solve this thanks to the Vue.js docs: app.config.globalProperties.

The trick is to define your helper as a global property on the app instance. Example:

app.config.globalProperties.getBadgeColor = function getBadgeColor(value) {
        if (value < 20) {
            return 'red';
        } else if (value < 30) {
            return 'yellow';
        } else {
            return 'green';
        }
    }

Or

app.config.globalProperties.getBadgeColor = (value) => {
        if (value < 20) return 'red'
        if (value < 30) return 'yellow'
        return 'green'
    }

Note: You can call the global function as either this.getBadgeColor(props.value) or just getBadgeColor(props.value).
Both will work inside your slot templates.

Here’s a complete example:

from nicegui import ui

@ui.page('/')
async def test_page():
    await ui.context.client.connected()
    columns = [
        {'name': 'age', 'label': 'Age', 'field': 'age', },
        {'name': 'age2', 'label': 'Age2', 'field': 'age2'},
    ]
    data = [
        {"age": 5, "age2": 5},
        {"age": 20, "age2": 20},
        {"age": 15, "age2": 15},
        {"age": 25, "age2": 25},
        {"age": 25, "age2": 25},
        {"age": 35, "age2": 35}
    ]

    def custom_badge_age_slot():
        return '''
                <q-td key="age" :props="props">
                    <q-badge :color="getBadgeColor(props.value)">
                        {{ props.value }}
                    </q-badge>
                </q-td>
                '''

    def plain_badge_age_slot():
        return '''
                <q-td key="age2" :props="props">
                    <q-badge :color="props.value < 21 ? 'red' : 'green'">
                        {{ props.value }}
                    </q-badge>
                </q-td>
                '''

    js = '''
        app.config.globalProperties.getBadgeColor = (value) => {
          if (value < 20) return 'red'
          if (value < 30) return 'yellow'
          return 'green'
        }
    '''
    await ui.run_javascript(js)
    with ui.table(columns=columns, column_defaults={'align': 'center', 'headerClasses': 'text-primary'},
                  rows=data, pagination={'rowsPerPage': 10}) as table:
        table.add_slot('body-cell-age', custom_badge_age_slot())
        table.add_slot('body-cell-age2', plain_badge_age_slot())


ui.run(port=7071)

Preview:

[ZiyadBastaili]

@falkoschindler

[falkoschindler]

Nice! Thanks for the update!

Here is a minimum example:

@ui.page('/')
async def page():
    await ui.context.client.connected()
    ui.run_javascript('app.config.globalProperties.getBadgeColor = (value) => value < 21 ? "red" : "green";')

    table = ui.table(rows=[{'age': 5}, {'age': 15}, {'age': 25}])
    table.add_slot('body-cell-age', '''
        <q-td key="age" :props="props">
            <q-badge :color="getBadgeColor(props.value)">{{ props.value }}</q-badge>
        </q-td>
    ''')

[ZiyadBastaili]

Nice, that's much cleaner. Thanks

[evnchn]

It's a script which config the vue app.

How about using the app.config.vue_config_script to cut the await?

@ui.page('/')
async def page():
    app.config.vue_config_script += 'app.config.globalProperties.getBadgeColor = (value) => value < 21 ? "red" : "green";'

    table = ui.table(rows=[{'age': 5}, {'age': 15}, {'age': 25}])
    table.add_slot('body-cell-age', '''
        <q-td key="age" :props="props">
            <q-badge :color="getBadgeColor(props.value)">{{ props.value }}</q-badge>
        </q-td>
    ''')

@falkoschindler Should we add a demo and make vue_config_script more official?

But we wrote "This is an experimental feature. Many NiceGUI elements are likely to break, and the API is subject to change." in https://nicegui.io/documentation/section_styling_appearance#using_other_vue_ui_frameworks though...

[falkoschindler]

Interesting idea. I like app.config.vue_config_script += ... for its simplicity and better performance (no need to await anything). We could create a demo with a note about the experimental nature of this API.