<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>

CC BY-SA 4.0
2018-06-04T22:45:47.240Z
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?
psren
CC BY-SA 4.0
2018-06-04T22:46:43.153Z
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
Robin Schambach
CC BY-SA 4.0
2018-06-04T23:01:26.027Z
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?
psren
CC BY-SA 4.0
2018-06-04T23:05:39.157Z
`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.
Robin Schambach
CC BY-SA 4.0
2018-06-04T23:15:31.337Z
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"
psren
CC BY-SA 4.0
2018-06-04T23:20:31.127Z
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
Robin Schambach
CC BY-SA 4.0
2018-06-04T23:43:16.820Z
Ah okay, but where do I get the new element from?
I already struggle with adding the button for creating a new element.
psren
CC BY-SA 4.0
2018-06-05T04:45:03.560Z
The new element? It should be in the response parameter
Robin Schambach
CC BY-SA 4.0
2018-06-04T22:21:41.400Z
2018-06-04T22:21:41.400Z
Robin Schambach
<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>

<plugin-development>
Sub-Entries: Adding new Entries on Entries field
# 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
You can see a working example within all ElementIndex js files
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  

---

