<g:ui_slushbucket> Add right side values

[Yuna1]

Hi,

I'm working on a UI page slushbucket. Had 2 questions: 

(1).  So far my current version works but only able to add left side values through <j:while> & <option value> etc... 

Wondering are there anyway to add right side value? What would be the syntax? 

(2). Also are there any way to pass <g:evaluate> server side array to <script> client side? I was able to pass it as a string not an array,  like  '[Object GlideRecord] ...' . Not sure how to transfer that string as an array of gliderecord under client side. 

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

	 <g:evaluate jelly="true">
		var preMadeAssets = new GlideRecord('sys_user');
		preMadeAssets.orderBy('name');
		preMadeAssets.query();
</g:evaluate>
   <form id="bucketStuff">
      <div id="page">
         <table width="100%">
            <tr>
               <td>
				  
<g:ui_slushbucket name="sb">

   <j:while test="${preMadeAssets.next()}">
   
   <option value="${preMadeAssets.sys_id}"> ${preMadeAssets.name} </option>

   </j:while>	

</g:ui_slushbucket>

[Krauzi · Accepted solution]

Change your HTML to this:

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

	 <g:evaluate jelly="true">
		var preMadeAssets = new GlideRecord('sys_user');
		preMadeAssets.orderBy('name');
		preMadeAssets.query();
		var list = [];
		while (preMadeAssets.next()) {
			list.push({
				sys_id: preMadeAssets.getUniqueValue(),
				value: preMadeAssets.getDisplayValue()
			});
		}
</g:evaluate>
   <form id="bucketStuff">
      <div id="page">
         <table width="100%">
            <tr>
               <td>
<input type="hidden" id='users' value="${JSON.stringify(list)}" />	  
<g:ui_slushbucket name="sb" />

Add this to the 'Client script':

addLoadEvent(function() {
	sb.clear(); // without this, there will be a '--' item on the right side initially
	JSON.parse(gel('users').value).forEach(function (user) {
		sb.addRightChoice(user.sys_id, user.value);
	});
	
	// when you're done:
	var sysIds = sb.getValues(sb.getRightSelect());
});

[Yuna1]

Thank you so much! Working like a charm

[Yuna1]

Hi,

Thanks for helping me. Just wondering do you know if I can pass multiple value like preMadeAssets from server to client as well? 

Like below part I put it under <g:evaluate> but I can pass "selected" to client script. Tried to use <input> but keep failing.

var persona_id = "4aabce6c77cbc1109284d78aef5a99f3";
var authorized_users = new GlideRecord("sn_nowebonding_authorized_user");
authorized_users.addQuery('persona', 'CONTAINS', persona_id);
authorized_users.query();
var selected = [];
while (authorized_users.next()){
	selected.push({
		sys_id: authorized_users.getUniqueValue();
		value:  authorized_users.customer_user.getDisplayValue();
		});
	}
	
var preMadeAssets = new GlideRecord('sys_user');
preMadeAssets.orderBy('name');
preMadeAssets.query();
var list = [];
while (preMadeAssets.next()) {
	list.push({
	sys_id: preMadeAssets.getUniqueValue(),
	value: preMadeAssets.getDisplayValue()
	});	
}   
			

[Markus Kraus]

My recommendation would be to add this at end of the "</g:evaluate>" ...

...
var initData = {
	selected: selected,
	list: list
};
</g:evaluate>

... and change the hidden input field to this (different id and value):

<input type="hidden" id='initData' value="${JSON.stringify(initData)}" />

Now your 'Client script' should be looking like this (note first JSON.parse and that afterwards we can use initData):

addLoadEvent(function() {
	var initData = JSON.parse(gel('initData').value);

	initData.list.forEach(function (user) {
	// ... (add values to the slushbucket
});