Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

What are client actions?

Client actions are actions  are the actions that a Flock client takes clients take when a user interacts with controls like buttonsSlash Commandsslash commands, and so on, that have been provided by an app. Flock Attachment PickersLauncher Buttons, and so on. 

Flock currently supports three kinds of client actions. They are:

  • Actions that open Opening widget containing the app's content;Actions that open  inside the Flock client
  • Opening a URL in the system browser;
  • Actions that send Sending an event to the app servicethe event listener URL.

How do I configure a client action?

Typically, you set up a client action by providing an ActionConfig object while configuring a button or a slash command, either in the app manifest or in an attachment. A client action can also be triggered by a widget using methods provided in flock.js, or by FlockML content using anchor tags.

Which client action is performed depends on the type attribute of this object. The various options are:

  • openWidget. Opens a widget.
  • openBrowser. Opens the system browser.
  • sendToAppServiceSends an event to the app service.

How do I open a widget?

See the relevant section in the widgets page.

How do I open the system browser?

You can open the system browser by providing a ClientActionConfig object with type openBrowser and the following attributes:

  • url. The URL to open.
  • sendContext. This is a boolean value that specifies if specific query parameters (like flockClient, flockEvent, and so on) should be appended to the URL. The default value is false. Never set this to true if you are opening a third party URL in the browser.

For example, to open the browser each time a user presses the attachment picker button, provide the configuration as below.

Code Block
languagejs
attachmentPicker: {
    description: "<attachment picker help text>",
    icon: "attachment-picker.png",
    action: { type: "openBrowser", url: "<action url>", sendContext: true }
}

How do I send an event to the app service?

You can dispatch an event to the app service by providing an ActionConfig object with the type sendToAppService. The type of event that is sent to your app service is covered in the next section.

For example, to dispatch an event when user enters a slash command, provide this configuration:

Code Block
languagejs
slashCommand: {
    command: "<name of the command>",
    helpText: "<help text for the slash command>",
    action: { type: "sendToAppService" }
}

How does my app discover what triggered the client action?

An event is generated anytime a client action is triggered. The event, along with its attributes, is:

  • either sent to the app service using the Events API if the configured action was to dispatch the event; or
  • passed as the URL query param flockEvent to the widget or browser URL.

The table below explains the specific events generated for each trigger.

...

Opening a Widget

You can use widgets to render web applications inside an iframe or a webview within Flock. They can not only do everything that a normal webapp can, but also interact with the Flock client hosting them.

To open a widget, the following info is required:

  • URL of the widget
  • Type of widget in desktop – it can be either modal or sidebar
  • Type of widget in mobile – this is usually optional. The only acceptable value is modal.

Opening the Browser

You can also choose to open a URL in the browser. To open the browser, provide the following:

  • The URL to open.
  • Whether to send event context or not. When enabled, event parameters are appended to the URL.

Sending an event to the event listener URL

Or if you prefer to remain silent, you can send an event to the event listener URL.

What happens when a client action is triggered?

An event is generated every time a client action is triggered.

The events sent by various controls when a client action is triggered are listed below:

The event name along with its attribute provides sufficient context for the client action.

How do I configure a client action?

There are multiple ways to configure client actions in Flock, all of which are described below.

Developer Dashboard

Use the developer dashboard to configure an action for a Slash CommandLauncher ButtonChat Tab Button or Attachment Picker. Once you have enabled the control, you can select the appropriate action and provide any additional info that's required.

Opening a WidgetImage Added

Attachment Buttons

Client actions for attachment buttons are configured while creating the corresponding Attachment. Use the action property of a button to set the appropriate ActionConfig object.

Code Block
languagejs
titleConfiguring Actions in Attachment Buttons
linenumberstrue
{
    "description": "attachment description",
    "views": {
        "widget": { "src": "<widget url>", "width": 400, "height": 400 }
    },
    "buttons": [{
        "name": "<button 1>",
        "icon": "<icon 1 url>", 
        "action": { "type": "openWidget", "desktopType": "modal", "mobileType": "modal", "url": "<action url>" },
        "id": "<button id 1>"
    }, {
        "name": "<button 2>", 
        "icon": "<icon 2 url>", 
        "action": { "type": "openBrowser", "url": "<url>", "sendContext": true }
        "id": "<button id 2>"
    }]
}

flock.js

Widgets can open another widget or the browser using flock.js.

Code Block
languagejs
titleOpening a widget using flock.js
flock.openWidget("<widget url>", "modal")
Code Block
languagejs
titleOpening the browser using flock.js
flock.openBrowser("<url>", true);

FlockML

FlockML's action tag can also be used to trigger client actions:

Code Block
languagexml
titleOpening a widget using FlockML
<flockml>click <action type="openWidget" url="<url>" desktopType="sidebar" mobileType="modal">here</action> to launch a widget.</flockml>
Code Block
languagexml
titleOpening the browser using FlockML
<flockml>click <action type="openBrowser" url="<url>" sendContext="true">here</action> to open the browser.</flockml>
Code Block
languagexml
titleSending event to the event listener using FlockML
<flockml>client <action type="sendEvent">here</action> to send an event to the event listener URL.</action>

Can client actions be triggered for users who haven't installed the app?

Yes. There are a couple of scenarios in which a Flock client might trigger a client action for a user who hasn't installed the app. These are:

...

Your app may send a message to a user who may not have installed your app, or a group where some users may not have installed your app. When these users interact with this message's attachment (e.g. click on an attachment button, or take some action inside the attachment widget), a client action is triggered.

If you verify that the validation event token sent with the corresponding event is really signed using your app's secret (you should always do this anyways), you can be certain that the event originated from Flock and was actually triggered by the user whose userId is included in the validation tokenevent token (even if they haven't installed the app).