Sub-Entries: Adding new Entries on Entries field

Question

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.

Is there an event i can trigger manually or how does this work, how can I hook in?

Answer 1

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)
});