Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.x] Add field actions modals #10833

Closed
wants to merge 23 commits into from

Conversation

jacksleight
Copy link
Contributor

@jacksleight jacksleight commented Sep 24, 2024

Summary

This PR builds upon #10352 and adds the ability to easily create confirmation/form modals from within the action run method, allowing you to prompt for user input before performing the rest of the action logic:

CleanShot.2024-09-24.at.18.33.14.mp4

The action for that looks like this:

Statamic.$actions.add('text-fieldtype', {
    title: 'Translate',
    run: async ({ value, update }) => {
        const { confirmed, values, close } = await Statamic.$actions.modal({
            title: 'Translate',
            keepOpen: true,
            fields: {
                language: {
                    type: 'select',
                    display: 'Language',
                    instructions: 'Please select a language',
                    validate: 'required',
                    options: {
                        en: 'English',
                        es: 'Spanish',
                        fr: 'French',
                        de: 'German',
                        it: 'Italian',
                    }
                },
            }, 
        });
        if (!confirmed) {
            return;
        }
        const translated = await translationService({
            text: value,
            lang: values.language,
        });
        update(translated);
        close();
    },
});

The fields are passed to the backend to resolve a full blueprint for the form. The values are also passed to the backend for validation. The return data contains both pre-processed and raw values, as different use cases may need different types of values.

The keepOpen flag allows you to keep the modal and it's busy state visible after it's confirmed. This is useful if you then need to perform other long-running tasks and want to show some feedback to the user. Without it the modal just closes as normal on confirm.

If no fields are specified a simple confirmation modal is displayed.

@jacksleight jacksleight changed the title Add field actions modals [5.x] Add field actions modals Sep 24, 2024
@jacksleight jacksleight marked this pull request as ready for review November 6, 2024 15:46
@jacksleight
Copy link
Contributor Author

jacksleight commented Nov 6, 2024

This is ready for review and builds on top of #10352. Should ideally be merged along with that one.

jasonvarga added a commit that referenced this pull request Nov 15, 2024
Co-authored-by: Jack Sleight <jacksleight@gmail.com>
@jasonvarga
Copy link
Member

I've opened #11129 to replace this. Figured that'd be easier than to bring over all the updates from #10352.

@jasonvarga jasonvarga closed this Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants