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

enter image description here

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 = $('<div class="menu" data-align="center"/>').insertAfter($editBtn),
            $ul = $('<ul/>').appendTo($menu);

        $('<li><a data-action="rename">' + Craft.t('app', 'Rename') + '</a></li>').appendTo($ul);
        $('<li><a data-action="delete">' + Craft.t('app', 'Delete') + '</a></li>').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++) {

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.

1 Answer 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){
    var btn = $(ev.target);
        var menu = btn.data('menubtn');
        var options = menu.menu.$menuList;
        if(options.find('.myClass').length === 0){
            options.append('<li><a class="myClass" data-action="myCustomDataAction">Another Button wuhu ^.^</a></li>')
init: function () {
    var e = this;
    var icons = $(".settings.icon");
    $.each(icons, function(index, item){
        var menuBtn = $(item).data('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));
  • ReLabel is a critical Craft 2 plugin for me - I'd love to see a similar feature in Craft 3.
    – 4midori
    Commented May 17, 2018 at 18:58
  • I could share my relable plugin with you if you want Commented May 17, 2018 at 19:00
  • That would be great. Has it proven reliable, and would you consider adding it to the collection on GitHub?
    – 4midori
    Commented May 17, 2018 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.