[DOCS] Create Canvas workpads (#38616)

* Create workpads (in Canvas)

* Continuing work on intro

* Share your workpad content

* Reorganization

* Added GIFs

* Final clean up

* Comments from reviewers

* Comments from Gail
This commit is contained in:
Kaarina Tungseth 2019-07-09 12:59:42 -05:00 committed by GitHub
parent f55e786d6c
commit b306c5b8f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 36 deletions

View file

@ -1,49 +1,72 @@
[role="xpack"]
[[canvas-workpad]]
=== Using the workpad
=== Create a workpad
Now that you have a workpad with sample data that you can mess with, lets mess with it.
Well start out by making a few stylistic changes.
When you create a workpad, you'll start with a blank page, or you can choose a workpad that is already started for you.
. Click the gauge chart in the top left of the workpad (fun fact, these are actually pie charts).
Try clicking on the small red slice. If you click the number, you'll notice that
youve actually selected a number element, not the gauge itself.
+
This element is now selected. Off to the right, you'll see that the side bar has changed.
This is where you can make changes to the element.
. Open *Canvas*.
. Choose one of the following options:
* To start with a single, blank workpad, click *Create workpad*.
* To create a workpad from a template, select *Templates*, then select a preconfigured template.
* To import an existing workpad, click and drag a workpad JSON file to the *Import workpad JSON file* field.
For advanced workpad examples, add a {kibana-ref}/add-sample-data.html[sample Kibana data set], then select *Canvas* from the *View Data* dropdown list.
For more workpad inspiration, go to the link:https://www.elastic.co/blog/[Elastic Blog].
[float]
=== Personalize your workpad
To personalize your workpad, use the editor on the right.
. Add a *Name* to your workpad, for example, `My Canvas Workpad`.
. In the *Width* and *Height* fields, specify the size of your workpad.
. Select the layout for your workpad.
+
[role="screenshot"]
image::images/canvas_workpad_edit_style.png[]
For example, click *720p* for a traditional presentation layout.
. Try changing the color palette. Easy right? Click the Back button in your
browser to undo your change.
. Try dragging the chart around the page. Grab the resize handles to make
the chart bigger and smaller.
. Now click somewhere off of the element, but not on another element,
to deselect it.
. Click the *Background color* picker, then select the background color for your workpad.
+
You will notice the sidebar changing again. You now have
access to the page and workpad-level settings. Feel free to change the page
background color or rename your workpad.
image::images/canvas-background-color-picker.gif[]
Speaking of pages, Canvas workpads can have multiple pages.
. If you already know that you want to apply styles to the entire workpad, use the *Global CCS overrides*.
. Click the arrow to the right of the *Page 1 of 2* text in the toolbar at the bottom
of the page. You'll see a whole new view of the the eCommerce data.
. Click the *Page 2 of 2* text to see a live preview of all of the pages in your
workpad.
. Click the (+) button to create a new, blank page.
. Click the *Add element* button in the top right hand corner of the page.
. Add an *Area Chart.*
.. Expand *Global CCS overrides*.
.. Enter the CCS, then click *Apply stylesheet*.
[float]
=== Share your workpad
When you are ready to share your workpad, create a PDF, or export your workpad to another author.
[float]
==== Create a PDF of your workpad
To view your workpad outside of Kibana, generate a PDF.
. If you are using a basic license, enable reporting in your `config/kibana.yml` file.
. From your workpad, click the *Share workpad* icon in the upper left corner, then select *PDF reports*.
. Click *Generate PDF*.
+
[role="screenshot"]
image::images/canvas_workpad_3_page.png[]
image::images/canvas-generate-pdf.gif[]
You now have a three-page workpad, and a new element connected
to some demo data. Your next step is to wire your new element
up to some real data; you can click on the *Data* tab in the right sidebar menu
and click "Change your data source" to start working with your Elasticsearch data.
[float]
==== Export your workpad
To share your workpads with another author, export your workpads as JSON files.
. Go to the *Canvas workpads* page.
. Choose one of the following options:
* To export a single workpad, click the *Export* icon next to the workpad you want to export.
* To export multiple workpads, select the workpads you want to export, then click *Export*.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 MiB