Menus de Sélection

Les menus de sélection sont l'une des classes MessageComponent, qui peuvent être envoyées via des messages ou des réponses d'interaction.

Construction des menus de sélection de chaîne

Le type de menu de sélection "standard" et le plus personnalisable est le menu de sélection de chaîne. Pour créer un menu de sélection de chaîne, utilisez les classes StringSelectMenuBuilder et StringSelectMenuOptionBuilder.

Si vous êtes un fan de Pokémon, vous avez probablement fait une sélection assez similaire à cet exemple à un moment donné de votre vie !

const { StringSelectMenuBuilder, StringSelectMenuOptionBuilder, SlashCommandBuilder } = require('discord.js');

module.exports = {
	// data: new SlashCommandBuilder()...
	async execute(interaction) {
		const select = new StringSelectMenuBuilder()
			.setCustomId('starter')
			.setPlaceholder('Faites une sélection !')
			.addOptions(
				new StringSelectMenuOptionBuilder()
					.setLabel('Bulbasaur')
					.setDescription('Le Pokémon Graine de type Herbe/Poison dual.')
					.setValue('bulbasaur'),
				new StringSelectMenuOptionBuilder()
					.setLabel('Charmander')
					.setDescription('Le Pokémon Lézard de type Feu.')
					.setValue('charmander'),
				new StringSelectMenuOptionBuilder()
					.setLabel('Squirtle')
					.setDescription('Le Pokémon Petite Tortue de type Eau.')
					.setValue('squirtle'),
			);
	},
};

Envoi des menus de sélection

Pour envoyer votre menu de sélection, créez une ligne d'action et ajoutez les boutons comme composants. Ensuite, envoyez la ligne dans la propriété components de InteractionReplyOptions (étend BaseMessageOptions).

const {
	ActionRowBuilder,
	StringSelectMenuBuilder,
	StringSelectMenuOptionBuilder,
	SlashCommandBuilder,
} = require('discord.js');
module.exports = {
	// data: new SlashCommandBuilder()...
	async execute(interaction) {
		const select = new StringSelectMenuBuilder()
			.setCustomId('starter')
			.setPlaceholder('Faites une sélection !')
			.addOptions(
				new StringSelectMenuOptionBuilder()
					.setLabel('Bulbasaur')
					.setDescription('Le Pokémon Graine de type Herbe/Poison dual.')
					.setValue('bulbasaur'),
				new StringSelectMenuOptionBuilder()
					.setLabel('Charmander')
					.setDescription('Le Pokémon Lézard de type Feu.')
					.setValue('charmander'),
				new StringSelectMenuOptionBuilder()
					.setLabel('Squirtle')
					.setDescription('Le Pokémon Petite Tortue de type Eau.')
					.setValue('squirtle'),
			);

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

		await interaction.reply({
			content: 'Choisissez votre starter !',
			components: [row],
		});
	},
};

Options du menu de sélection de chaîne

Les options du menu de sélection de chaîne sont définies de manière personnalisée par l'utilisateur, comme le montre l'exemple ci-dessus. Au minimum, chaque option doit avoir son label et sa value définis. Le label est affiché à l'utilisateur, tandis que la valeur est incluse dans l'interaction envoyée au bot.

En plus de ceux-ci, chaque option peut être améliorée avec une description ou un emoji, ou peut être définie pour être sélectionnée par défaut.

const select = new StringSelectMenuBuilder().setCustomId('select').addOptions(
	new StringSelectMenuOptionBuilder()
		.setLabel('Option')
		.setValue('option')
		.setDescription('A selectable option') 
		.setEmoji('123456789012345678') 
		.setDefault(true), 
);

Menus de sélection auto-remplissage

Bien que le menu de sélection de chaîne avec ses options définies par l'utilisateur soit le plus personnalisable, il existe quatre autres types de menus de sélection qui se remplissent automatiquement avec leurs entités Discord correspondantes, un peu comme les options de commandes slash. Ceux-ci sont :

• UserSelectMenuBuilder
• RoleSelectMenuBuilder
• MentionableSelectMenuBuilder
• ChannelSelectMenuBuilder

Le ChannelSelectMenuBuilder peut être configuré pour afficher uniquement les types de canal spécifiques en utilisant ChannelSelectMenuBuilder#setChannelTypes.

Sélections multiples

Là où les options de commandes slash font défaut, c'est dans leur limitation de sélection unique sur les types d'options Utilisateur, Rôle et Canal. Les menus de sélection peuvent supporter ce cas d'usage via BaseSelectMenuBuilder#setMinValues et BaseSelectMenuBuilder#setMaxValues. Lorsque ces valeurs sont définies, les utilisateurs peuvent sélectionner plusieurs éléments, et l'interaction sera envoyée avec toutes les valeurs sélectionnées seulement lorsque l'utilisateur clique en dehors du menu de sélection.

module.exports = {
	// data: new SlashCommandBuilder()...
	async execute(interaction) {
		const userSelect = new UserSelectMenuBuilder()
			.setCustomId('users')
			.setPlaceholder('Sélectionnez plusieurs utilisateurs.')
			.setMinValues(1) 
			.setMaxValues(10); 

		const row1 = new ActionRowBuilder().addComponents(userSelect);

		await interaction.reply({
			content: 'Sélectionnez les utilisateurs :',
			components: [row1],
		});
	},
};