I created my custom slushbucket UI macro, I copied and pasted the original code from ui_slushbucket UI macro then I called it ui_slushbucket_2 but it doesn't load correctly, it only shows the tittle and buttons.
this my custom ui macro
its code:
<?xml version="1.0" encoding="utf-8"?>
<!-- slushbucket creates its own table -->
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:macro name="slush3" left_header="${gs.getMessage('Available')}" right_header="${gs.getMessage('Selected')}" up_down="false"/>
<script>
var ${jvar_name};
addLoadEvent(function() {
${jvar_name} = new SlushBucket('${jvar_name}');
});
</script>
<div id="${jvar_name}" class="container-fluid slushbucket">
<div class="row form-group">
<div class="col-xs-6">
<div class="glide-list">
<label for="${jvar_name}_left">${jvar_left_header}</label>
<div class="slushbucket-top">
<!-- left selection -->
<select id="${jvar_name}_left"
name="${jvar_name}_left" class="slushselect form-control"
multiple="yes" size="10" width="120"
ondblclick="${jvar_name}.moveLeftToRight();">
<!-- option that gets erased onload -->
<options>--</options>
<!-- you can build your options list inline... -->
<g:insert/>
</select>
<div class="button-column" id="addRemoveButtons">
<A title="${gs.getMessage('uppercase_add')}" class="btn btn-default icon-chevron-right"
onclick="${jvar_name}.moveLeftToRight();" href="javascript:void(0)">
<span class="sr-only">
${gs.getMessage('uppercase_add')}
</span>
</A>
<A title="${gs.getMessage('Remove')}" class="btn btn-default icon-chevron-left"
onclick="${jvar_name}.moveRightToLeft();" href="javascript:void(0)">
<span class="sr-only">
${gs.getMessage('Remove')}
</span>
</A>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="glide-list">
<label for="${jvar_name}_right">${jvar_right_header}</label>
<div class="slushbucket-top slushbody">
<!-- left selection -->
<select id="${jvar_name}_right"
name="${jvar_name}_right" class="slushselect form-control"
multiple="yes" size="10" width="120"
ondblclick="${jvar_name}.moveRightToLeft();">
<!-- option that gets erased onload -->
<option>--</option>
</select>
<div id="upDownButtons" class="button-column">
<j:if test="${jvar_up_down != 'false'}">
<A title="${gs.getMessage('Move up')}" class="btn btn-default icon-chevron-up"
href="javascript:void(0)"
onclick="${jvar_name}.moveUp();" ondblclick="${jvar_name}.moveUp();">
<span class="sr-only">
${gs.getMessage('Move up')}
</span>
</A>
<A title="${gs.getMessage('Move down')}" class="btn btn-default icon-chevron-down"
href="javascript:void(0)"
onclick="${jvar_name}.moveDown();" ondblclick="${jvar_name}.moveDown();">
<span class="sr-only">
${gs.getMessage('Move down')}
</span>
</A>
</j:if>
</div>
</div>
</div>
</div>
</div>
</div>
</j:jelly>
In this UI page I call the custom ui macro:
This is the result
