Repository: incubator-zeppelin Updated Branches: refs/heads/gh-pages a322528c2 -> 1179e9083
Add 'Notebook as Homepage' page to the manual This pull request add the 'Notebook as Homepage' to the manual section and re-arrange the manual to a separate directory. Author: eranwitkon <[email protected]> Closes #214 from eranwitkon/gh-pages and squashes the following commits: 7225513 [eranwitkon] Add note about how to run Zeppelin server in development mode 100f947 [eranwitkon] fiz typo in docs/manual/notebookashomepage.md edc6404 [eranwitkon] Add 'Notebook as Homepage' page to the manual and rearrange manual section to a separate directory Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/1179e908 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/1179e908 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/1179e908 Branch: refs/heads/gh-pages Commit: 1179e90834674f5c97db2c2d544f2b0c687a4a8a Parents: a322528 Author: eranwitkon <[email protected]> Authored: Mon Aug 17 15:41:49 2015 +0300 Committer: Lee moon soo <[email protected]> Committed: Tue Aug 18 13:13:28 2015 -0700 ---------------------------------------------------------------------- .../img/screenshots/homepage_notebook_id.png | Bin 0 -> 18950 bytes .../img/screenshots/homepage_notebook_list.png | Bin 0 -> 35186 bytes docs/development/howtocontribute.md | 1 + docs/dynamicform.md | 65 ------------- docs/index.md | 3 +- docs/manual/dynamicform.md | 65 +++++++++++++ docs/manual/notebookashomepage.md | 96 +++++++++++++++++++ 7 files changed, 164 insertions(+), 66 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png b/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png new file mode 100644 index 0000000..ac6ceef Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png ---------------------------------------------------------------------- diff --git a/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png b/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png new file mode 100644 index 0000000..a5ac6f2 Binary files /dev/null and b/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png differ http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/development/howtocontribute.md ---------------------------------------------------------------------- diff --git a/docs/development/howtocontribute.md b/docs/development/howtocontribute.md index b2eea1e..0de1e78 100644 --- a/docs/development/howtocontribute.md +++ b/docs/development/howtocontribute.md @@ -76,6 +76,7 @@ mvn install -Dspark.version=1.0.1 -Dhadoop.version=2.2.0 cd zeppelin-server HADOOP_HOME=YOUR_HADOOP_HOME JAVA_HOME=YOUR_JAVA_HOME mvn exec:java -Dexec.mainClass="org.apache.zeppelin.server.ZeppelinServer" -Dexec.args="" ``` +NOTE: make sure you first run ```mvn clean install -DskipTests``` on your zeppelin root directory otherwise your server build will fail to find the required dependencies in the local repro or use daemon script http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/dynamicform.md ---------------------------------------------------------------------- diff --git a/docs/dynamicform.md b/docs/dynamicform.md deleted file mode 100644 index 36d1a0c..0000000 --- a/docs/dynamicform.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -layout: page -title: "Dynamic Form" -description: "" -group: manual ---- -{% include JB/setup %} - - -## Dynamic Form - -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. - -<br /> -### Using form Templates - -This mode creates form using simple template language. It's simple and easy to use. For example Markdown, Shell, SparkSql language backend uses it. - -<br /> -#### Text input form - -To create text input form, use _${formName}_ templates. - -for example - -<img src="../assets/themes/zeppelin/img/screenshots/form_input.png" /> - - -Also you can provide default value, using _${formName=defaultValue}_. - -<img src="../assets/themes/zeppelin/img/screenshots/form_input_default.png" /> - - -<br /> -#### Select form - -To create select form, use _${formName=defaultValue,option1|option2...}_ - -for example - -<img src="../assets/themes/zeppelin/img/screenshots/form_select.png" /> - -Also you can separate option's display name and value, using _${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}_ - -<img src="../assets/themes/zeppelin/img/screenshots/form_select_displayname.png" /> - -<br /> -### Creates Programmatically - -Some language backend uses programmatic way to create form. For example [ZeppelinContext](./interpreter/spark.html#zeppelincontext) provides form creation API - -Here're some examples. - -Text input form - -<img src="../assets/themes/zeppelin/img/screenshots/form_input_prog.png" /> - -Text input form with default value - -<img src="../assets/themes/zeppelin/img/screenshots/form_input_default_prog.png" /> - -Select form - -<img src="../assets/themes/zeppelin/img/screenshots/form_select_prog.png" /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/index.md ---------------------------------------------------------------------- diff --git a/docs/index.md b/docs/index.md index 8267685..d82b9dd 100644 --- a/docs/index.md +++ b/docs/index.md @@ -34,7 +34,8 @@ group: nav-right ### Manual -* [Dynamic Form](./dynamicform.html) +* [Dynamic Form](./manual/dynamicform.html) +* [Notebook as Homepage](./manual/notebookashomepage.html) ### Development http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/manual/dynamicform.md ---------------------------------------------------------------------- diff --git a/docs/manual/dynamicform.md b/docs/manual/dynamicform.md new file mode 100644 index 0000000..2b58c93 --- /dev/null +++ b/docs/manual/dynamicform.md @@ -0,0 +1,65 @@ +--- +layout: page +title: "Dynamic Form" +description: "" +group: manual +--- +{% include JB/setup %} + + +## Dynamic Form + +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. + +<br /> +### Using form Templates + +This mode creates form using simple template language. It's simple and easy to use. For example Markdown, Shell, SparkSql language backend uses it. + +<br /> +#### Text input form + +To create text input form, use _${formName}_ templates. + +for example + +<img src="../../assets/themes/zeppelin/img/screenshots/form_input.png" /> + + +Also you can provide default value, using _${formName=defaultValue}_. + +<img src="../../assets/themes/zeppelin/img/screenshots/form_input_default.png" /> + + +<br /> +#### Select form + +To create select form, use _${formName=defaultValue,option1|option2...}_ + +for example + +<img src="../../assets/themes/zeppelin/img/screenshots/form_select.png" /> + +Also you can separate option's display name and value, using _${formName=defaultValue,option1(DisplayName)|option2(DisplayName)...}_ + +<img src="../../assets/themes/zeppelin/img/screenshots/form_select_displayname.png" /> + +<br /> +### Creates Programmatically + +Some language backend uses programmatic way to create form. For example [ZeppelinContext](./interpreter/spark.html#zeppelincontext) provides form creation API + +Here're some examples. + +Text input form + +<img src="../../assets/themes/zeppelin/img/screenshots/form_input_prog.png" /> + +Text input form with default value + +<img src="../../assets/themes/zeppelin/img/screenshots/form_input_default_prog.png" /> + +Select form + +<img src="../../assets/themes/zeppelin/img/screenshots/form_select_prog.png" /> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/1179e908/docs/manual/notebookashomepage.md ---------------------------------------------------------------------- diff --git a/docs/manual/notebookashomepage.md b/docs/manual/notebookashomepage.md new file mode 100644 index 0000000..f1c0fae --- /dev/null +++ b/docs/manual/notebookashomepage.md @@ -0,0 +1,96 @@ +--- +layout: page +title: "Notebook as Homepage" +description: "" +group: manual +--- +{% include JB/setup %} + +## Customize your zeppelin homepage + Zeppelin allows you to use one of the notebooks you create as your zeppelin Homepage. + With that you can brand your zeppelin installation, + adjust the instruction to your users needs and even translate to other languages. + + <br /> +### How to set a notebook as your zeppelin homepage + +The process for creating your homepage is very simple as shown below: + + 1. Create a notebook using zeppelin + 2. Set the notebook id in the config file + 3. Restart zeppelin + + <br /> +#### Create a notebook using zeppelin + Create a new notebook using zeppelin, + you can use ```%md``` interpreter for markdown content or any other interpreter you like. + + You can also use the display system to generate [text](../displaysystem/display.html), + [html](../displaysystem/display.html#html),[table](../displaysystem/table.html) or + [angular](../displaysystem/angular.html) + + Run (shift+Enter) the notebook and see the output. Optionally, change the notebook view to report to hide + the code sections. + + <br /> +#### Set the notebook id in the config file + To set the notebook id in the config file you should copy it from the last word in the notebook url + + for example + + <img src="../../assets/themes/zeppelin/img/screenshots/homepage_notebook_id.png" /> + + Set the notebook id to the ```ZEPPELIN_NOTEBOOK_HOMESCREEN``` environment variable + or ```zeppelin.notebook.homescreen``` property. + + You can also set the ```ZEPPELIN_NOTEBOOK_HOMESCREEN_HIDE``` environment variable + or ```zeppelin.notebook.homescreen.hide``` property to hide the new notebook from the notebook list. + + <br /> +#### Restart zeppelin + Restart your zeppelin server + + ``` + ./bin/zeppelin-deamon stop + ./bin/zeppelin-deamon start + ``` + ####That's it! Open your browser and navigate to zeppelin and see your customized homepage... + + +<br /> +### Show notebooks list in your custom homepage +If you want to display the list of notebooks on your custom zeppelin homepage all +you need to do is use our %angular support. + + <br /> + Add the following code to a paragraph in you home page and run it... walla! you have your notebooks list. + + ```javascript + println( + """%angular + <div class="col-md-4" ng-controller="HomeCtrl as home"> + <h4>Notebooks</h4> + <div> + <h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-decoration: none;"> + <i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5> + <ul style="list-style-type: none;"> + <li ng-repeat="note in home.notes.list track by $index"><i style="font-size: 10px;" class="icon-doc"></i> + <a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{note.name || 'Note ' + note.id}}</a> + </li> + </ul> + </div> + </div> + """) + ``` + + After running the notebook you will see output similar to this one: + <img src="../../assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png" /> + + The main trick here relays in linking the ```<div>``` to the controller: + + ```javascript + <div class="col-md-4" ng-controller="HomeCtrl as home"> + ``` + + Once we have ```home``` as our controller variable in our ```<div></div>``` + we can use ```home.notes.list``` to get access to the notebook list. \ No newline at end of file
