f43d27f0bd
### What is this PR for? After #2100 merged, we can control the behaviour of running select form using `Run on selection change` under each paragraph control menu. But currently if user creates multiple dynamic forms in one paragraph, the select form box itself[1] and `Run on selection` menu[2] don't appear as reported in https://github.com/apache/zeppelin/pull/2141#issuecomment-287537706. - [1]  - [2]  Regardless the number of select forms and the types of dynamic form, `Run on selection change` menu should be shown up if the paragraph has at least 1 select form. ### What type of PR is it? Bug Fix & Hot Fix ### What is the Jira issue? N/A ### How should this be tested? 1. Create multiple select forms ``` %md My first selection is ${my selection1=1,1|2|3} My second selection is ${my selection2=4,4|5|6} ``` 2. Create different types of dynamic form (e.g. 1 select form + 1 checkbox) ``` %md My selection is ${my selection=1,1|2|3} My check list is ${checkbox:checkboxTest=list1|list2, list1|list2|list3|list4} ``` There should be `Run on selection change` menu under the paragraph control menu in the above cases. And the select form should appear! ### Screenshots (if appropriate) - When multiple select forms are created  - When different dynamic forms are created (e.g. 1 checkbox + 1 select form)  ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: RyuAhyoung <ahyoungryu@MacBook-Pro-5.local> Closes #2154 from AhyoungRyu/fix/multiDynamicFormBehaviour and squashes the following commits:5730796[RyuAhyoung] Apply same mechanism to checkbox form266f0c8[RyuAhyoung] Fix multi dynamicforms behaviour
6 KiB
| layout | title | description | group |
|---|---|---|---|
| page | Dynamic Form in Apache Zeppelin | Apache Zeppelin dynamically creates input forms. Depending on language backend, there're two different ways to create dynamic form. | manual |
{% include JB/setup %}
Dynamic Form
Apache Zeppelin dynamically creates input forms. Depending on language backend, there're two different ways to create dynamic form. Custom language backend can select which type of form creation it wants to use.
Using form Templates
This mode creates form using simple template language. It's simple and easy to use. For example Markdown, Shell, Spark SQL language backend uses it.
Text input form
To create text input form, use ${formName} templates.
for example
Also you can provide default value, using ${formName=defaultValue}.
Select form
To create select form, use ${formName=defaultValue,option1|option2...}
for example
Also you can separate option's display name and value, using ${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}
The paragraph will be automatically run after you change your selection by default. But in case you have multiple types dynamic form in one paragraph, you might want to run the paragraph after changing all the selections. You can control this by unchecking the below Run on selection change option in the setting menu.
Even if you uncheck this option, still you can run it by pressing Enter.
Checkbox form
For multi-selection, you can create a checkbox form using ${checkbox:formName=defaultValue1|defaultValue2...,option1|option2...}. The variable will be substituted by a comma-separated string based on the selected items. For example:
Besides, you can specify the delimiter using ${checkbox(delimiter):formName=...}:
Like select form, the paragraph will be automatically run after you change your selection by default. But in case you have multiple types dynamic form in one paragraph, you might want to run the paragraph after changing all the selections. You can control this by unchecking the below Run on selection change option in the setting menu.
Even if you uncheck this option, still you can run it by pressing Enter.
Creates Programmatically
Some language backend uses programmatic way to create form. For example ZeppelinContext provides form creation API
Here're some examples.
Text input form
{% highlight scala %} %spark println("Hello "+z.input("name")) {% endhighlight %}
</div>
<div data-lang="python" markdown="1">
{% highlight python %} %pyspark print("Hello "+z.input("name")) {% endhighlight %}
</div>
Text input form with default value
{% highlight scala %} %spark println("Hello "+z.input("name", "sun")) {% endhighlight %}
</div>
<div data-lang="python" markdown="1">
{% highlight python %} %pyspark print("Hello "+z.input("name", "sun")) {% endhighlight %}
</div>
Select form
{% highlight scala %} %spark println("Hello "+z.select("day", Seq(("1","mon"), ("2","tue"), ("3","wed"), ("4","thurs"), ("5","fri"), ("6","sat"), ("7","sun")))) {% endhighlight %}
</div>
<div data-lang="python" markdown="1">
{% highlight python %} %pyspark print("Hello "+z.select("day", [("1","mon"), ("2","tue"), ("3","wed"), ("4","thurs"), ("5","fri"), ("6","sat"), ("7","sun")])) {% endhighlight %}
</div>
Checkbox form
{% highlight scala %} %spark val options = Seq(("apple","Apple"), ("banana","Banana"), ("orange","Orange")) println("Hello "+z.checkbox("fruit", options).mkString(" and ")) {% endhighlight %}
</div>
<div data-lang="python" markdown="1">
{% highlight python %} %pyspark options = [("apple","Apple"), ("banana","Banana"), ("orange","Orange")] print("Hello "+ " and ".join(z.checkbox("fruit", options, ["apple"]))) {% endhighlight %}
</div>
