<p>If someone has a better approach to solve that please tell me because my method right now fells really wrong and like a hack that might be troublesome in the future. I would like to accept the answer of someone else - until then I'll use the following</p>

<pre><code>onKeyDown: function(ev){
    ev.preventDefault();
    var btn = $(ev.target);
    if(btn.data('menubtn')){
        var menu = btn.data('menubtn');
        var options = menu.menu.$menuList;
        if(options.find('.myClass').length === 0){
            options.append('&lt;li&gt;&lt;a class="myClass" data-action="myCustomDataAction"&gt;Another Button wuhu ^.^&lt;/a&gt;&lt;/li&gt;')
        }
    }
},
init: function () {
    var e = this;
    var icons = $(".settings.icon");
    $.each(icons, function(index, item){
        var menuBtn = $(item).data('menubtn');
        if(menuBtn){
            var $menu = menuBtn.menu;
            $menu.on('show', $.proxy(e, 'onShowMenu'));
            e.addListener($(item), 'mousedown', 'onKeyDown');
        }
    });
    // add the event listener
    Garnish.$doc.on('click', '.myClass[data-action="myCustomDataAction"]', this.showHoverMenu.bind(this));
},
</code></pre>

CC BY-SA 4.0
2018-05-17T18:58:08.200Z
ReLabel is a critical Craft 2 plugin for me - I'd love to see a similar feature in Craft 3.
4midori
CC BY-SA 4.0
2018-05-17T19:00:31.590Z
I could share my relable plugin with you if you want
Robin Schambach
CC BY-SA 4.0
2018-05-17T23:03:07.947Z
That would be great. Has it proven reliable, and would you consider adding it to the collection on GitHub?
4midori
CC BY-SA 3.0
2018-02-16T07:59:43.437Z
2018-02-16T07:59:43.437Z
Robin Schambach
<p>I would like to have the ability to include a custom option in the field layout designer field settings. There is already a plugin for Craft 2 that uses this feature <a href="https://github.com/benjamminf/craft-relabel" rel="nofollow noreferrer">Relabel for Craft</a></p>

<p><a href="https://i.sstatic.net/kUebl.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/kUebl.png" alt="enter image description here"></a></p>

<p>And I would like to include a behavior like this in Craft 3 too but I can't find a way to solve this issue.</p>

<p>The FieldLayoutDesigner is initialized <a href="https://github.com/craftcms/cms/blob/develop/src/web/assets/cp/dist/js/Craft.js#L13566" rel="nofollow noreferrer">here</a> and the settings are created with</p>

<pre><code>initTab: function($tab) {
    if (this.settings.customizableTabs) {
        var $editBtn = $tab.find('.tabs .settings'),
            $menu = $('&lt;div class="menu" data-align="center"/&gt;').insertAfter($editBtn),
            $ul = $('&lt;ul/&gt;').appendTo($menu);

        $('&lt;li&gt;&lt;a data-action="rename"&gt;' + Craft.t('app', 'Rename') + '&lt;/a&gt;&lt;/li&gt;').appendTo($ul);
        $('&lt;li&gt;&lt;a data-action="delete"&gt;' + Craft.t('app', 'Delete') + '&lt;/a&gt;&lt;/li&gt;').appendTo($ul);

        new Garnish.MenuBtn($editBtn, {
            onOptionSelect: $.proxy(this, 'onTabOptionSelect')
        });
    }

    // Don't forget the fields!
    var $fields = $tab.children('.fld-tabcontent').children();

    for (var i = 0; i &lt; $fields.length; i++) {
        this.initField($($fields[i]));
    }
},
</code></pre>

<p>But I don't see any triggers or other options to extend the content. Can someone please point me to the right direction how to include a custom button properly?</p>

<p>I think waiting for the <code>click</code> event on the wheel icon and wait until the DOM menu is created to attach a custom button might not be the best and intended idea?</p>

<p>Thank you very much.</p>

<craft3><javascript><garnish><field-layout-designer>
Craft 3 js - extend the field layout designer field settings
# Craft 3 js - extend the field layout designer field settings

(Asked by: username_0 on 2018-02-15)

I would like to have the ability to include a custom option in the field layout designer field settings. There is already a plugin for Craft 2 that uses this feature Relabel for Craft

And I would like to include a behavior like this in Craft 3 too but I can't find a way to solve this issue.
The FieldLayoutDesigner is initialized here and the settings are created with
initTab: function($tab) {
    if (this.settings.customizableTabs) {
        var $editBtn = $tab.find('.tabs .settings'),
            $menu = $('').insertAfter($editBtn),
            $ul = $('').appendTo($menu);

        $('' + Craft.t('app', 'Rename') + '').appendTo($ul);
        $('' + Craft.t('app', 'Delete') + '').appendTo($ul);

        new Garnish.MenuBtn($editBtn, {
            onOptionSelect: $.proxy(this, 'onTabOptionSelect')
        });
    }

    // Don't forget the fields!
    var $fields = $tab.children('.fld-tabcontent').children();

    for (var i = 0; i < $fields.length; i++) {
        this.initField($($fields[i]));
    }
},

But I don't see any triggers or other options to extend the content. Can someone please point me to the right direction how to include a custom button properly?
I think waiting for the click event on the wheel icon and wait until the DOM menu is created to attach a custom button might not be the best and intended idea?
Thank you very much.

**Tags:** craft3, javascript, garnish, field-layout-designer

---

## 1 answers

### Answer by username_0 on 2018-02-16. Score: 1

If someone has a better approach to solve that please tell me because my method right now fells really wrong and like a hack that might be troublesome in the future. I would like to accept the answer of someone else - until then I'll use the following
onKeyDown: function(ev){
    ev.preventDefault();
    var btn = $(ev.target);
    if(btn.data('menubtn')){
        var menu = btn.data('menubtn');
        var options = menu.menu.$menuList;
        if(options.find('.myClass').length === 0){
            options.append('Another Button wuhu ^.^')
        }
    }
},
init: function () {
    var e = this;
    var icons = $(".settings.icon");
    $.each(icons, function(index, item){
        var menuBtn = $(item).data('menubtn');
        if(menuBtn){
            var $menu = menuBtn.menu;
            $menu.on('show', $.proxy(e, 'onShowMenu'));
            e.addListener($(item), 'mousedown', 'onKeyDown');
        }
    });
    // add the event listener
    Garnish.$doc.on('click', '.myClass[data-action="myCustomDataAction"]', this.showHoverMenu.bind(this));
},

> **Comments:**
> **username_1**: ReLabel is a critical Craft 2 plugin for me - I'd love to see a similar feature in Craft 3.  
> **username_0**: I could share my relable plugin with you if you want  
> **username_1**: That would be great. Has it proven reliable, and would you consider adding it to the collection on GitHub?  

---

