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 all 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
55 changes: 20 additions & 35 deletions docs/canvas/canvas-elements.asciidoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,36 +27,38 @@ By default, most of the elements you create use demo data until you change the d

* *Timelion* &mdash; Access your time series data using <<timelion,Timelion>> queries. To use Timelion queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.

Each element can display a different data source. Pages and workpads often contain multiple data sources.

[float]
[[canvas-add-object]]
==== Add a saved object

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

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

. Select the object you want to add.
. Select the saved object you want to add.
+
[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 saved object.

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

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

* *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.

Expand All @@ -83,40 +85,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:
To align two or more elements:

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

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

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

. Select the alignment option.

To distribute elements:
To distribute three or more 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 +144,14 @@ 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[]

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 +161,7 @@ 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*.
24 changes: 10 additions & 14 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,20 @@

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*.

.. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*.
+
[role="screenshot"]
image::images/canvas-fullscreen.png[Fullscreen mode]

[float]
[[enable-autoplay]]
==== Enable autoplay
image::images/canvas-autoplay-interval.png[Element autoplay interval]

Automatically cycle through your workpads pages in fullscreen mode.
. To enable autoplay, click *View > Turn autoplay on*.

. Click the *Control settings* icon.

. 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]
image::images/canvas-fullscreen.png[Fullscreen mode]

. When you are ready to exit fullscreen mode, press the Esc (Escape) key.
52 changes: 12 additions & 40 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,84 +10,56 @@ 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]

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? Go to the *Canvas* home page, select the workpads you want to export, then click *Export*.

[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>>.

. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
Click *Share > PDF reports > 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>>.

. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
Click *Share > PDF reports > Copy 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 on a website*.

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

. To customize the workpad behavior to autoplay the pages or hide the toolbar, use the inline parameters.
+
To make sure that your data remains secure, the data in the JSON file is not connected to {kib}. Canvas does not display elements that manipulate the data on the workpad.
+
[role="screenshot"]
image::images/canvas-embed_workpad.gif[Share the workpad on a website]
image::canvas/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