'Convert' existing HTML file as Web App

CGB

Hi,

I would like to know if it's possible to create a WebApp with using an existing HTML file available in Dataiku Folder ?

I tried to create a WebApp and link my html file inside but, it was'nt a success ...

For information, I create this HTML file in previous python code so maybe it could be possible to insert my Python code directly in WebApp (it's result of Kepler.gl library)?

Thanks in advance for your help!

Clémence

HenriC

Hi Clemence!

It is indeed possible to do so pretty easily. For that, you will need a Python backend as well as some basic knowledge of JavaScript.

First, you can create an iframe into your HTML code that you can name whatever you want

<div class="iframe-container">
    <iframe id="kepler-iframe"></iframe>
</div>

Then, you have to create a Python endpoint that will fetch the information from your folder. Here, you ca either create directly your interactive map in your backend or create it appart and then use a folder to store the HTML (As you do before). If your html is stored in a folder, you can just use the following code (adapted to your situation of course) :

import dataiku

@app.route('/get-kepler-map')
def get_kepler_map():
    my_folder = dataiku.Folder("MY_FOLDER_NAME")
    html = my_folder.get_download_stream('NAME_OF_KEPLER_HTML_FILE.html').read()
    return json.dumps({"html": html})

Finally, you can use a small javascript function to add the html to the iframe you previously created :

$.getJSON(getWebAppBackendUrl('get-kepler-map'), function({ html }) {
    var iframe = document.getElementById("kepler-iframe");
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html);
    iframe.contentWindow.document.close();
});

You will have to add some CSS to format your iframe but this should represent most of the solution.

Do not hesitate if you don't understand something

CGB

That's work well !

Indeed, the default window of the iframe is not suitable but for this part, I should get out of it via the css I will also be able to integrate the python in the backend to 1) generate my file in the folder and 2) create the webapp.

Thanks a lot @HenriC
for your answer !