Answers.Body: <p>The thing you are talking about is a <a href="https://github.com/craftcms/cms/blob/develop/src/web/assets/cp/src/js/BaseElementEditor.js" rel="nofollow noreferrer">Craft.BaseElementEditor</a></p>
  
  <p>You can see a working example within all <code>ElementIndex</code> js <a href="https://github.com/craftcms/cms/blob/develop/src/web/assets/cp/src/js/EntryIndex.js#L199" rel="nofollow noreferrer">files</a></p>
  
  <pre><code>Craft.createElementEditor(this.elementType, {
      hudTrigger: this.$newCategoryBtnGroup,
      elementType: 'craft\\elements\\Category',
      siteId: this.siteId,
      attributes: {
          groupId: groupId
      },
      onBeginLoading: $.proxy(function() {
          this.$newCategoryBtn.addClass('loading');
      }, this),
      onEndLoading: $.proxy(function() {
          this.$newCategoryBtn.removeClass('loading');
      }, this),
      onHideHud: $.proxy(function() {
          this.$newCategoryBtn.removeClass('inactive').text(newCategoryBtnText);
      }, this),
      onSaveElement: $.proxy(function(response) {
          // Make sure the right group is selected
          var groupSourceKey = 'group:' + groupId;
  
          if (this.sourceKey !== groupSourceKey) {
              this.selectSourceByKey(groupSourceKey);
          }
  
          this.selectElementAfterUpdate(response.id);
          this.updateElements();
      }, this)
  });
  </code></pre>
  
  <p>So it could look like</p>
  
  <pre><code>var button = $('#yourButton');
  Craft.createElementEditor('craft\\elements\\Entry', {
      hudTrigger: button ,
      elementType: 'craft\\elements\\Entry',
      siteId: this.siteId,
      attributes: {
          sectionId: 1, // &lt;-- insert your section id here
          typeId: 1 //&lt;-- important, insert your valid type id otherwise it won't work
      },
      onBeginLoading: $.proxy(function() {
          button.addClass('loading');
      }, this),
      onEndLoading: $.proxy(function() {
          button.removeClass('loading');
      }, this),
      onHideHud: $.proxy(function() {
          button.removeClass('inactive').text('New Entry');
      }, this),
      onSaveElement: $.proxy(function(response) {
          // insert the id of the saved element to hidden input
      }, this)
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T22:45:47.240Z
Answers.Text: Thanks for the hint.
  How can I add an "elementEditor" to by Field?
  
  My input-class is "Craft.BaseElementSelectInput" at the moment.
  Do I have to overwrite and extend it?
Answers.UserDisplayName: psren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T22:46:43.153Z
Answers.Text: Have you even tried my code? The example is above. You can insert it in your browsers dev console. You don't need to extend the class. You can't use Crafts template obviously since this will add the baseElementSelectInput that you don't want
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T23:01:26.027Z
Answers.Text: Yes I tried your code.
  It does "something". It does not throw any errors, but ends in an endless loop somehow.
  
  Maybe I misunderstood your comments?
  
      sectionId: 10, // <-- insert your section id here
              typeId: 10 //<-- important, insert your valid type id otherwise it won't work
  
  sectionID => the section where my Relation comes from?
  typeID => the current element?
Answers.UserDisplayName: psren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T23:05:39.157Z
Answers.Text: `sectionId` is the section of your new element, `typeId` the entry type of your new element. It should not end in an endless loop. When I insert the code as it is in my browser it creates a new entry HUD.
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T23:15:31.337Z
Answers.Text: The endless loop came from wrong IDs.
  I embedded the current item itself which lead to an infinite loop.
  
  If i use the `sectionId: 2` (for my news-section) and `typeId: 10` (the current teams ID) I get "Invalid entry type ID: 10"
Answers.UserDisplayName: psren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T23:20:31.127Z
Answers.Text: As I already said. Not the current type Id. You need to insert the type ID for the new entry. Your current element doesn't matter
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T23:43:16.820Z
Answers.Text: Ah okay, but where do I get the new element from?
  I already struggle with adding the button for creating a new element.
Answers.UserDisplayName: psren
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-05T04:45:03.560Z
Answers.Text: The new element? It should be in the response parameter
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-04T22:21:41.400Z
Answers.LastActivityDate: 2018-06-04T22:21:41.400Z
Answers.UserDisplayName: Robin Schambach
Body: <p>I'm trying to write my first CraftCMS-Plugin.
  It should behave like the "Entries" field, so I inherit from it.</p>
  
  <p>The difference is:</p>
  
  <p>I don't want to allow the user to select existing entries.
  They should just add "news" to the "team".</p>
  
  <ul>
  <li>The user visits his team</li>
  <li>There are no news assigned to the team yet</li>
  <li>He clicks the "add" button</li>
  <li>A new News-Entry is generated (see Screenshot, i like the Quick-Add widget)</li>
  <li>The News-Entry is automatically "linked" to the Team</li>
  </ul>
  
  <p>I just don't know how to start.
  The field is already in place and it inherits from "Entries".</p>
  
  <p>But how can I "move" the "Quick-Add" Button from the "Select-Modal" (see screen) to my Field-Type. It seems to just trigger a POST-Request.</p>
  
  <p><a href="https://i.sstatic.net/JGwFA.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/JGwFA.png" alt="Quick-Add Button in Select-Modal"></a></p>
  
  <p>Is there an event i can trigger manually or how does this work, how can I hook in?</p>
  
Tags: <plugin-development>
Title: Sub-Entries: Adding new Entries on Entries field
ThreadText: # Sub-Entries: Adding new Entries on Entries field
  
  (Asked by: username_0 on 2018-06-04)
  
  I'm trying to write my first CraftCMS-Plugin.
  It should behave like the "Entries" field, so I inherit from it.
  
  The difference is:
  
  I don't want to allow the user to select existing entries.
  They should just add "news" to the "team".
  
  * The user visits his team
  * There are no news assigned to the team yet
  * He clicks the "add" button
  * A new News-Entry is generated (see Screenshot, i like the Quick-Add widget)
  * The News-Entry is automatically "linked" to the Team
  
  I just don't know how to start.
  The field is already in place and it inherits from "Entries".
  
  But how can I "move" the "Quick-Add" Button from the "Select-Modal" (see screen) to my Field-Type. It seems to just trigger a POST-Request.
  
  [![Quick-Add Button in Select-Modal](https://i.sstatic.net/JGwFA.png)](https://i.sstatic.net/JGwFA.png)
  
  Is there an event i can trigger manually or how does this work, how can I hook in?
  
  **Tags:** plugin-development
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-06-04. Score: 1 | Accepted answer
  
  The thing you are talking about is a [Craft.BaseElementEditor](https://github.com/craftcms/cms/blob/develop/src/web/assets/cp/src/js/BaseElementEditor.js)
  
  You can see a working example within all `ElementIndex` js [files](https://github.com/craftcms/cms/blob/develop/src/web/assets/cp/src/js/EntryIndex.js#L199)
  
  ```
  Craft.createElementEditor(this.elementType, {
      hudTrigger: this.$newCategoryBtnGroup,
      elementType: 'craft\\elements\\Category',
      siteId: this.siteId,
      attributes: {
          groupId: groupId
      },
      onBeginLoading: $.proxy(function() {
          this.$newCategoryBtn.addClass('loading');
      }, this),
      onEndLoading: $.proxy(function() {
          this.$newCategoryBtn.removeClass('loading');
      }, this),
      onHideHud: $.proxy(function() {
          this.$newCategoryBtn.removeClass('inactive').text(newCategoryBtnText);
      }, this),
      onSaveElement: $.proxy(function(response) {
          // Make sure the right group is selected
          var groupSourceKey = 'group:' + groupId;
  
          if (this.sourceKey !== groupSourceKey) {
              this.selectSourceByKey(groupSourceKey);
          }
  
          this.selectElementAfterUpdate(response.id);
          this.updateElements();
      }, this)
  });
  
  ```
  
  So it could look like
  
  ```
  var button = $('#yourButton');
  Craft.createElementEditor('craft\\elements\\Entry', {
      hudTrigger: button ,
      elementType: 'craft\\elements\\Entry',
      siteId: this.siteId,
      attributes: {
          sectionId: 1, // <-- insert your section id here
          typeId: 1 //<-- important, insert your valid type id otherwise it won't work
      },
      onBeginLoading: $.proxy(function() {
          button.addClass('loading');
      }, this),
      onEndLoading: $.proxy(function() {
          button.removeClass('loading');
      }, this),
      onHideHud: $.proxy(function() {
          button.removeClass('inactive').text('New Entry');
      }, this),
      onSaveElement: $.proxy(function(response) {
          // insert the id of the saved element to hidden input
      }, this)
  });
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks for the hint. How can I add an "elementEditor" to by Field?  My input-class is "Craft.BaseElementSelectInput" at the moment. Do I have to overwrite and extend it?  
  > **username_1**: Have you even tried my code? The example is above. You can insert it in your browsers dev console. You don't need to extend the class. You can't use Crafts template obviously since this will add the baseElementSelectInput that you don't want  
  > **username_0**: Yes I tried your code. It does "something". It does not throw any errors, but ends in an endless loop somehow.  Maybe I misunderstood your comments?      sectionId: 10, // <-- insert your section id here             typeId: 10 //<-- important, insert your valid type id otherwise it won't work  sectionID => the section where my Relation comes from? typeID => the current element?  
  > **username_1**: `sectionId` is the section of your new element, `typeId` the entry type of your new element. It should not end in an endless loop. When I insert the code as it is in my browser it creates a new entry HUD.  
  > **username_0**: The endless loop came from wrong IDs. I embedded the current item itself which lead to an infinite loop.  If i use the `sectionId: 2` (for my news-section) and `typeId: 10` (the current teams ID) I get "Invalid entry type ID: 10"  
  > **username_1**: As I already said. Not the current type Id. You need to insert the type ID for the new entry. Your current element doesn't matter  
  > **username_0**: Ah okay, but where do I get the new element from? I already struggle with adding the button for creating a new element.  
  > **username_1**: The new element? It should be in the response parameter  
  
  ---
  
  