HTML form within notebooks

[ConfusedZebra]

Hi all,

I'm trying to make a small form in Databricks notebooks. I can't currently use apps so want an interim solution. 

I can successfully make the form using HTML which displays correctly but I cannot extract the values/use them e.g. A form with three text boxes, one for catalog, one for schema, one for table name. Upon submit, I would like it to show me the top ten rows from that table but currently I can't get that information to do the select function with. 

Does anyone have any ideas?

[Alberto_Umana]

Hi @ConfusedZebra,

Could you please share your HTML form, how are you trying to extract the values out of it?

[Stefan-Koch]

You can use Databricks widgets to create a form-like experience and capture user input dynamically.

dbutils.widgets.text("catalog", "", "Enter Catalog Name")
dbutils.widgets.text("schema", "", "Enter Schema Name")
dbutils.widgets.text("table", "", "Enter Table Name")

catalog = dbutils.widgets.get("catalog")
schema = dbutils.widgets.get("schema")
table = dbutils.widgets.get("table")

query = f"SELECT * FROM {catalog}.{schema}.{table} LIMIT 10"

display(spark.sql(query))

[ConfusedZebra]

Thanks both. 
Notebooks are a little too intimidating for some users so we are trying to make them look and feel a bit more like what they are used to. Ideally we would build an app but apps aren't available in our area yet so we need an interim solution. All a user needs to do is add some test, pick a date and select a file. Widgets don't really give the date picker option nor the file browser option so aren't ideal.

I've tried a few different options but no joy yet, tried: 

from IPython.display import HTML, display, Javascript
from IPython.core.display import display as core_display

# HTML form
html_form = """
<form id="myForm">
    <label for="input_text">Enter Text:</label><br>
    <input type="text" id="input_text" name="input_text"><br><br>
    
    <label for="input_date">Enter Date:</label><br>
    <input type="date" id="input_date" name="input_date"><br><br>
    
    <label for="user_file">Select File:</label><br>
    <input type="file" id="input_file" name="input_file"><br><br>
    
    <input type="button" value="Submit" onclick="submitForm()">
</form>

<div id="output"></div>

<script>
function submitForm() {
    var text = document.getElementById('input_text').value;
    var date = document.getElementById('input_date').value;
    var file = document.getElementById('input_file').value;
    
    var output = 'Form Submitted!<br>';
    output += 'Text entered: ' + text + '<br>';
    output += 'Date selected: ' + date + '<br>';
    output += 'File selected: ' + file.split('\\\\').pop().split('/').pop();
    
    document.getElementById('output').innerHTML = output;
    
    // Send data to Python
    IPython.notebook.kernel.execute('form_data = ' + JSON.stringify({text: text, date: date, file: file}));
}
</script>
"""

# Display the HTML form
display(HTML(html_form))

But this then doesn't do anything with the information so something like this is needed but it then requires a second button outside the form and/or fails

def process_form_data():
    global form_data
    if 'form_data' in globals():
        print("Processed in Python:")
        print(f"Text entered: {form_data['text']}")
        print(f"Date selected: {form_data['date']}")
    else:
        print("No form data available yet. Please submit the form.")

# Create a button to process form data in Python
button = widgets.Button(description="Process in Python")
button.on_click(lambda _: process_form_data())
display(button)