Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?


share|improve this question
up vote 11 down vote accepted

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

share|improve this answer
This is awesome, thanks Brandon! I'll keep you updated on how this goes. – Peter Tell Jul 10 '14 at 14:53

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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