Webapp HTML/Python

[MathieuS]

Hi,

Is there any way to update a text label in a webapp (created in HTML tab) with a variable resulting from a python function ?

In the same way, I would be interested to fill a Select component in HTML tab based on a python list.

I saw that it's possible to get acess to html values in backend using JS but i didn't find out how to do it in the reverse way

Thanks,

Mathieu

[HenriC · Accepted solution]

Hi @MathieuS and thanks for using the Community 🙂

There are many ways of doing what you say. Here is one very easy way that you can use by adapting it to your use case : 

HTML

<div>
    <h1 id="label"></h1>
    <select id="select"></select>
</div>

JavaScript

// We call a backend Python route that will return data in which is the label
$.getJSON(getWebAppBackendUrl('/get-updated-label'), function(data) {
    $('#label').text(data.label)
});

$.getJSON(getWebAppBackendUrl('/get-select-options'), function(data) {
    data.forEach((x) => {
        // For each option, we add it to the select
        $('#select').append(new Option(x.label, x.value));
    })
});

Python

@app.route('/get-updated-label')
def updated_label():
    return json.dumps({"label": "New Label"})


@app.route('/get-select-options')
def select_options():
    return json.dumps([
        {
            "label": "Option 1",
            "value": "option_1"
        },
        {
            "label": "Option 2",
            "value": "option_2"
        },
        {
            "label": "Option 3",
            "value": "option_3"
        },
        {
            "label": "Option 4",
            "value": "option_4"
        },
    ])

You can use this code into a webapp that has Python backend enabled.

Do not hesitate if you do not understand something or need more help!

Henri

[MathieuS]

Hi Henri,

Thanks a lot for you clear answer. It's all good now with your proposal

Mathieu