How to Create a Custom Web App

In this tutorial, we’ll start from the web app created in the Bokeh web app tutorial.

You should also create a new empty plugin, called, say, first-webapp.

Convert to a Web App Plugin

  • Navigate to the Advanced tab of web app you created
  • Click Convert Web App.
  • Select the target plugin to add the web app to and give the web app an identifier like custom-scatterplot.
  • Click Convert
  • Confirm the overwrite of existing source and choose to edit the plugin now.
../../_images/webapp-convert.png

Edit Definitions in webapp.json

First, let’s have a look at the webapp.json file. This describes the parameters that the user will have to specify when using the plugin web app.

Note that unlike the recipe.json file of a plugin recipe, there are no input_roles or output_roles sections of JSON, and we can focus on editing the params section.

Thinking about the parameters to specify, there’s:

  • the input dataset
  • the X-axis column
  • the Y-axis column
  • the “time” column
  • a categorical column

… which can be specified in the JSON as follows.

"params": [
    {
        "name": "input_dataset",
        "type": "DATASET",
        "label": "Dataset",
        "description": "The dataset used to populate the web app",
        "mandatory": true,
        "canSelectForeign": true
    },
    {
        "name": "x_column",
        "type": "DATASET_COLUMN",
        "datasetParamName": "input_dataset",
        "label": "X-Axis Column",
        "description": "",
        "mandatory": true
    },
    {
        "name": "y_column",
        "type": "DATASET_COLUMN",
        "datasetParamName": "input_dataset",
        "label": "Y-Axis Column",
        "description": "",
        "mandatory": true
    },
    {
        "name": "time_column",
        "type": "DATASET_COLUMN",
        "datasetParamName": "input_dataset",
        "label": "Time Column",
        "description": "",
        "mandatory": true
    },
    {
        "name": "cat_column",
        "type": "DATASET_COLUMN",
        "datasetParamName": "input_dataset",
        "label": "Categorical Column",
        "description": "",
        "mandatory": true
    },
],

Edit code in backend.py

Now let’s edit backend.py. The default contents include the code from your Python Bokeh web app. Looking through the code, we can see that the original web app is written in such a way that we can easily generalize it.

Find the block that begins with the comment Parameterize web app inputs and alter it as follows:

# Retrieve parameter values from the of map of parameters
input_dataset = get_webapp_config()['input_dataset']
x_column = get_webapp_config()['x_column']
y_column = get_webapp_config()['y_column']
time_column = get_webapp_config()['time_column']
cat_column = get_webapp_config()['cat_column']

Next we’ll access the input Dataiku dataset as a pandas dataframe, and extract the X- and Y-axis columns from the pandas dataframe to define the source data for the visualization.

Use Your Custom Web App in a Project

Note

After editing webapp.json for a plugin web app, you must do the following:

  • Click Reload
  • Reload the Dataiku DSS page in your browser

When modifying the backend.py file, you don’t need to reload anything. Simply restart the web app backend.

  • Go to the Flow and open a dataset.
  • From the Actions menu, select your plugin web app.
  • Give the new web app a name
../../_images/webapp-actions.png
  • Make the desired selections for displaying the web app.
  • Click Save and view web app
../../_images/webapp-selections.png

The web app displays with the selected settings, and provides the interactivity to change the plot title, the time period to display, and the category of the categorical column.

../../_images/webapp-displayed.png

In order to change the dataset and columns used by the web app, simply go to the Settings tab, make the new selections, and click View web app.