action-list

This action allows for multiple actions to be run while only requiring the user to press a single button. The actions can be set to run sequentially or executed as a bulk functionality.

Configuration options

An action list can be set up in various ways:

1. As a primary action button.

2. In onPress/onChange events - usually triggered by list or jig.list related items.

3. In onRefresh/onFocus events on any type of jig.

Examples and code snippets

Action-list as a primary action button

Action List

This example shows an action-list with two actions. The first action is submit-form, which will save the entered data, and the second action, go-back, will redirect us back to the previous page.

Example: See the full example of action-list in GitHub

action-list

title: Action-list example
type: jig.default
description: The first action will submit the form and the second action will redirect us back to the previous page.

actions:
  - children:
    - type: action.execute-entity
      options:
        title: Create Record
        provider: DATA_PROVIDER_DYNAMIC
        entity: default/employees
        method: save
        data:
          firstname: [email protected]
          lastname: [email protected]
          phone:  [email protected]
        onSuccess: 
          type: action.go-back
            
children:
  - type: component.form
    instanceId: simple-form
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: firstname
          options:
            label: First name
        - type: component.text-field
          instanceId: lastname
          options:
            label: Last name
        - type: component.text-field
          instanceId: phone
          options:
            label: Phone number
            keyboardType: decimal-pad

Action list as onPress/onChange

Action-list with onPress

In this example, we have an action list with the onPress function in the list-item. The first action will color the last chosen item and the second action will sync our entity with the database and we can use them for further actions.

Example: See the full example of action-list in onPress in GitHub. See the full example of action-list in onChange in GitHub

action-list-onPress

item: 
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    progress: [email protected] = @ctx.solution.state.activeItemId ? 1 :0
    color:
      - when: [email protected] = @ctx.solution.state.activeItemId ? true :false
        color: color2
    onPress: 
      type: action.action-list
      options:
        actions:
          - type: action.set-state
            options:
              state: [email protected]
              value: [email protected]
          - type: action.sync-entities
            options:
              provider: DATA_PROVIDER_DYNAMIC
              entities:
                - default/employees

action-list-onChange

Action list as onRefresh/onFocus

In this example when we refresh the jig/jig is focused, we call set-state and sync-entities actions.

Example: See the full example of the action list onRefresh in GitHub. See the full example of the action list onFocus in GitHub.

action-list-onRefresh

onRefresh: 
  type: action.action-list
  options:
    isSequential: true
    actions:
      - type: action.set-state
        options:
          state: [email protected]
          value: refreshed
      - type: action.sync-entities
        options:
          provider: DATA_PROVIDER_DYNAMIC
          entities:
            - default/employees

action-list-onFocus