Pimcore Adding Button To Panel in Object Editor

Question

I want to add a button in a panel in my own object editor. I was successful in adding an icon and handler in Object Editor like in the example documentation. But i want to add a button somewhere in the panel below the editor.How do i find out which js file to extend so that i can create a menu button.

https://talk.pimcore.org/uploads/default/optimized/2X/7/725a347773479a7136600daeee66d7883ed19ae7_2_487x500.png

I have tried to extend the object class and i want to know which function gets executed to add my button to this toolbar

`pimcore.plugin.celumImage = Class.create(pimcore.plugin.admin, {
 postOpenObject: function (object, type) {
        console.log("dsdsd"+object.data.general.o_className);
            object.toolbar.add({
                text: t('show-pdf'),
                iconCls: 'pimcore_icon_pdf',
                scale: 'small',
                handler: function (obj) {
                    //do some stuff here, e.g. open a new window with an PDF download
                }.bind(this, object)
            });
            pimcore.layout.refresh();
    },
});`

Can you get the tabpanel here or should i want to extend the object class so that i can add the button in the image

ju_ ju_ · Accepted Answer · 2019-11-07T17:58:19

As you did not post the full class definition I can only estimate how the javascript shoud look like. You may go with the following if you just have one simple tabpabel:

postOpenObject: function (object, type) {
    object.tabPanel
        .getComponent(0) // get object tab
        .getComponent(1) // get edit tabpanel
        .getComponent(0) // get class tab
        .getComponent(3) // get fourth tab in class tabpanel
        .query("*[componentCls~=object_field]")[0] // get first panel with class "object_field" - could be replaced with down(...)
        .getDockedComponent(0) // get toolbar
        .add({
            text: t('show-pdf'),
            iconCls: 'pimcore_icon_pdf',
            scale: 'small',
            handler: function (obj) {
                //do some stuff here, e.g. open a new window with an PDF download
            }.bind(this, object)
        });
})

Dependent on how complex the layout of your data object is (or will be) you may remove the getComponent() calls and just go with the down() call for the objects tag.

Make sure to adjust the code if you change the layout of the class and also consider adapting the code above if you are using custom layouts for each layout if necessary.

You may have a look at the Ext.js documentation for the Panel component as well, just search for the called methods.

Pimcore Adding Button To Panel in Object Editor

1 Answers