classExtender > ExtraUserFields: How to use multi-select list with native manager UI

39 Posts

audioroger Reply #1, 6 years, 5 months ago

Hey MODXers (@bobray),

I'm trying to pull a list of resources into the user edit form so I can store related resource ID's to the user object.

My question is what markup to use to create a multi-select list in the "MyExtraUserFields" chunk. I will make a snippet to grab the resource ID's to populate the list, but I need the list to work like the normal multi-select lists in MODX.

Also (somewhat related), my regular select lists do not take on the look of the MODX UI.

Attached is an example image of the regular MODX select for gender with my custom select for membership status.

Here's the code block for the membership status field:

<div class="x-form-item x-tab-item">
    <label class="x-form-item-label" style="width:auto; font-weight:bold; float:none; font-size:12px">Membership Status</label>

    <div class="x-form-item x-tab-item">
        <div class="x-form-item x-tab-item">
		<select name="MembershipStatus" value="[[+MembershipStatus]]" class="x-form-text x-form-field">
			<option value="" [[+MembershipStatus:is=``:then=`selected`]]>Choose One</option>
			<option value="Active" [[+MembershipStatus:is=`Active`:then=`selected`]]>Active</option>
			<option value="Inactive" [[+MembershipStatus:is=`Inactive`:then=`selected`]]>Inactive</option>
		</select>
    </div>
    </div>
</div>

24,544 Posts

BobRay Reply #2, 6 years, 5 months ago

I think you'll want select multiple if you want a multi-select:

<select multiple name="MembershipStatus" value="[[+MembershipStatus]]" class="x-form-text x-form-field">

For the rest of it (especially the styling), take a look at the source of the Create/Edit Resource page in Chrome Dev. Tools or Firebug and check out the Template dropdown. It usually takes some trial and error to get things right.

FYI, screenshots no longer work in the Forums. You have to put them somewhere else and put a link to them.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

39 Posts

audioroger Reply #3, 6 years, 5 months ago

Quote from: BobRay at Nov 13, 2017, 10:50 PM

I think you'll want select multiple if you want a multi-select:
<select multiple="" name="MembershipStatus" value="[[+MembershipStatus]]" class="x-form-text x-form-field">
For the rest of it (especially the styling), take a look at the source of the Create/Edit Resource page in Chrome Dev. Tools or Firebug and check out the Template dropdown. It usually takes some trial and error to get things right.

FYI, screenshots no longer work in the Forums. You have to put them somewhere else and put a link to them.</select>

Adding <select multiple> just gives me the regular HTML select field where the user has to shift-click each option. I'd like to have the MODX multi-select list that's more of a dropdown style.

I looked at the manager code with the chrome inspector, but it looks like the manager does some JS magic and the final output code doesn't seem like what you would want to put in your markup. I was hoping there was some other class or something to put in the select field to trigger the MODX manager JS to treat it like it does the native fields.

Here's a dropbox link to my screenshot: https://www.dropbox.com/s/0rm25f7kj7m9eld/Screenshot%202017-11-13%2015.15.54.png?dl=0

Also, here's an example of the MODX output code for the gender field:

<div class="x-form-item x-tab-item" tabindex="-1" id="ext-gen137">
  <label for="modx-user-gender" style="width:auto;" class="x-form-item-label" id="ext-gen138">Gender</label>
  <div class="x-form-element" id="x-form-el-modx-user-gender" style="padding-left:0;">
    <div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen139" style="width: 198px;">
      <input type="hidden" name="gender" id="ext-gen141" value="1">
      <input type="text" size="24" autocomplete="off" id="modx-user-gender" class="x-form-text x-form-field x-trigger-noedit x-form-focus" readonly="" style="width: 160px;" title="">
      <div class="x-form-trigger x-form-arrow-trigger" id="ext-gen140"></div>
      </div>
    </div>
  <div class="x-form-clear-left"></div>
</div>

Then at the bottom of the page is the actual drop down:

<div class="x-layer x-combo-list " id="ext-gen393" style="position: absolute; z-index: 12007; visibility: visible; left: 389px; top: 204px; width: 198px; height: 96px; font-size: 13px;">
  <div class="x-combo-list-inner" id="ext-gen394" style="width: 198px; height: 94px;">
    <div class="x-combo-list-item"></div>
    <div class="x-combo-list-item">Male</div>
    <div class="x-combo-list-item">Female</div>
    <div class="x-combo-list-item x-combo-selected">Other</div>
  </div>
</div>

I don't even see a reference between the two for which combo-list to display for which hidden field...

39 Posts

audioroger Reply #4, 6 years, 5 months ago

Well, I've abandoned this crusade and tried to move to a multi-select checkbox interface, but it just stores the values into the database as "Array".

Does classExtender support checkbox arrays?
If so, what do I need to do to store them?
If not, what is the best way to update the ExtraUserFields plugin to implode the array to store in the database?

24,544 Posts

BobRay Reply #5, 6 years, 5 months ago

1. Only in the sense that if the selection ends up in the post, CE will save it. I don't think it will do multiple selections without modification.

2. Probably a modification of the ExtraUserFields plugin.

3. Try adding this code at the top of the plugin. It will put the $_POST array in the Error Log, so you can see what you're getting.

$modx->log(modX::LOG_LEVEL_ERROR, 'POST: ' . print_r($_POST, true));

How are the multiple selections stored in the DB?

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

39 Posts

audioroger Reply #6, 6 years, 5 months ago

Quote from: BobRay at Nov 17, 2017, 11:28 PM

How are the multiple selections stored in the DB?

I'm just planning on imploding them to a comma separated string.

24,544 Posts

BobRay Reply #7, 6 years, 5 months ago

Post what the $modx->log() line above produces in the Error Log after filling in and submitting the form.

If the plugin isn't ready, just put that line at the top followed by this line:

return;

You'll need to get the fields to appear on the Create/Edit Resource panel first.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

39 Posts

audioroger Reply #8, 6 years, 5 months ago

Quote from: BobRay at Nov 17, 2017, 11:28 PM

1. Only in the sense that if the selection ends up in the post, CE will save it. I don't think it will do multiple selections without modification.

2. Probably a modification of the ExtraUserFields plugin.

3. Try adding this code at the top of the plugin. It will put the $_POST array in the Error Log, so you can see what you're getting.
$modx->log(modX::LOG_LEVEL_ERROR, 'POST: ' . print_r($_POST, true));  
How are the multiple selections stored in the DB?

Here's the pertinent code in MyExtUserFields:

<div class="x-form-item x-tab-item">
    <label class="x-form-item-label" style="width:auto; font-weight:bold; float:none; font-size:12px">Contact for Markets [[+markets]]</label>

    <div class="x-form-item x-tab-item">
		<label class="x-form-cb-label"><input type="checkbox" name="markets[]" class="x-form-checkbox x-form-field" value="0"> Zero</label><br>
		<label class="x-form-cb-label"><input type="checkbox" name="markets[]" class="x-form-checkbox x-form-field" value="1"> One</label><br>
		<label class="x-form-cb-label"><input type="checkbox" name="markets[]" class="x-form-checkbox x-form-field" value="2"> Two</label>
    </div>
</div>

The $_POST value for the "markets" field does return an array as expected:

[markets] => Array
        (
            [0] => 0
            [1] => 1
            [2] => 2
        )

It feels like I need to add a check for arrays in the foreach loop on line 101 in the ExtraUserFields plugin and implode them as desired before setting them to the $data object. Is there a way I should update the plugin that won't be effected by an update, or do I just need to be ready to redo any changes after updating?

39 Posts

audioroger Reply #9, 6 years, 5 months ago

I just realized it may not be possible to call a snippet from MyExtraUserFields. When I try to include a custom snippet to return my checkbox fields it just displays it as text and does not parse the MODX brackets. Is there a way to call a snippet within the MyExtraUserFields chunk to display dynamic data to the user panel?

If not, this whole exercise may be mute (for me at least).

24,544 Posts

BobRay Reply #10, 6 years, 5 months ago

You should be able to do this:

$properties = array (
   'property1' => 'value1',
   'property2' => 'value2',
}

/* ($returnVal is always a string) */

$returnVal = $modx->runSnippet('yoursnippet', $properties);

In the plugin, you'd want something like this around line 108:

if (isset($_POST[$field]) && is_array($_POST[$field])) {

    $_POST[$field] = implode(',', $_POST[$field]);



}

[ed. note: BobRay last edited this post 6 years, 5 months ago.]

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting