Add form tutorial #7568
Add form tutorial #7568
Conversation
| ```python | ||
| class FormState(param.Parameterized): | ||
| name = param.String(default="", doc="The name of the user.") | ||
| email = param.String(default="", doc="The email of the user.") |
There was a problem hiding this comment.
It would be nice if we could add a regex to the email parameter. I tried but the exceptions where raised in the terminal. It was not clear to me how to easily integrate them with the components and UI.
It would also be nice to be able to add a custom validate function to any param.Parameter. This seems not supported either. Its a standard thing for all other Model frameworks I know.
There was a problem hiding this comment.
I think regex works as long as you don't use name as your param name because the name property overrides the param.
import param
class FormState(param.Parameterized):
n = param.String(default="", doc="The name of the user.", regex=r"^[A-Za-z ]*$")
form_state = FormState(n="ABC")
form_state.name
# this fails
form_state = FormState(n="ABC123")There was a problem hiding this comment.
Thanks. The problem is not the regex not working. The problem is that the regex errors are not propogated to the UI. The errors stays on the server side and are hard to catch and propagate to the user. I.e. its not helpful in a Panel context.
| FORM_TEXT, | ||
| ) | ||
|
|
||
| error_pane = pn.pane.Alert( |
There was a problem hiding this comment.
It would be really nice to be able to display the errors together with the widgets. For example via red borders and tooltips. The red borders can be done with a lot of work. In theory tooltips could be added. But they will be in the tooltips icon instead of over the input element.
As a workaround I used an Alert pane.
| object=form_state.param.validation_message, | ||
| visible=form_state.param.is_not_valid, | ||
| alert_type="danger", | ||
| stylesheets=["p {margin-bottom: 0}"] |
There was a problem hiding this comment.
I don't know if its a general problem that margin-bottom of the Alert paragraph is set to 1rem. Maybe it should be set to 0 in general?
There was a problem hiding this comment.
Great tutorial! Would it make sense to add 2 examples of conditional logic?
So 1 case where an input field is shown / hidden based on, for example, a yes / no input value in a previous field?
And one where the options in a field are determined by the input in a previous field?
I.e. Field 1 -> Choose continent, field 2 -> Show subselection of countries that belong to that continent.
As both are very common use cases for forms, and param seems a natural fit for the type of logic.
In a broader context, would a panel form (builder) component make sense?
Is there (a lot of) latent demand for this?
|
My feeling is that this is something we definitely need to work on. This tutorial sets a baseline, warts and all, and it'll be our job to improve on the status quo from here. I'll merge as is for now. @Coderambling Yes, I think those are all good points and we should add those later. |
Other frameworks like Streamlit and Reflex have components and tutorials for creating forms.
In Gradio the input is almost always a form.
We don't have anything explaining how to create a Form with Panel. This PR addresses this issue.