So I'm writing a plugin to try and create a relationship between two entry sections that is a two way street (Many to Many).

I would love to co-opt the UI and functionality of the ElementType modal for a predefined section ID and then do my own saving logic.

In other words, I would just like to use the front end form functionality and handle the backend logic myself. Is this possible?


1 Answer 1


Yep, you can do that with Craft.createElementSelectorModal():

var myModal = Craft.createElementSelectorModal('Entry', {
    resizable:          true,
    storageKey:         'someUniqueID',
    sources:            ['section:1', 'seciton:2'],
    criteria:           { status: null },
    multiSelect:        true,
    disabledElementIds: [1, 2, 3],
    disableOnSelect:    true,
    onCancel:           function(){},
    onSelect:           function(entries){}

The first argument specifies what type of element you want to be selecting (Entry, Asset, etc.), and the second argument defines the settings.

All of those settings are optional except for onSelect. Here’s what they do:

  • resizable (bool) – Whether the modal should be user-resizable. (Defaults to true)
  • storageKey (string) – The storage key prefix that the modal will use to save its state in the browser’s localStorage, including things like which source was selected. (Defaults to null)
  • sources (array) – Which sources should be shown in the modal’s sidebar. If omitted, all sources will be shown. (Defaults to null)
  • criteria (object) – The params that will be used to determine which elements will be shown. See the craft.entries documentation for available params when selecting entries. (Defaults to null)
  • multiSelect (bool) – Whether multiple elements should be able to be selected at once. (Defaults to false)
  • disabledElementIds (array) – A list of element IDs that should be disabled (unselectable). Pass any elements that are already selected in here, so they can’t be double-selected. (Defaults to an empty array)
  • disableOnSelect (bool) – Whether the modal should automatically disable elements when they are selected. (Defaults to false)
  • onCancel (function) – A function that should get called when the modal is cancelled without selecting anything.
  • onSelect (function) – A function that should get called when elements have been selected.

The onSelect function will get passed an array that contains info about each of the selected elements. Each item in the array will have the following properties:

  • id – The element’s ID
  • label – The element’s label (the Title if it’s an entry)
  • status – The element’s status
  • url – The element’s front-end URL, if it has one
  • hasThumb – Whether the element has a thumbnail
  • $element – A jQuery object for the element, which you can append to your field input

Once you’ve created your modal, it will automatically be shown. It will also be automatically closed when it is cancelled out of, or elements are selected.

You can re-open it later by calling myModal.show().

  • This is awesome, thanks Brandon! I'll keep you updated on how this goes.
    – Peter Tell
    Commented Jul 10, 2014 at 14:53
  • This is insanely helpful. Thanks for the great documentation. Commented Aug 7, 2016 at 19:33
  • Is it possible to do something like this except the modal shows all element types? Commented May 12, 2017 at 19:29
  • @BenjaminKohl Sorry, no. Commented May 12, 2017 at 19:29
  • Is it possible to use this modal with custom data rather than an element type? I want to use it to interface a REST-API.
    – Luke
    Commented Dec 11, 2018 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.