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:

The Action Framework is available in the following components:

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

  • Calendar component (on-click)

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

Row actions use standard display logic options to display or hide rows.

Render conditions [[]]

These conditions govern when an element or component will display.

  • Render if…: The conditions that must be met to enable the element’s display.

    • ALL conditions are met
    • ANY conditions are met
    • Custom logic is met
      • Condition logic: The custom logic for grouping and applying one or more conditions.
  • If hidden, model field changes should be: (only available on Field rendering tabs) If the field is hidden by conditional rendering, this property determines whether any changes made to this field (via Action Framework or JavaScript) are saved in the model, or canceled.

    Note

    Depending on the needs of your org, it could be bad user experience to update fields without direct user input especially when that user may be unaware of they are doing so.

    • Retained in model (the default)
    • Cancelled

Enable conditions [[]]

These conditions govern when a displayed element may or may not be enabled for use.

  • Enable if…: The model conditions that must be met to enable the field’s editing.
    • ALL conditions are met
    • ANY conditions are met
    • Custom logic is met
      • Condition logic: The custom logic for grouping and applying one or more conditions.
  • Message to show when disabled: A brief explanation for why the field is disabled.

Style variant conditions [[]]

These conditions govern which style variant is applied and displayed on a component or element.

Note

You can create one, or more, style variant conditions and set each individually.

  • Click add Add a new condition to add a new style variant condition.
  • Then, click the new style variant condition and configure.

When Skuid executes the display logic, the style variant conditions are evaluated in order.

  • Use this Style Variant if…: The model conditions that must be met to enable the styling.

    • ALL conditions are met
    • ANY conditions are met
    • Custom logic is met
      • Condition logic: The custom logic for grouping and applying one or more conditions.
    • Style variant: The style variant to be rendered if condition(s) are met.

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.

Interactions can be configured via the Interactions tab on:

  • Deck components
  • List components
  • Image components
  • Fields within Form and Table components
  • The Skuid page

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

Icons for actions

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

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.