Is it possible to use the ElementType Modal UI for a custom Field Type Plugin? 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?

Thanks!
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().