Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DOCS] Updates Canvas docs with new menus #66061

Merged
merged 9 commits into from
Jun 3, 2020
Merged

[DOCS] Updates Canvas docs with new menus #66061

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
12b45fc
[DOCS] Updates for Canvas menus
KOTungseth May 4, 2020
006871c
Image set up
KOTungseth May 11, 2020
b6e3d35
Merge branch 'master' into docs/canvas-menus
elasticmachine May 11, 2020
d7ba006
Update docs/canvas/canvas-share-workpad.asciidoc
KOTungseth May 18, 2020
d194ca7
Update docs/canvas/canvas-present-workpad.asciidoc
KOTungseth May 18, 2020
890c1de
Update docs/canvas/canvas-tutorial.asciidoc
KOTungseth May 18, 2020
48c46c8
[DOCS] Adds Catherine's images and minor updates to content
KOTungseth May 18, 2020
2a91dc6
Final images and clean up
KOTungseth Jun 1, 2020
c4652ef
Merge branch 'master' into docs/canvas-menus
KOTungseth Jun 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 31 additions & 43 deletions docs/canvas/canvas-elements.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ Choose the type of element you want to use, then connect it to your own data.

. Click *Add element*, then select the element you want to use.
+
[role="screenshot"]
image::images/canvas-element-select.gif[Canvas elements]
//Need to replace image
//[role="screenshot"]
//image::images/canvas-element-select.gif[Canvas elements]

. To familiarize yourself with the element, use the preconfigured data demo data.
+
Expand All @@ -31,39 +32,41 @@ By default, most of the elements you create use demo data until you change the d
[[canvas-add-object]]
==== Add a saved object

Add a <<managing-saved-objects,saved object>>, such as a map or Lens visualization, then customize it to fit your display needs.
Add <<managing-saved-objects,saved objects>> to your workpad, such as maps, Lens visualizations, and basic visualizations.

. Click *Embed object*.
. Click *Add element > Add from Visualize Library*.

. Select the object you want to add.
. Select the visualization you want to add.
+
[role="screenshot"]
image::images/canvas-map-embed.gif[]
//Need to replace image
//[role="screenshot"]
//image::images/canvas-map-embed.gif[]

. To use the customization options, click the panel menu, then select one of the following options:

* *Edit map* &mdash; Opens <<maps,Maps>> so that you can edit the original map.
* *Edit map* &mdash; Opens <<maps,Maps>> or <<visualize,Visualize>> so that you can edit the original visualization.

* *Customize panel* &mdash; Specifies the object title options.
* *Edit panel title* &mdash; Adds a title to the visualization.

* *Inspect* &mdash; Allows you to drill down into the element data.
* *Customize time range* &mdash; Exposes a time filter dedicated to the visualization.

* *Customize time range* &mdash; Exposes a time filter dedicated to the map.
* *Inspect* &mdash; Allows you to drill down into the element data.

[float]
[[canvas-add-image]]
==== Add your own image

To personalize your workpad, add your own logos and graphics.

. Click *Manage assets*.
. Click *Add element > Manage assets*.

. On the *Manage workpad assets* window, drag and drop your images.

. To add the image to the workpad, click the *Create image element* icon.
+
[role="screenshot"]
image::images/canvas-add-image.gif[]
//Need to replace image
//[role="screenshot"]
//image::images/canvas-add-image.gif[]

[float]
[[move-canvas-elements]]
Expand All @@ -83,40 +86,25 @@ Move and resize your elements to meet your design needs.
[[format-canvas-elements]]
==== Format elements

Align, distribute, and reorder elements for consistency and readability across your workpad pages.

Access the align, distribute, and reorder options by clicking the *Element options* icon.

[role="screenshot"]
image::images/canvas_element_options.png[]
For consistency and readability across your workpad pages, align, distribute, and reorder elements.

To align elements:

. Press and hold Shift, then select the elements you want to align.

. Click the , then select *Group*.

. Click the *Element options* icon, then select *Alignment*.

. Select the alignment option.
. Click *Edit > Alignment*, then select the alignment option.

To distribute elements:

. Press and hold Shift, then select the elements you want to distribute.
Copy link
Contributor

@cqliu1 cqliu1 May 12, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we specify here that the Distribute option is only available when at least 3 elements are selected?


. Click the *Element options* icon, then select *Group*.

. Click the *Element options* icon, then select *Distribution*.

. Select the distribution option.
. Click *Edit > Distribution*, then select the distribution option.

To reorder elements:

. Select the element you want to reorder.

. Click the *Element options* icon, then select *Order*.

. Select the order option.
. Click *Edit > Order*, then select the order option.

[float]
[[data-display]]
Expand Down Expand Up @@ -157,14 +145,15 @@ text.align: center;

To use the elements across all workpads, save the elements.

When you're ready to save your element, select the element, then click the *Save as new element* icon.
When you're ready to save your element, select the element, then click *Edit > Save as new element*.

[role="screenshot"]
image::images/canvas_save_element.png[]
//Need to replace image
//[role="screenshot"]
//image::images/canvas_save_element.png[]

To save a group of elements, press and hold Shift, then select the elements you want to save.
To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.

To access your saved elements, click *Add element*, then select *My elements*.
To access your saved elements, click *Add element > My elements*.

[float]
[[delete-elements]]
Expand All @@ -174,9 +163,8 @@ When you no longer need an element, delete it from your workpad.

. Select the element you want to delete.

. Click the *Element options* icon.
. Click *Edit > Delete*.
+
[role="screenshot"]
image::images/canvas_element_options.png[]

. Select *Delete*.
//Need to replace image
//[role="screenshot"]
//image::images/canvas_element_options.png[]
30 changes: 14 additions & 16 deletions docs/canvas/canvas-present-workpad.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,22 @@

When you are ready to present your workpad, use and enable the presentation options.

[float]
[[view-fullscreen-mode]]
==== View your workpad in fullscreen mode
. Configure the autoplay options.

Click the *Enter fullscreen mode* icon.
.. From the workpad menu, click *View > Autoplay settings*.

[role="screenshot"]
image::images/canvas-fullscreen.png[Fullscreen mode]

[float]
[[enable-autoplay]]
==== Enable autoplay

Automatically cycle through your workpads pages in fullscreen mode.
.. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*.
+
//Need to replace image
//[role="screenshot"]
//image::images/canvas-refresh-interval.png[Element data refresh interval]
KOTungseth marked this conversation as resolved.
Show resolved Hide resolved

. Click the *Control settings* icon.
. To enable autoplay, click *View > Turn autoplay on*.

. Under *Change cycling interval*, select the interval you want to use.
. To start your presentation, click *View > Enter fullscreen mode*.
+
[role="screenshot"]
image::images/canvas-refresh-interval.png[Element data refresh interval]
//Need to replace image
//[role="screenshot"]
//image::images/canvas-fullscreen.png[Fullscreen mode]

. When you are ready to exit fullscreen mode, press the Esc (Escape) key.
61 changes: 18 additions & 43 deletions docs/canvas/canvas-share-workpad.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,54 +10,51 @@ When you've finished your workpad, you can share it outside of {kib}.

Create a JSON file of your workpad that you can export outside of {kib}.

. From your workpad, click the *Share workpad* icon.
Click *Share > Download as JSON*.

. Select *Download as JSON*.
+
[role="screenshot"]
image::images/canvas-export-workpad.png[Export single workpad]
//Need to replace image
//[role="screenshot"]
//image::images/canvas-export-workpad.png[Export single workpad]

Want to export multiple workpads? Go to the *Canvas workpads* view, select the workpads you want to export, then click *Export*.
Want to export multiple workpads? Click *Canvas*, select the workpads you want to export, then click *Export*.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean the Canvas link in the breadcrumbs up top or in the left sidebar? Do we need to make that distinction here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed!


[float]
[[create-workpad-pdf]]
==== Create a PDF

If you have a license that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}.

For more information, refer to <<reporting-getting-started, Reporting from Kibana>>.
Click *Share > PDF reports > Generate PDF*.

. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
//Need to replace image
//[role="screenshot"]
//image::images/canvas-generate-pdf.gif[Generate PDF]

. Click *Generate PDF*.
+
[role="screenshot"]
image::images/canvas-generate-pdf.gif[Generate PDF]
For more information, refer to <<reporting-getting-started, Reporting from Kibana>>.

[float]
[[create-workpad-URL]]
==== Create a POST URL

If you have a license that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using Watcher or a script.

For more information, refer to <<automating-report-generation, Automating report generation>>.
Click *Share > PDF reports > Copy POST URL*.

. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
//Need to replace image
//[role="screenshot"]
//image::images/canvas-create-URL.gif[Create POST URL]

. Click *Copy POST URL*.
+
[role="screenshot"]
image::images/canvas-create-URL.gif[Create POST URL]
For more information, refer to <<automating-report-generation, Automating report generation>>.

[float]
[[add-workpad-website]]
==== Share the workpad on a website

beta[] Canvas allows you to create _shareables_, which are workpads that you download and securely share on any website. To customize the behavior of the workpad on your website, you can choose to autoplay the pages or hide the workpad toolbar.

. From your workpad, click the *Share this workpad* icon, then select *Share on a website*.
. Click *Share > *Share > Share on a website*.
KOTungseth marked this conversation as resolved.
Show resolved Hide resolved

. On the *Share on a website* pane, follow the instructions.
. On the *Share on a website* flyout, follow the instructions.

. To customize the workpad behavior to autoplay the pages or hide the toolbar, use the inline parameters.
+
Expand All @@ -68,26 +65,4 @@ image::images/canvas-embed_workpad.gif[Share the workpad on a website]
+
NOTE: Shareable workpads encode the current state of the workpad in a JSON file. When you make changes to the workpad, the changes do not appear in the shareable workpad on your website.

[float]
[[change-the-workpad-settings]]
==== Change the settings

After you've added the workpad to your website, you can change the autoplay and toolbar settings.

To change the autoplay settings:

. Click the settings icon.

. Click *Auto Play*, then change the settings.
+
[role="screenshot"]
image::images/canvas_share_autoplay_480.gif[Autoplay settings]

To change the toolbar settings:

. Click the settings icon.

. Click *Toolbar*, then change the settings.
+
[role="screenshot"]
image::images/canvas_share_hidetoolbar_480.gif[Hide toolbar settings]
. To change the settings, click the settings icon, then choose the settings you want to use.
Loading