Action Variable

An Action (also known as Action variable) is a special variable type that stores executable action flows. It enables dynamic callback functionality, allowing components to expose actions that can be customized by their parent contexts or other parts of your application.

When to Use

Use an Action variable when you need to:

• Create reusable components with customizable behavior

• Pass callback functions between components

• Implement event delegation patterns

• Build dynamic user interfaces with configurable actions

• Enable parent-child component communication

Creating an Action Variable

Step 1: Declare the Action Variable

1. Navigate to Variables in your project

2. Click Add Variable

3. Select Action as the type

4. Give it a descriptive name (e.g., onSubmit, onItemClick, handleValidation)

5. Define the parameter list - a list of variables that this action accepts:

   • Each parameter has a name (e.g., formData, userId, callbackData)

   • Each parameter has a type (String, Number, Boolean, JSON, List, Controllers, or any supported type except Action)

//ToDO:sdds

Step 2: Initialize in Execute Callback

In the same entity (page/component) where you declare the variable, add an Execute Callback action to initialize it. The parameter list you defined becomes the arguments:

//ToDO:sdds

Execute Callback:
  Action Name: ${onSubmit}
  Arguments: [
    {
      "argName": "formData",  // matches parameter name
      "argValue": ${currentFormData}  // value of the specified type
    }
  ]

The argName corresponds to the parameter names you defined, and argValue must match the type you specified for each parameter.

Important: When Action variables are executed within components, the parameters are accessible through the args object using double curly braces for template interpolation (e.g., {{args.formData}}, {{args.userId}}).

Step 3: Execute When Using Components

When using components that accept action callbacks, define the action flow as an array of action objects. Within these actions, you can access the parameters through the args object using double curly braces.

The args object contains all parameters defined in the Action variable, accessible by their parameter names (e.g., {{args.formData}}, {{args.userId}}).

Action Methods

Action variables don't have traditional methods like controller variables. Instead, they store and execute ActionFlow sequences that you define using the Execute Callback action.

Best Practices

• Descriptive naming: Use clear names like onSubmit, onItemClick, handleValidation

• Consistent arguments: Define consistent parameter structures across similar actions

• Type safety: Choose appropriate types for parameters (String for IDs, JSON for complex data)

• Parameter naming: Use descriptive parameter names that indicate their purpose

• No Action parameters: Action variables cannot have parameters of type Action

• Error handling: Include error handling in your action flows

• Documentation: Document expected parameters and their types

• Args object access: Use {{args.parameterName}} to access Action variable parameters in component action flows (note the double curly braces)

• Parameter validation: Always validate that expected parameters exist in the args object before using them

Troubleshooting

Callback Not Executing

• Ensure the Action variable is properly declared

• Check that Execute Callback action is configured correctly

• Verify the action name reference matches the variable name

• Confirm arguments are properly structured

Arguments Not Passed Correctly

• Check argument names match the parameter names you defined

• Ensure argument values match the types you specified for each parameter

• Verify parameter definitions are complete (name and type for each)

• Ensure argument values are accessible in the execution context

Type Mismatch Errors

• Confirm argValue types match the parameter type definitions

• Check that complex types (JSON, List) are properly structured

• Verify that required parameters are always provided

• Remember that Action type cannot be used as a parameter type

Component Not Receiving Callback

• Confirm the component accepts the callback property

• Check that the action variable is passed correctly as a parameter

• Ensure the component's action flows access parameters via the args object using double curly braces {{args.parameterName}}

• Verify parameter definitions match what the component expects

• Check that the Action variable is properly initialized with Execute Callback

Related Documentation

• Execute Callback Action - Execute stored action flows

• Variables Overview - Learn about all variable types

• Component Communication - Building reusable components

• Action Flows - Understanding action sequences