Issue #2350Opened October 23, 2019by AbdiasM14 reactions

[Question] How do I add elements/sectors to views container using a custom button in the Panel

Question

Code SnippetTEXT
I have added a custom button to the Panel as below:

        const pm = editor.Panels;        
        pm.addButton('views', {
            id: 'customButton',
            className: '',
            command: {
                run: function (editor) {
                    alert("Hello");
                },
                stop: function (editor) {

                }
            },
            attributes: { class: 'fa fa-address-card-o' },
            active: false,
        });

I would like to add custom elements in the views-container when this button is clicked. Screen shot attached. Could you please help with this?

![CustomButtonClick](https://user-images.githubusercontent.com/18558443/67381298-540e1d00-f5a9-11e9-8c79-4d3284820d32.PNG)

Answers (3)

pouyamiralayi• February 18, 202013 reactions

@AbdiasM @ko06 sorry for being late on this! based on #277

        const pn = editor.Panels
        let editPanel = null
        pn.addButton('views', {
            id: 'editMenu',
            attributes: {class: 'fa fa-address-card-o', title: "Edit Menu"},
            active: false,
            command: {
                run: function (editor) {
                    if(editPanel == null){
                        const editMenuDiv = document.createElement('div')
                        editMenuDiv.innerHTML = `
                        <div id="your-content">
                             Input: <input/>
                             <button>Button</button> 
                              <!-- eg. bind a click event on button and do something with GrapesJS API -->
                        </div>
                    `
                        const panels = pn.getPanel('views-container')
                        panels.set('appendContent', editMenuDiv).trigger('change:appendContent')
                        editPanel = editMenuDiv
                    }
                    editPanel.style.display = 'block'
                },
                stop: function (editor) {
                    if(editPanel != null){
                        editPanel.style.display = 'none'
                    }
                }

            }
        })

Cheers!

hc0127• December 12, 20231 reactions

Hi, @pouyamiralayi . thanks for your post. I got custom view container. But I wanna use react components on that part. Is it possible? if so, Please help me.

ko06• October 24, 20190 reactions

is this fixed?

Related Questions and Answers

Continue research with similar issue discussions.

Issue #3111

Question: How to trigger something (function) on adding asset?

Hi, @artf. What is the correct way to trigger a function when an asset is added to the assets by providing the link and then pressing the '...

2 answersUpdated November 9, 2020

Issue #1211

Adding a working Import Panel Button without the presets

I want to add the Import button at the panel for importing templates, but I don't want to use the presets. I have already added the followi...

2 answersUpdated September 17, 2019

Issue #436

RemoteStorage - Load Template uses POST

I'm using a custom module to save/load a template with a service like this: Save is a different module and works just fine. The problem is...

3 answersUpdated December 7, 2019

Issue #3207

Form is not submitting

I am trying to create as custom block. But the form is not submitting when i use components inside content. I am able to get all the form d...

3 answersUpdated May 24, 2023

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders