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

Faceted Search with Stimulus and Turbo Frames
10 December 2024

Harness the power of Stimulus and Turbo Frames to drive a simple but powerful faceted search solution

Stimulus - Video Progress Tracker with LocalStorage
29 October 2024

Store ephemeral user state like video playback progress in localStorage

Stimulus - Image Upload Previews with `URL.createObjectURL`
17 September 2024

Create client-side previews of files using URL.createObjectURL

Cookies
essential