In a ui page, how do you populate a "list" UI element in a UI page with values?

[reanimate]

the html is:

<g:ui_element table="u_development_standard" field="u_standard" id="466eef750fd3710060017e4ce1050ee2"></g:ui_element><p></p>

the javascript to GET the value is:

var standardId = gel('u_development_standard.u_standard');

but how do I SET the value?

[reanimate]

Thank you so much for the time you have put into this.

I'm not sure this answers what I mean.

If a user manually selects one or more list options, then I can grab the sys_id's from the ID no problem.

What I need to do is pass the sys_ids / labels to the glide list field (as mentioned, a ui_element pointing to the field on a form)

Let me show you the code I have so far.

What I really want to do is place the contents of jvar_standardId / jvar_standardStr into u_development_standard.u_standard or whatever the correct ID is.

Due to the way a glide list element works, i.e. you have to unlock it and it seems to work in an odd way (and you probably have to provide it with both sys_id's and labels) I can't do the step.

For clarity, the UI page is called form a UI action and I want to pre-populate the ui element with o/p from a script include that was called, sending the various paramaters.

HTML:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

      <g:evaluate var="jvar_tableNameStr" expression="RP.getWindowProperties().get('_tableNameStr')" />

      <g:evaluate var="jvar_recordId" expression="RP.getWindowProperties().get('_recordId')" />

      <g:evaluate var="jvar_standardId" expression="RP.getWindowProperties().get('_standardId')" />

      <g:evaluate var="jvar_standardStr" expression="RP.getWindowProperties().get('_standardStr')" />  

      <p></p>

      <table>

              <tr>

                      <td><b><font color="gray">

${gs.getMessage('This action enables you to check standards and create new development standard record.')}<br></br>

${gs.getMessage('Please complete all the fields below then click [Create] to create the record, or click [Cancel] at any time to abort.')}

                      </font></b></td>

                      <td>

                              <img src="didata_logo.gif" width="255" height="60"/>

                      </td>

              </tr>

      </table>

      <p></p>

      <g:ui_element table="u_development_standard" field="u_standard" id="466eef750fd3710060017e4ce1050ee2"></g:ui_element><p></p>

      <g:ui_element table="u_development_standard" field="description" id="f79a428ba84ba1b52b40c3b924b9a6f7"></g:ui_element><p></p>

<script>

//document.getElementById('u_development_standard.u_standard').value='${jvar_standardId}';

</script>

      <center>

              <button id="createButton" type="button"   onClick="createMyStandard('${jvar_tableNameStr}', '${jvar_recordId}')" style="height: 20px; width: 100px">${HTML:gs.getMessage('Create')}</button>

              <button id="cancelButton" type="button"   onClick="cancelDialogbox()" style="height: 20px; width: 100px">${HTML:gs.getMessage('Cancel')}</button>

      </center>

</j:jelly>

Javscript:

function createMyStandard(_tableNameStr, _recordId){

      // Get field values

  var standardId = gel('u_development_standard.u_standard');

  var descStr = gel('u_development_standard.description');

      // Create a new standard record

  var standardGaj = new GlideAjax('DDStandardAjax');

  standardGaj.addParam('sysparm_name', 'createStandard');

  standardGaj.addParam('sysparm_tableNameStr', _tableNameStr);

      standardGaj.addParam('sysparm_recordId', _recordId);

  standardGaj.addParam('sysparm_descStr', descStr.value);

      standardGaj.addParam('sysparm_standardId', standardId.value);

      standardGaj.getXML(allCompleted);

      function allCompleted(response) {

              var answer = response.responseXML.documentElement.getAttribute("answer");

      }

      GlideDialogWindow.get().destroy();

}

function cancelDialogbox(){

      //GlideDialogWindow.get().destroy();

  alert("Fire!");

  document.getElementById('u_development_standard.u_standard').value='5cc6acdc0fab7100a661b88ce1050e56,79c1e05c0fab7100a661b88ce1050eec';

}

[ChrisBurks]

Actually, you may be changing the value of u_development_standard.u_standard already on the client side. However at this point it's a hidden input field. But I know you're seeing what's displayed in the browser is different more than likely hasn't changed. And that's because the <p></p> element that's placed after the lock doesn't have that same id. The id is probably something like u_development_standard.u_standard_nonedit. To verify you can do an inspect element.

I took your <g:ui_element> example and plugged in table with incident and the field with watch_list to test out. It should be similar to what you need as it's a list. Here's what I did:

In a UI page I put in

HTML:

<g:ui_element table="incident" field="watch_list" id="d71f7935c0a8016700802b64c67c11c6" />

Rendered the page and did an inspect element:

In the red you can see the <p></p> element holding the list of names. In the green you can see the actual sys_id values of those names.

To change what is displayed in the list (<p></p> element) I used this script:

var wl = document.getElementById('incident.watch_list_nonedit'); // notice _nonedit appended

wl.innerHTML = 'System Administrator';

Saved and rendered the page again performing another inspect element.

You can see that it changed my list but the actual input values are still the same because those values came from the server side and I'm only changing client side. However, I can also change those values client side by adding the following to the script:

var wli = document.getElementById('incident.watch_list'); // without the _nonedit appended

wli.value = '6816f79cc0a8016401c5a33be04be441';

And again saved, redendered, inspect element:

Now my list and value are correlate. (of course you would do the same for   the second input field so that everything correlates).

Remember though this is all client side and no real values have changed on the server side. That you would need to do with some sort of processing when submitted. I hope this helps.

[reanimate]

Genius!   Thank you, it works as you describe.

But!

Unfortunately, when the glide list is populated (in my case:

document.getElementById('u_development_standard.u_standard_nonedit').innerHTML = 'Current and / or previous passed, gs.log used';

document.getElementById('u_development_standard.u_standard').value='004ba0ec0feb7100a661b88ce1050e49,042b286c0feb7100a661b88ce1050e9e';

This populates it, however when I click the magnifying glass to add / remove, there are no entries in the slush bucket.

Looks like there is more I need to populate but not sure how:

[ChrisBurks · Accepted solution]

If you're starting off with an empty list and you want to add to it, you should also see a "_edit" which you're probably aware of since that is the element that contains your actual glide-list and you needed to change the display value to get it to show. Or at least that's what I get and had to do.

So inside of that you'll see the list is actually a simple select element that if not empty would contain option elements. If you want to add/remove to that then you need to do the same as before and capture it via DOM.

I believe the id for the select element would be something like this "select_0u_development_standard.u_standard".

So document.getElementById('select_0u_development_standard.u_standard') should do it. From there you'll need to create an element and stuff it with the desired data. Then append it to the select element. Something like this:

var selEl = document.getElementById('select_0u_development_standard.u_standard');

var optEl = document.createElement('option');

var txtNd = document.createTextNode([your display value if different from actual value]);

optEl.setAttribute('value', [your actual value. usually the sys_id]);

optEl.appendChild(txtNd);

selEl.appendChild(optEl);

All of those values should correlate to what you already have going on with the previous stuff. Of course you can optimize the code so that you can add multiple at a time. I'll leave that up to you though.

[ChrisBurks]

I forgot to mention about the clicking on the magnifying glass. Do an inspect element on the magnifying glass and check to see what is assigned to the "onclick" attribute. It should have something similar to this:

onclick="reflistOpen( 'u_development_standard.u_standard','u_standard','[?]','null', 'false', ''); mousePositionSave(event); event.stop();"

Take notice of the red question mark. That is where the table is referenced to bring in the records to choose from. It might be null in yours therefore making your slush bucket empty.