Display a custom panel on the right side

[Jan Jungblut]

Hello, we want to add a panel on the right side like the "comments panel" on a button click.

At the moment we use this code to modify the ribbon. When the user presses the "Open Side-Panel" Button a Side-Panel like the one for adding comments should open with our custom content. Is that possible?

ngAfterViewInit(): void {

    setTimeout(() => {

        const ribbonGroup = {

            header: "Building Blocks",

            collections: [

                {

                    items: [

                        {

                            type: "Button",

                            buttonSettings: {

                                content: "Open Side-Panel",

                                iconCss: "e-icons e-de-ctnr-new",

                                clicked: () => {

                                    if (this.documentEditor) {

                                    }

                                }

                            }

                        },

                        {

                            type: "DropDown",

                            dropDownSettings: {

                                content: "Add BTB",

                                iconCss: "e-icons e-de-ctnr-new",

                                items: [

                                    {

                                        "text": "Courage",

                                        "content": "A hero often rises not because he wants to, but because the moment leaves him no choice."

                                    },

                                ],

                                select: (args: any) => {

                                    console.log(args);

                                    const editor = (this.documentEditor as DocumentEditorContainerComponent).documentEditor;

                                    editor.editor.insertText(args.item.content);

                                }

                            }

                        }

                    ]

                }

            ]

        };

        this.documentEditor?.ribbon.addGroup("Insert", ribbonGroup);

    });

}

[Sujitha Siva]

Hi, 

In Document Editor, it is not possible to render a custom pane within the editor like the built‑in Comments panel. However, you can achieve a similar side panel by creating a right‑side panel using the Syncfusion Angular Sidebar and opening it on a button click. We have created a working sample that demonstrates this behavior using a ribbon button (“Open Side‑Panel”) and a right‑side panel containing your custom content.

 

 

Please review the sample and screenshot and let us know if this meets your requirement or if you need further assistance.

Sample: V4ekwerx (duplicated) - StackBlitz

Documentation: Getting Started with Angular Sidebar Component | Syncfusion

Regards,

Sujitha S