[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:
+
This element is now selected. Off to the right, you'll see that the side bar has changed. * To start with a single, blank workpad, click *Create workpad*.
This is where you can make changes to the element.
* 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"] For example, click *720p* for a traditional presentation layout.
image::images/canvas_workpad_edit_style.png[]
. Try changing the color palette. Easy right? Click the Back button in your . Click the *Background color* picker, then select the background color for your workpad.
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.
+ +
You will notice the sidebar changing again. You now have image::images/canvas-background-color-picker.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. . 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 .. Expand *Global CCS overrides*.
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 .. Enter the CCS, then click *Apply stylesheet*.
workpad.
. Click the (+) button to create a new, blank page. [float]
. Click the *Add element* button in the top right hand corner of the page. === Share your workpad
. Add an *Area Chart.*
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-generate-pdf.gif[]
image::images/canvas_workpad_3_page.png[]
You now have a three-page workpad, and a new element connected [float]
to some demo data. Your next step is to wire your new element ==== Export your workpad
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.
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