[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"] [role="xpack"]
[[canvas-workpad]] [[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. When you create a workpad, you'll start with a blank page, or you can choose a workpad that is already started for you.
Well start out by making a few stylistic changes.
. Click the gauge chart in the top left of the workpad (fun fact, these are actually pie charts). . Open *Canvas*.
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. . 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.
+ +
This element is now selected. Off to the right, you'll see that the side bar has changed. For example, click *720p* for a traditional presentation layout.
This is where you can make changes to the element.
. Click the *Background color* picker, then select the background color for your workpad.
+ +
[role="screenshot"] image::images/canvas-background-color-picker.gif[]
image::images/canvas_workpad_edit_style.png[]
. Try changing the color palette. Easy right? Click the Back button in your . If you already know that you want to apply styles to the entire workpad, use the *Global CCS overrides*.
browser to undo your change.
. Try dragging the chart around the page. Grab the resize handles to make .. Expand *Global CCS overrides*.
the chart bigger and smaller.
. Now click somewhere off of the element, but not on another element, .. Enter the CCS, then click *Apply stylesheet*.
to deselect it.
[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*.
+ +
You will notice the sidebar changing again. You now have image::images/canvas-generate-pdf.gif[]
access to the page and workpad-level settings. Feel free to change the page
background color or rename your workpad.
Speaking of pages, Canvas workpads can have multiple pages. [float]
==== Export your workpad
. Click the arrow to the right of the *Page 1 of 2* text in the toolbar at the bottom To share your workpads with another author, export your workpads as JSON files.
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.*
+
[role="screenshot"]
image::images/canvas_workpad_3_page.png[]
You now have a three-page workpad, and a new element connected . Go to the *Canvas workpads* page.
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.
. 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