Editing embeds to preserve original content

I have this set into an embed builder in a listener.ts file:

        .setDescription(`Ansøgning fra <@${interactionUser.id}>`)
        .addFields(
            { name: 'Hvad er din alder?', value: alder, inline: true },
            { name: 'Hvor mange timer har du på FiveM?', value: timer, inline: true },
            { name: 'Hvor har du RP erfaring fra?', value: erfaring, inline: false },
            { name: 'Hvorfor vil du gerne ind på serveren?', value: hvorfor, inline: false },
            { name: 'Hvordan bidrager din karakter til serveren?', value: baggrund, inline: false })
        .setTimestamp()

        .setDescription(`Ansøgning fra <@${interactionUser.id}>`)
        .addFields(
            { name: 'Hvad er din alder?', value: alder, inline: true },
            { name: 'Hvor mange timer har du på FiveM?', value: timer, inline: true },
            { name: 'Hvor har du RP erfaring fra?', value: erfaring, inline: false },
            { name: 'Hvorfor vil du gerne ind på serveren?', value: hvorfor, inline: false },
            { name: 'Hvordan bidrager din karakter til serveren?', value: baggrund, inline: false })
        .setTimestamp()

This is where I handle editing the embed, I want to preserve the original fields added into it, when the application is accepted, so it keeps all the content, but just edits the embed, appending the accepted status above the original content. Does this mean I have to addFields all the content again when accepting below? If so, how do I do this? Or how can I achieve the desired functionality?

    // Create a new instance of EmbedBuilder
    const editedEmbed = new EmbedBuilder();

    // Edit the original embed to show the accepted message
    editedEmbed.setColor(0x7ACB0C)
            .setTitle('Accepteret!')
            .setDescription(`<@${user.id}> Allowlist ansøgning er blevet godkendt af <@${interaction.user.id}>!`)
            .setTimestamp();

    // Update the message with the modified embed
    await interaction.message.edit({ embeds: [editedEmbed] });

    // Create a new instance of EmbedBuilder
    const editedEmbed = new EmbedBuilder();

    // Edit the original embed to show the accepted message
    editedEmbed.setColor(0x7ACB0C)
            .setTitle('Accepteret!')
            .setDescription(`<@${user.id}> Allowlist ansøgning er blevet godkendt af <@${interaction.user.id}>!`)
            .setTimestamp();

    // Update the message with the modified embed
    await interaction.message.edit({ embeds: [editedEmbed] });

7 Replies

d.js toolkit•9mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by OP

d.js docs•9mo ago

Structures from the API cannot be edited directly. To do so, you can create a new structure (a builder) using the .from() method

const newEmbed = EmbedBuilder.from(embed).setTitle("title")
const newRow = ActionRowBuilder.from(row).addComponents(component)

const newEmbed = EmbedBuilder.from(embed).setTitle("title")
const newRow = ActionRowBuilder.from(row).addComponents(component)

Winnex•9mo ago

The setdescription is handled both places. When the application is first sent in, it sets the embed description to all my fields they should fill out. Then when I hit accept, the second codeblock I sent, it sets the description again, but here it removes the original application content. So here I would need to use the from() method? Since it's another file? This is my listener.ts file:

 const embed = new EmbedBuilder()
        .setColor(0xEB8922)
        .setTitle(interactionUser.id+"")
        .setThumbnail(image)
        .setDescription(`Ansøgning fra <@${interactionUser.id}>`)
        .addFields(
            { name: 'Hvad er din alder?', value: alder, inline: true },
            { name: 'Hvor mange timer har du på FiveM?', value: timer, inline: true },
            { name: 'Hvor har du RP erfaring fra?', value: erfaring, inline: false },
            { name: 'Hvorfor vil du gerne ind på serveren?', value: hvorfor, inline: false },
            { name: 'Hvordan bidrager din karakter til serveren?', value: baggrund, inline: false })
        .setTimestamp()

    const accept_Allowlist = new ButtonBuilder()
        .setCustomId('accept_Allowlist')
        .setLabel('Godkend')
        .setEmoji("✅")
        .setStyle(ButtonStyle.Success);
    const decline = new ButtonBuilder()
        .setCustomId('decline_Allowlist_request')
        .setLabel('Afvis')
        .setEmoji("❌")
        .setStyle(ButtonStyle.Danger);
    const decline_reson = new ButtonBuilder()
        .setCustomId('decline_reson_request')
        .setLabel('Afvis med grund')
        .setEmoji("❌")
        .setStyle(ButtonStyle.Danger);

    const row = new ActionRowBuilder()
        .addComponents(accept_Allowlist, decline, decline_reson);

    channel.send({ components: [row],  embeds: [embed]});
}

 const embed = new EmbedBuilder()
        .setColor(0xEB8922)
        .setTitle(interactionUser.id+"")
        .setThumbnail(image)
        .setDescription(`Ansøgning fra <@${interactionUser.id}>`)
        .addFields(
            { name: 'Hvad er din alder?', value: alder, inline: true },
            { name: 'Hvor mange timer har du på FiveM?', value: timer, inline: true },
            { name: 'Hvor har du RP erfaring fra?', value: erfaring, inline: false },
            { name: 'Hvorfor vil du gerne ind på serveren?', value: hvorfor, inline: false },
            { name: 'Hvordan bidrager din karakter til serveren?', value: baggrund, inline: false })
        .setTimestamp()

    const accept_Allowlist = new ButtonBuilder()
        .setCustomId('accept_Allowlist')
        .setLabel('Godkend')
        .setEmoji("✅")
        .setStyle(ButtonStyle.Success);
    const decline = new ButtonBuilder()
        .setCustomId('decline_Allowlist_request')
        .setLabel('Afvis')
        .setEmoji("❌")
        .setStyle(ButtonStyle.Danger);
    const decline_reson = new ButtonBuilder()
        .setCustomId('decline_reson_request')
        .setLabel('Afvis med grund')
        .setEmoji("❌")
        .setStyle(ButtonStyle.Danger);

    const row = new ActionRowBuilder()
        .addComponents(accept_Allowlist, decline, decline_reson);

    channel.send({ components: [row],  embeds: [embed]});
}

This is how I build the embed when editing it:

            // Create a new instance of EmbedBuilder
            const editedEmbed = new EmbedBuilder();


            // Edit the original embed to show the accepted message
            editedEmbed.setColor(0x7ACB0C)
                    .setTitle('Accepteret!')
                    .setDescription(`<@${user.id}> Allowlist ansøgning er blevet godkendt af <@${interaction.user.id}>!`)
                    .setTimestamp();

            // Update the message with the modified embed
            await interaction.message.edit({ embeds: [editedEmbed] });

            // ...

            // Create a new instance of EmbedBuilder
            const editedEmbed = new EmbedBuilder();


            // Edit the original embed to show the accepted message
            editedEmbed.setColor(0x7ACB0C)
                    .setTitle('Accepteret!')
                    .setDescription(`<@${user.id}> Allowlist ansøgning er blevet godkendt af <@${interaction.user.id}>!`)
                    .setTimestamp();

            // Update the message with the modified embed
            await interaction.message.edit({ embeds: [editedEmbed] });

            // ...

How can I apply the from() method here to retrieve the data from the other file and add them, so the original application data "stays"? I'm a bit lost here 😛 I can't seem to find any documentation on the from() method, how would I apply it in my example here? I got it all working, but the modal that pops up now, to prompt the interactionuser to submit a reason does not close after hitting submit, instead it waits and gives a "something went wrong, try again" error, but it doesn't fail. The message is sent properly to the applicant's DMs, and the original embed is updated with all the original content of the application + the reason that had been submitted. It just doesn't close the actual modal when submitting a reason, and gives that error, but it is 100% functional and works as intended otherwise.

axiprime•9mo ago

You have to resolve the interaction. I would suggest that you send an ephemeral reply or you can just deferUpdate

Winnex•9mo ago

How would i Apply those solutions in the code? I have an application that is as, handled by another typescript. Then my code when I hit the deny with reason button opens a modal, prompting for the reason. When I hit submit in that it doesn’t close, and I get the error, but the meaaage with the rejection and added reason is successful, the application embed is also changed to rejected and the content preserved while noting the reason at the end. But the reason modal doesn’t actually close and the error pops up when hitting submit. What line should I add to resolve/properly close the reason modal when I have hit submit.

axiprime•9mo ago

If you resolve the interaction, the modal will close.

Winnex•9mo ago

I've grown blind on this block of code, where do I need to implement the resolve to have it properly close the reason input modal after hitting submit?

    let reason; // Declare the variable outside the try-catch block

    try {
            const modal = new ModalBuilder()
                    .setCustomId('reasonInputModal')
                    .setTitle('Grund til afvisning');

            const reasonInput = new TextInputBuilder()
                    .setCustomId('typereason')
                    .setLabel("Grund til afvisning")
                    .setMaxLength(200)
                    .setMinLength(3)
                    .setRequired(true)
                    .setStyle(TextInputStyle.Short);

            modal.addComponents(
                    new ActionRowBuilder<TextInputBuilder>().addComponents(reasonInput),
            );

            await interaction.showModal(modal);

            const submission = await interaction.awaitModalSubmit({ time: 60000 });

            // Get the input value from the submission
            reason = submission.fields.getTextInputValue('typereason');

            // Fetch user object
            const userObj = await client.users.fetch(user.id);

            // Send rejection message to the user
            await userObj.send({
                    embeds: [new EmbedBuilder()
                            .setColor(0xcb380c)
                            .setTitle('Afvist.')
                            .setDescription(`Din ansøgning til allowlist er desværre blevet afvist.\n\nTypisk er det grundet ansøgningen mangler vigtig fyld, og derved ikke giver os indblik i kvaliteten af ansøgningen og dig som spiller.\n\nBemærkninger fra afvisningen:\n${reason}\n`)
                            .setThumbnail('https://i.imgur.com/UX6VVZz.png')
                            .setFooter({ text: 'Mvh.' })
                            .setTimestamp()
                    ]
            });
    } catch (error) {
            console.error(`Fejl ved afsendelse af privat besked: ${error}`);
    }

    let reason; // Declare the variable outside the try-catch block

    try {
            const modal = new ModalBuilder()
                    .setCustomId('reasonInputModal')
                    .setTitle('Grund til afvisning');

            const reasonInput = new TextInputBuilder()
                    .setCustomId('typereason')
                    .setLabel("Grund til afvisning")
                    .setMaxLength(200)
                    .setMinLength(3)
                    .setRequired(true)
                    .setStyle(TextInputStyle.Short);

            modal.addComponents(
                    new ActionRowBuilder<TextInputBuilder>().addComponents(reasonInput),
            );

            await interaction.showModal(modal);

            const submission = await interaction.awaitModalSubmit({ time: 60000 });

            // Get the input value from the submission
            reason = submission.fields.getTextInputValue('typereason');

            // Fetch user object
            const userObj = await client.users.fetch(user.id);

            // Send rejection message to the user
            await userObj.send({
                    embeds: [new EmbedBuilder()
                            .setColor(0xcb380c)
                            .setTitle('Afvist.')
                            .setDescription(`Din ansøgning til allowlist er desværre blevet afvist.\n\nTypisk er det grundet ansøgningen mangler vigtig fyld, og derved ikke giver os indblik i kvaliteten af ansøgningen og dig som spiller.\n\nBemærkninger fra afvisningen:\n${reason}\n`)
                            .setThumbnail('https://i.imgur.com/UX6VVZz.png')
                            .setFooter({ text: 'Mvh.' })
                            .setTimestamp()
                    ]
            });
    } catch (error) {
            console.error(`Fejl ved afsendelse af privat besked: ${error}`);
    }

    // Create a new instance of EmbedBuilder
    const editedEmbed = new EmbedBuilder();
    const oldEmbed = interaction.message.embeds[0];

    // Assuming oldEmbed has a "fields" property containing an array of fields
    const originalFields = oldEmbed.fields;

    // Create a string to hold the original fields
    let originalFieldsString = '';

    // Iterate over the originalFields array and append each field's name and value to the string
    originalFields.forEach(field => {
            originalFieldsString += `**${field.name}\n** ${field.value}\n\n`;
    });

    // Edit the original embed to show the rejected message along with the original data
    editedEmbed.setColor(0xcb380c)
            .setTitle('Afvist med grund!')
            .setDescription(`<@${user.id}> Allowlist ansøgning er blevet afvist af <@${interaction.user.id}>!\n\n${originalFieldsString}**Bemærkninger fra afvisningen:**\n${reason}`)
            .setTimestamp();

    // Remove buttons below the application embed when rejected
    const components = [];

    // Update the message with the modified embed and removed components
    await interaction.message.edit({ embeds: [editedEmbed], components });
}

    export { onClickDeclineReasonAllowlist };

    // Create a new instance of EmbedBuilder
    const editedEmbed = new EmbedBuilder();
    const oldEmbed = interaction.message.embeds[0];

    // Assuming oldEmbed has a "fields" property containing an array of fields
    const originalFields = oldEmbed.fields;

    // Create a string to hold the original fields
    let originalFieldsString = '';

    // Iterate over the originalFields array and append each field's name and value to the string
    originalFields.forEach(field => {
            originalFieldsString += `**${field.name}\n** ${field.value}\n\n`;
    });

    // Edit the original embed to show the rejected message along with the original data
    editedEmbed.setColor(0xcb380c)
            .setTitle('Afvist med grund!')
            .setDescription(`<@${user.id}> Allowlist ansøgning er blevet afvist af <@${interaction.user.id}>!\n\n${originalFieldsString}**Bemærkninger fra afvisningen:**\n${reason}`)
            .setTimestamp();

    // Remove buttons below the application embed when rejected
    const components = [];

    // Update the message with the modified embed and removed components
    await interaction.message.edit({ embeds: [editedEmbed], components });
}

    export { onClickDeclineReasonAllowlist };

Thank you so, so much!

Gaming

Programming

Editing embeds to preserve original content