<p>Yep, you can do that with <code>Craft.createElementSelectorModal()</code>:</p>

<pre><code>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){}
});
</code></pre>

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

<p>All of those settings are optional except for <code>onSelect</code>. Here’s what they do:</p>

<ul>
<li><strong><code>resizable</code></strong> <em>(bool)</em> – Whether the modal should be user-resizable. (Defaults to <code>true</code>)</li>
<li><strong><code>storageKey</code></strong> <em>(string)</em> – 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 <code>null</code>)</li>
<li><strong><code>sources</code></strong> <em>(array)</em> – Which sources should be shown in the modal’s sidebar. If omitted, all sources will be shown. (Defaults to <code>null</code>)</li>
<li><strong><code>criteria</code></strong> <em>(object)</em> – The params that will be used to determine which elements will be shown. See the <a href="http://buildwithcraft.com/docs/templating/craft.entries">craft.entries documentation</a> for available params when selecting entries. (Defaults to <code>null</code>)</li>
<li><strong><code>multiSelect</code></strong> <em>(bool)</em> – Whether multiple elements should be able to be selected at once. (Defaults to <code>false</code>)</li>
<li><strong><code>disabledElementIds</code></strong> <em>(array)</em> – 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)</li>
<li><strong><code>disableOnSelect</code></strong> <em>(bool)</em> – Whether the modal should automatically disable elements when they are selected. (Defaults to <code>false</code>)</li>
<li><strong><code>onCancel</code></strong> <em>(function)</em> – A function that should get called when the modal is cancelled without selecting anything.</li>
<li><strong><code>onSelect</code></strong> <em>(function)</em> – A function that should get called when elements have been selected.</li>
</ul>

<p>The <code>onSelect</code> 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:</p>

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

<p>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.</p>

<p>You can re-open it later by calling <code>myModal.show()</code>.</p>

CC BY-SA 3.0
2016-08-07T19:33:53.643Z
This is _insanely_ helpful. Thanks for the great documentation.
Rob Erskine
CC BY-SA 3.0
2017-05-12T19:29:20.490Z
Is it possible to do something like this except the modal shows all element types?
Benjamin Kohl
CC BY-SA 3.0
2017-05-12T19:29:58.670Z
@BenjaminKohl Sorry, no.
Brandon Kelly
CC BY-SA 4.0
2018-12-11T23:37:09.650Z
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
CC BY-SA 4.0
2018-12-13T22:19:40.730Z
@Luke no, but you could reuse the styles and copy the JS as a starting point in building your own modal.
Brandon Kelly
CC BY-SA 3.0
2014-07-10T14:53:02.420Z
This is awesome, thanks Brandon! I'll keep you updated on how this goes.
Peter Tell
CC BY-SA 3.0
2014-07-10T14:49:22.450Z
2014-07-10T14:49:22.450Z
Brandon Kelly
<p>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).</p>

<p>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.</p>

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

<p>Thanks!</p>

<plugin-development><elementtype>
Is it possible to use the ElementType Modal UI for a custom Field Type Plugin?
# Is it possible to use the ElementType Modal UI for a custom Field Type Plugin?

(Asked by: username_0 on 2014-07-10)

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!

**Tags:** plugin-development, elementtype

---

## 1 answers

### Answer by username_1 on 2014-07-10. Score: 14 | Accepted answer

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

> **Comments:**
> **username_0**: This is awesome, thanks Brandon! I'll keep you updated on how this goes.  
> **username_2**: This is _insanely_ helpful. Thanks for the great documentation.  
> **username_3**: Is it possible to do something like this except the modal shows all element types?  
> **username_1**: @BenjaminKohl Sorry, no.  
> **username_4**: 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.  
> **username_1**: @Luke no, but you could reuse the styles and copy the JS as a starting point in building your own modal.  

---

