Advanced Actions Invoker

Overview

Advanced Actions Invoker is a powerful tool for creating and executing complex GitHub Actions workflow forms. It consists of two complementary components:

• Composer - A visual drag-and-drop form builder for designing workflow dispatch forms
• Chrome Extension - A browser extension that enhances GitHub's workflow dispatch interface with your custom forms

Together, these tools enable you to create sophisticated, validated input forms for your GitHub Actions workflows, making it easier for teams to trigger workflows with complex configuration requirements.

Getting Started

Opening the Composer

1. Navigate to zektec.com/advanced-actions-invoker
2. The Composer interface will load, displaying a palette of field types on the left and a canvas for building your form
3. You can start building immediately - no account or login required

Installing the Chrome Extension

1. Click the "Install Chrome Extension" button on the Advanced Actions Invoker page
2. You'll be directed to the Chrome Web Store
3. Click "Add to Chrome" to install the extension
4. Once installed, the extension will automatically enhance GitHub Actions workflow dispatch forms

Building Forms with the Composer

Adding Fields

To add a field to your form:

1. Find the field type you want in the palette at the top (Text, Number, Date, Dropdown, etc.)
2. Click and drag the field type to the canvas
3. Drop it where you want it to appear - you can insert fields at any position, not just at the end
4. A visual indicator will show you where the field will be placed

Configuring Field Properties

Each field can be customized with various properties:

Label

Click directly on the field's label text to edit it inline. This is what users will see when filling out the form.

Required/Optional Status

• Fields are optional by default, indicated by "(optional)" next to the label
• To make a field required, click the menu button (three dots) and select "Mark Required"
• Required fields show a red asterisk (*) next to the label
• The required/optional indicator is always visible - no need to open a menu to see the status

Description

• Click the menu button and select "Set Description"
• Enter helper text that explains what the field is for
• Descriptions appear below the field label in a lighter, smaller font
• Great for providing examples or clarifying requirements

Default Values

• Click the menu button and select "Set Default Value"
• Enter the value you want to pre-fill
• For date fields, use format: YYYY-MM-DD (e.g., 2025-11-24)
• For time fields, use format: HH:MM (e.g., 14:30)
• Default values appear in the preview and in the final form

Configuring Select Fields (Dropdown/Radio)

When you add a Dropdown or Radio field, you can customize its options:

1. Click the menu button on the dropdown/radio field
2. Select "Edit Options"
3. Enter options as a comma-separated list (e.g., "Option 1, Option 2, Option 3")
4. Click save to apply the options
5. The options will immediately appear in the preview

Note: Currently options must be edited as comma-separated text. Advanced option management (add, edit, delete, reorder individual options) is planned for a future update.

Configuring Range Fields

For Range (slider) fields:

1. Click the menu button on the range field
2. Select "Set Range (Min/Max)"
3. Enter values as "min, max" (e.g., "0, 100")
4. The slider will use these bounds

Reordering Fields

You can easily reorder fields using drag and drop:

1. Hover over a field - you'll see a drag handle (six dots) on the left
2. Click and hold the drag handle
3. Drag the field up or down to its new position
4. A colored line will show where the field will be placed when you drop it
5. Release to place the field in its new position

Removing Fields

To remove a field:

1. Click the menu button (three dots) on the field
2. Select "Remove Field"
3. The field will be immediately removed

Previewing Your Form

As you build your form in the Composer, a live preview appears on the right side of the screen. The preview shows exactly how your form will look and behave, including:

• All field labels and descriptions
• Required field indicators
• Default values
• Dropdown options
• Field validation

Try filling out the preview to test your form's behavior before exporting it.

Exporting Your Configuration

Once you're satisfied with your form:

1. Use the Export panel to copy the JSON configuration (schema, layout, data)
2. Copy or download the generated workflow YAML that wires the inputs into workflow_dispatch
3. Paste the YAML into your repository and commit
4. You can now trigger the workflow in GitHub with the enhanced form provided by the Chrome Extension

Using the Chrome Extension

Basic Usage

1. Navigate to a GitHub repository
2. Go to the "Actions" tab
3. Select a workflow that supports workflow_dispatch
4. Click "Run workflow"
5. The Chrome Extension will detect the workflow dispatch form and look for your composer inputs
6. If `schema` and `layout` defaults are present, it renders the enhanced form and keeps GitHub inputs in sync
7. Fill out the enhanced form and click "Run workflow"
8. If configuration is missing or invalid, a warning is shown and GitHub's native inputs remain usable

Configuration

The Chrome Extension uses the JSON configuration you create in the Composer. To use your custom forms:

1. Create your form in the Composer and copy the workflow YAML from the Export panel
2. Add the generated inputs to your workflow_dispatch block:
   • schema: JSON schema defining validation
   • layout: UI schema controlling the layout
   • data: Optional default values for the form
   • style: Optional styling preferences
3. Commit the workflow and reload the GitHub Actions page
4. The extension will automatically use your custom form when you trigger the workflow

For detailed information about the extension's architecture and advanced features, see the extension's README in the repository.

Available Field Types

Tips & Best Practices

• Use descriptions liberally: Help users understand what each field is for
• Set sensible defaults: Pre-fill common values to speed up form completion
• Mark required fields: Clearly indicate which fields must be filled
• Group related fields: Order fields logically to create a natural flow
• Test in preview: Always test your form in the preview before exporting
• Keep it simple: Only include fields that are actually needed

Troubleshooting

Fields not appearing in preview

Make sure you've set a label for the field. Fields without labels may not render correctly.

Default values not showing

Check that you've entered the value in the correct format for the field type (especially for dates and times).

Dropdown options not saving

Ensure you're entering options as comma-separated values. Spaces around commas are automatically trimmed.

Extension not working on GitHub

Make sure the extension is enabled in chrome://extensions and that you've refreshed the GitHub page after installing.

Support & Feedback

For questions, bug reports, or feature requests:

• Email: [email protected]
• Visit: zektec.com