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

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