Search code examples
javadiscorddiscord-jda

JDA Embed multiple Pages


So I am currently developing a Discord Bot in Java and cant figure out how to create an Embed with multiple pages. In Python this is rather simple, but for Java JDA I did not find any videos or information on how to create the specified Embed.

Embed with multiple pages

It should look like in the image, where you can get with the arrow to the next page and back.


Solution

  • You need to manually create a pagination system. Here's my approach:

    Create for example a SlashCommand and respond with an Embed containing buttons and the buttons have specific id's like page_1 or page_2. The number would tell you the page number this button is switching to. Then you would need to split the string in the ButtonClickEvent to get the page number you're switching to. Then just run some kind of switch case and edit the message with the correct page embed. Here's some example code:

    PageCommand.java

    public void onSlashCommand(SlashCommandEvent e) {
    
        e.deferReply().queue();
    
        EmbedBuilder msg = new EmbedBuilder();
        msg.setTitle("Pagination");
        msg.setDescription("Hello World! This is the first page");
        msg.setFooter("Page 1/4");
        msg.setColor(0x33cc33);
        List<Button> buttons = new ArrayList<Button>();
        buttons.add(Button.primary("page_1", Emoji.fromUnicode("⏪")));
        buttons.add(Button.primary("page_1", Emoji.fromUnicode("◀")));
        buttons.add(Button.danger("page_cancel", Emoji.fromUnicode("❌")));
        buttons.add(Button.primary("page_2", Emoji.fromUnicode("▶")));
        buttons.add(Button.primary("page_4", Emoji.fromUnicode("⏩")));
    
        e.replyEmbeds(msg.build()).addActionRow(buttons).queue();
    
    }
    

    ButtonClickEvent.java

    public void onButtonClick(ButtonClickEvent e) {
    
        // Split the ID to 2 Strings
        // page_1 = page | 1
        String[] args = e.getButton().getId().split("_");
    
        // Check if button is a page button
        if (args[0].equalsIgnoreCase("page")) {
    
            // Check if user pressed the cancel button and delete the message
            if (args[1].equalsIgnoreCase("cancel")) {
    
                e.getMessage().delete().queue();
                return;
    
            }
    
            // Convert Pagenumber String to Integer
            int pageNum = Integer.valueOf(args[1]);
    
            EmbedBuilder msg = new EmbedBuilder();
            List<Button> buttons = new ArrayList<Button>();
    
            //Check which page number is used
            switch (pageNum) {
    
            case 1:
                msg.setTitle("Pagination");
                msg.setDescription("Hello World! This is the first page");
                msg.setFooter("Page 1/4");
                msg.setColor(0x33cc33);
                buttons.add(Button.primary("page_1", Emoji.fromUnicode("⏪")));
                buttons.add(Button.primary("page_1", Emoji.fromUnicode("◀")));
                buttons.add(Button.danger("page_cancel", Emoji.fromUnicode("❌")));
                buttons.add(Button.primary("page_2", Emoji.fromUnicode("▶")));
                buttons.add(Button.primary("page_4", Emoji.fromUnicode("⏩")));
                break;
    
            case 2:
                msg.setTitle("Pagination");
                msg.setDescription("Hello World! This is the second page");
                msg.setFooter("Page 2/4");
                msg.setColor(0x33cc33);
                buttons.add(Button.primary("page_1", Emoji.fromUnicode("⏪")));
                buttons.add(Button.primary("page_1", Emoji.fromUnicode("◀")));
                buttons.add(Button.danger("page_cancel", Emoji.fromUnicode("❌")));
                buttons.add(Button.primary("page_3", Emoji.fromUnicode("▶")));
                buttons.add(Button.primary("page_4", Emoji.fromUnicode("⏩")));
                break;
    
            case 3:
                msg.setTitle("Pagination");
                msg.setDescription("Hello World! This is the third page");
                msg.setFooter("Page 3/4");
                msg.setColor(0x33cc33);
                buttons.add(Button.primary("page_1", Emoji.fromUnicode("⏪")));
                buttons.add(Button.primary("page_2", Emoji.fromUnicode("◀")));
                buttons.add(Button.danger("page_cancel", Emoji.fromUnicode("❌")));
                buttons.add(Button.primary("page_4", Emoji.fromUnicode("▶")));
                buttons.add(Button.primary("page_4", Emoji.fromUnicode("⏩")));
                break;
    
            case 4:
                msg.setTitle("Pagination");
                msg.setDescription("Hello World! This is the last page");
                msg.setFooter("Page 4/4");
                msg.setColor(0x33cc33);
                buttons.add(Button.primary("page_1", Emoji.fromUnicode("⏪")));
                buttons.add(Button.primary("page_3", Emoji.fromUnicode("◀")));
                buttons.add(Button.danger("page_cancel", Emoji.fromUnicode("❌")));
                buttons.add(Button.primary("page_4", Emoji.fromUnicode("▶")));
                buttons.add(Button.primary("page_4", Emoji.fromUnicode("⏩")));
                break;
    
            }
    
            // Edit the Message
            e.getMessage().editMessageEmbeds(msg.build()).setActionRow(buttons).queue();
    
        }
    }
    

    This is definitely not the most efficient was and it could be optimised by using a dynamic pagenumber variable in the switch-case of the ButtonClickListener. This should just be a simple example for such a pagination system. I hope it helps :D