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.

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: ✏️ improve UI actions plugin readme #96030

Merged
merged 4 commits into from
Apr 12, 2021
Merged
Changes from 1 commit
Commits
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
70 changes: 62 additions & 8 deletions src/plugins/ui_actions/README.asciidoc
Original file line number Diff line number Diff line change
@@ -1,14 +1,68 @@
[[uiactions-plugin]]
== UI Actions

An API for:

- creating custom functionality (`actions`)
- creating custom user interaction events (`triggers`)
- attaching and detaching `actions` to `triggers`.
- emitting `trigger` events
- executing `actions` attached to a given `trigger`.
- exposing a context menu for the user to choose the appropriate action when there are multiple actions attached to a single trigger.
UI Actions plugins provides API to manage *triggers* and *actions*.

*Triggers* are like events that can be "triggered". For, example one such
trigger is when somebody applies filters on dashboard.
streamich marked this conversation as resolved.
Show resolved Hide resolved

*Actions* are pieces of code that execute in response to a trigger. For example,
to the dashboard filtering trigger multiple actions can be attached. Once a user
filters on the dashboard all possible actions are displayed to the user in a
popup menu and the user has to chose one.

In general this plugin provides:

- Creating custom functionality (actions).
- Creating custom user interaction events (triggers).
- Attaching and detaching actions to triggers.
- Emitting trigger events.
- Executing actions attached to a given trigger.
- Exposing a context menu for the user to choose the appropriate action when there are multiple actions attached to a single trigger.

=== Basic usage

To get started, first you need to know a trigger you will attach your actions to.
You can either pick an existing one, or register your own one:

[source,typescript jsx]
----
plugins.uiActions.registerTrigger({
id: 'MY_APP_PIE_CHART_CLICK',
title: 'Pie chart click',
description: 'When user clicks on a pie chart slice.',
});
----

Now, when user clicks on a pie slice you need to "trigger" your trigger and
provide some context data:

[source,typescript jsx]
----
plugins.uiActions.getTrigger('MY_APP_PIE_CHART_CLICK').exec({
/* Custom context data. */
});
----

Finally, your code or developers from other plugins can register UI actions that
listen for the above trigger and execute some code when the trigger is triggered.

[source,typescript jsx]
----
plugins.uiActions.registerAction({
id: 'DO_SOMETHING',
isCompatible: async (context) => true,
execute: async (context) => {
// Do something.
},
});
plugins.uiActions.attachAction('MY_APP_PIE_CHART_CLICK', 'DO_SOMETHING');
----

Now your `DO_SOMETHING` action will automatically execute when `MY_APP_PIE_CHART_CLICK`
trigger is triggered; or, if more than one compatible action, is attached to
streamich marked this conversation as resolved.
Show resolved Hide resolved
that trigger, user will be presented with a context menu popup to select one
action to execute.

=== Examples

Expand Down