Chapitre 12 - Les modaux

Nous rejoindre sur Discord

construction bouton

module.exports = {
    data: new SlashCommandBuilder().setName('fomulaire').setDescription('Afficher un formulaire !'),
    async execute(interaction) {
        const button = new ButtonBuilder()
            .setCustomId('showForm')
            .setLabel('Afficher mon formulaire')
            .setStyle(ButtonStyle.Danger);

        const row = new ActionRowBuilder().addComponents(button);

        await interaction.reply({
            content: 'Afficher le formulaire',
            components: [row],
        });
    },
};

affichage formulaire

module.exports = {
    name: 'showForm',
    async execute(interaction) {
        const modal = new ModalBuilder().setCustomId('userInfo').setTitle('Mon premier formulaire');

        const firstname = new TextInputBuilder()
            .setCustomId('firstname')
            .setLabel('Prénom')
            .setPlaceholder('votre prénom')
            .setStyle(TextInputStyle.Short);

        const lastname = new TextInputBuilder()
            .setCustomId('lastname')
            .setLabel('Nom')
            .setPlaceholder('Votre nom')
            .setStyle(TextInputStyle.Short);

        const description = new TextInputBuilder()
            .setCustomId('description')
            .setLabel('Entrer une description')
            .setPlaceholder('Votre description...')
            .setStyle(TextInputStyle.Paragraph);

        const firstRow = new ActionRowBuilder().addComponents(firstname);
        const secondRow = new ActionRowBuilder().addComponents(lastname);
        const thirdRow = new ActionRowBuilder().addComponents(description);

        modal.addComponents(firstRow, secondRow, thirdRow);

        await interaction.showModal(modal);
    },
};

réception modal

module.exports = {
    name: 'userInfo',
    async execute(interaction) {
        const firstname = interaction.fields.getTextInputValue('firstname');
        const lastname = interaction.fields.getTextInputValue('lastname');
        const description = interaction.fields.getTextInputValue('description');

        const response = `**${firstname} ${lastname}**\n> ${description}`;
        interaction.reply({
            content: response,
        });
    },
};