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.


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
    May 17 '18 at 18:58
  • I could share my relable plugin with you if you want May 17 '18 at 19:00
  • That would be great. Has it proven reliable, and would you consider adding it to the collection on GitHub?
    – 4midori
    May 17 '18 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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