1

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

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

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)
});
  • 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 Jun 4 '18 at 22:45
  • 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 Jun 4 '18 at 22:46
  • 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 Jun 4 '18 at 23:01
  • 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 Jun 4 '18 at 23:05
  • 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 Jun 4 '18 at 23:15

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.