The CreatorCon Call for Content is officially open! Get started here.

Customising a slush bucket (list collector) in a UI page and on a task form

klautrup
Kilo Expert

Hi,
in cmdb_ci_service I have a custom related list where when I select in the left box it provides the details below:
find_real_file.png

I have a UI Page where I create a slushbucket displaying the same records:

<g:ui_slushbucket left_header="Available VPP processes" right_header="Selected VPP processes" />


But in the UI page those additional information are not displayed when selecting a record:
find_real_file.png

Is this possible to configure in a UI Page?
If not is there a way of adding a vertical scroll bar to the left+right slushbucket boxes, or alternatively show the entire name when hovering the cursor over a record making long names readable?

I also have a UI Formatter pointing to ootb UI Macro named 'ui_slushbucket_products' allowing me on a task form to add the same slushbucket:
find_real_file.png

I populate it in a onLoad client script using slush.addLeftChoice and slush.addRightChoice.

Same question whether there is a way to display the additional information when a record is selected, or alternatively to add a vertical scroll bare or a mouse over showing the full name of the record?

 

1 ACCEPTED SOLUTION

Not applicable

Hi Klatrup,

Good question. 

First, You may add the options to a slush bucket in a very simple way like this:

<g:evaluate jelly="true">
   var users= new GlideRecord('sys_user');
       users.query();
</g:evaluate>
<g:ui_slushbucket name="sb" left_header="Left Side" right_header="Right Side">
   <j:while test="${users.next()}">
   <option value="${users.sys_id}" title="${users.name}"> ${users.name} </option>
   </j:while>
</g:ui_slushbucket>

This helps me in managing the list better and allows me to have the hover effect by adding the TITLE attribute to the option.

 

Second, you can add a horizontal scroll bar using client  script trick. Identify the id for the left select option. In my case it is "sb_left"(slushbucket name_left). Write the below in the client script to the scroll 🙂

 

$j("#sb_left").css("width","100%");
$j("#sb_left").css("overflow","auto"); 

 

The third option would be playing with client script, Ajax calls and few added table elements to the HTML. This would not be simple but can be done for sure. If the above fulfills your needs then I would suggest not to go for it.

Please mark the answer correct and helpful if it was 🙂

 

Thanks,

Vidyasagar

View solution in original post

2 REPLIES 2

Not applicable

Hi Klatrup,

Good question. 

First, You may add the options to a slush bucket in a very simple way like this:

<g:evaluate jelly="true">
   var users= new GlideRecord('sys_user');
       users.query();
</g:evaluate>
<g:ui_slushbucket name="sb" left_header="Left Side" right_header="Right Side">
   <j:while test="${users.next()}">
   <option value="${users.sys_id}" title="${users.name}"> ${users.name} </option>
   </j:while>
</g:ui_slushbucket>

This helps me in managing the list better and allows me to have the hover effect by adding the TITLE attribute to the option.

 

Second, you can add a horizontal scroll bar using client  script trick. Identify the id for the left select option. In my case it is "sb_left"(slushbucket name_left). Write the below in the client script to the scroll 🙂

 

$j("#sb_left").css("width","100%");
$j("#sb_left").css("overflow","auto"); 

 

The third option would be playing with client script, Ajax calls and few added table elements to the HTML. This would not be simple but can be done for sure. If the above fulfills your needs then I would suggest not to go for it.

Please mark the answer correct and helpful if it was 🙂

 

Thanks,

Vidyasagar

klautrup
Kilo Expert

Hi Vidyasagar,
I went for the vertical scroll bars both in my UI Page and in my client script for the task form.
Excellent thank you!