Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-17T18:58:08.200Z
Answers.Text: ReLabel is a critical Craft 2 plugin for me - I'd love to see a similar feature in Craft 3.
Answers.UserDisplayName: 4midori
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-17T19:00:31.590Z
Answers.Text: I could share my relable plugin with you if you want
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-17T23:03:07.947Z
Answers.Text: That would be great. Has it proven reliable, and would you consider adding it to the collection on GitHub?
Answers.UserDisplayName: 4midori
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-16T07:59:43.437Z
Answers.LastActivityDate: 2018-02-16T07:59:43.437Z
Answers.UserDisplayName: Robin Schambach
Body: <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>
  
Tags: <craft3><javascript><garnish><field-layout-designer>
Title: Craft 3 js - extend the field layout designer field settings
ThreadText: # 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](https://github.com/benjamminf/craft-relabel)
  
  [![enter image description here](https://i.sstatic.net/kUebl.png)](https://i.sstatic.net/kUebl.png)
  
  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](https://github.com/craftcms/cms/blob/develop/src/web/assets/cp/dist/js/Craft.js#L13566) 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++) {
          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('<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');
          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?  
  
  ---
  
  