Action Framework

The Action Framework is a collection of actions used to interact with data, the user interface, data sources, and page logic. The framework also refers to the variety of triggers—row actions, buttons, model actions, etc.—where these actions are configured.

When to use the Action Framework

Any interaction involving data or the user interface is a good candidate for the Action Framework. For example:

  • Create a single button in a popup that both saves model data and closes the popup.
  • Create a row action that opens a popup, applies specified model conditions, and updates fields—all with one click.
  • Create a button that toggles a component on or off, or opens and closes a sliding pane.
  • Build an action script that creates a document in the cloud, sends an email, and updates a connected record.

Using the Action Framework

A few action concepts:

image-0
Actions are configured on specific trigger areas (such as buttons representing row, global, or mass actions) within a Skuid page. In some trigger areas, you can specify interactions: specific ways a user interfaces with that trigger element. Within the interaction, create a set of actions.

A list of actions is an action script. A script (or part of a script) that has been saved for reuse is an action sequence.

Warning

Context is critical with actions: they may only work with a specific record or set of records— and not work with others.

Action trigger areas

Trigger areas can be set:

  • On the page through interactions (clicks, presses, or swipes).

  • On components using row, global, or mass actions. The Action Framework is available in the following components:

  • Table component (row, global, and mass actions)

  • Wizard component (buttons)

  • Header component (buttons)

  • List component (Item On-Click Action Type)

  • Deck component (click, swipe, and press interactions)

  • Image component (click, swipe, and press interactions)

  • Tab Set and Tab Container component (Tab Set and Tab Container actions)

  • On models through model actions.

    Note

    Model actions are added directly to the model.

Add actions

Add actions to pages and components by selecting an “actionable” element to open its properties and access the Actions or Interactions tab. (Most components have at least one element that can have actions added to it.)

To add actions to a page [[]]

  1. Click the page’s border, or the Skuid Page header.
  2. Click the Interactions tab in the Properties pane.

To add actions to a Deck or List component [[]]

  1. Click the deck.
  2. Click the Interactions tab in the Properties pane.

To add actions to a Table or List component [[]]

  • On the component, click Add feature:

    • add Add row actions or

    • add Add global actions (Table only) or

    • add Add mass actions

      • Click the new action to open the Actions tab and edit:

        • Action type: Several action types are available; select Run Multiple Actions to create an action script via the Actions tab.
        • Action label: A helpful, plain language label for the action.
        • Action icon (optional): An icon for the action.

To add actions to a button [[]]

  1. Click the button on the canvas.
  2. Click the Actions tab in the Properties pane.

To add actions to a Navigation item [[]]

  • Click the navigation item, then click the Actions tab.

Once the Action tab is displayed

  1. Click add Add action.
  2. Click the newly created action.
  3. Set its Action type.
  4. Configure any properties associated with the action type.
  5. Repeat as necessary for each action in the action script.

Delete actions

To remove an action:

  1. Click dots-vertical on the action.
  2. In the more actions menu, click Remove.

Note

Whoops—turns out you needed that after all. Undo the removal using undo Undo.

Skip selected actions

When troubleshooting a series of actions, it’s helpful to isolate individual actions to determine which one is causing problems. You can choose to skip an action to see how eliminating it affects the series, and resume that action later.

Skip an action

  1. Click dots-vertical on the action.
  2. In the more actions menu, click Skip action. The action is flagged as Skipped.

When the actions on the list are executed at run time, the flagged action is ignored, and Skuid proceeds to execute the next action in the list.

Resume an action

  1. Click dots-vertical on the action.
  2. In the more actions menu, click Enable action.

When the actions on the list are executed at run time, this action is executed.

Using Action triggers

Note

When you add row, global, or mass actions to a Table component, the resulting buttons possess the same Button and Button Group properties as those for Ink Button Set.

Row Actions

Row actions are record-level actions represented by row buttons that use a record on the component as the context. Use Row Actions to add actions that affect individual records, such as emailing a lead, or opening a Table drawer to see more details on an account.

Note

Use the Show/hide menu action to add a dropdown menu to the row action.

Global actions

Global actions are component-level actions represented by buttons at the top of the component. These actions do not receive context (data from a specific row or area). Instead, they are used to activate more generalized sets of actions (like opening a popup containing the Wizard component to walk the end user through creating a new record).

Button Set or Header components are often used in lieu of global actions. However, if you want to reinforce that a set of actions is specifically associated with the component’s data, use a global action.

Mass actions

Mass actions display when an end user selects a row in a component and perform their action script upon those selected rows. Each selected row becomes context for the action. To allow users to select multiple records and then to perform actions on them—for example, updating or deleting multiple records—use a mass action.

Note

Located at the top of the component, mass action buttons only display when one or more rows are selected; the Mass Action then applies to all selected rows.

Interactions

Interactions employ certain Action Framework sequences based on typical ways an end user may interact with a page element or component. Set interactions on the Queue, Deck, and Image components, and on the Skuid page itself via the Interactions tab.

By configuring interactions, you can design pages to be used on both desktop and/or mobile devices. This lets you create (for example) an interaction where the mobile user swipes the page from left to right and opens a left-side navigation bar; the same user on a desktop might click an on-page icon to open the same navigation bar.

Click add Add interaction, then edit:

  • Action type: Several action types are available:

    • Click: Tapping an element on mobile, clicking on desktop

    • Swipe: Tapping and dragging an element on mobile. You can also clarify which direction the swipe action applies to:

      • Either
      • Left
      • Right

      Note

      It’s common to use swipe interactions on the page itself; they can be particularly useful for mobile apps.

    • Press: Tapping/clicking and holding and element.

Note

If designing specifically for a mobile app, choose Swipe or Press interactions.

Icons for actions

When creating actions, Skuid may provide the option to identify the action with an icon. Icon sets available in Skuid include:

Note

The Silk icon set is only available when using the Skuid Classic theme, or when using themes that are based on the Classic theme.

Icon best practices

To maintain consistency through a Skuid page, use icons from the same icon set.

Similarly, when possible, use the same icon set throughout an app, both for consistency and performance.

Warning

Using more than one icon set on a page may result in a slight performance lag. The more icon sets employed on a page, the more noticeable the lag.