Stimulus - Action Parameters

Use declaratively specified action parameters in the DOM to move elements between parents.

View Solution on Patreon
Stimulus - Action Parameters

Premise

Passing contextual information to Stimulus actions needed a bit of manual wiring of DOM data attributes. With action parameters, there’s an officially sanctioned way which we are going to explore now.

Starting Point

As a trivial example, we are looking at a simple ticket system where we want to triage incoming tickets. The user should be able to assign an issue to the Infrastructure, Devops, Mobile, and QA teams.

Challenge

Create a Stimulus controller that allows to move cards from the “Inbox” column to other ones using action parameters. Here’s a sneak peek:

A Kanban Board with 5 columns

The Stackblitz example contains four cards that are already wired up to the ticket Stimulus controller:

https://stackblitz.com/edit/stimulus-action-parameters?file=index.html%3AL58,controllers%2Fticket_controller.js

All that’s left to do for you is implement the action in the controller, and add the corresponding data attributes to the menu items:

https://stackblitz.com/edit/stimulus-action-parameters?file=index.html,controllers%2Fticket_controller.js%3AL4

Teaser

Currently, this example does not persist any changes to the database. How would you tackle this?

More from

Stimulus - Orchestrate Complex UI Changes with Target Callbacks
07 May 2024

Use Stimulus target callbacks to dynamically update parts of your UI

Stimulus - Progressive Image Loading with Blurhash
23 April 2024

Improve Largest Contentful Paint using image blurhashes and Stimulus

Hotwire Combobox with Real Time Data
12 March 2024

Update combobox options using Websockets and Stimulus outlets

Cookies
essential