Develop > Presentation layer > Customize WebSphere Commerce Accelerator, Organization Administration Console, or Administration Console > Tools framework > Slosh buckets
Add a slosh bucket
While adding a slosh bucket, the following files are modified:
- The JSP page to which you added the slosh bucket
- Modified resource bundle files MyPageResource_locale.properties
To add a slosh bucket:
Procedure
- Write the page content using JSP and JavaScript files. Your JSP file must include the following JavaScript:
<SCRIPT SRC="/wcs/javascript/tools/common/SwapList.js"></SCRIPT>
The following is example HTML code which includes a slosh bucket on the page. The values for the buttonName, buttonName2, and the customJavaScriptFunction variables should be replaced by the values.
<TR> <TD VALIGN="BOTTOM" CLASS="selectWidth"> <SELECT NAME="collateralSelected" CLASS='selectWidth' SIZE='5' MULTIPLE onChange="customJavaScriptFunction"></SELECT> </TD> <TD WIDTH=150px ALIGN=CENTER><br> <INPUT TYPE="button" NAME="addToSloshBucketButton" VALUE="buttonName" style="width: 120px" ONCLICK="addToSelectedCollateral();" ><br> <INPUT TYPE="button" NAME="removeFromSloshBucketButton" VALUE="buttonName2" style="width: 120px" ONCLICK="removeFromSelectedCollateral();" ><br> </TD> <TD VALIGN="BOTTOM" CLASS="selectWidth"> <SELECT NAME="collateralAvailable" CLASS='selectWidth' SIZE='5' MULTIPLE onChange="customJavaScriptFunction"></SELECT> </TD> </TR>
To increase the width of a slosh bucket list, set the following variable as follows in the output JSP file:
<style type='text/css'> .selectWidth {width: 235px;} </style>
Use code similar to the following in the JSP file when defining the list:
<SELECT NAME='definedShopperGroup' CLASS='selectWidth' MULTIPLE SIZE='<%=numOfVisibleItemsInList%>' onChange="updateSloshBuckets(this, document.f1.removeButton, document.f1.allShopperGroup, document.f1.addButton);"> </SELECT>
- Create a resource bundle with text for the slosh bucket. These files are...
- WC_EAR/properties/com/ibm/commerce/tools/componentname/properties
- workspace_dir/wc/properties/com/ibm/commerce/tools/componentname/properties
where componentname is the component to which you are adding the slosh bucket, and Enterprise_App_name is the name of the enterprise application you are using.
If national languages are supported, create the national language resource bundles with the appropriate language text. The national language file names must end with the locale supported. For example, for a French-language resource bundle, the file name should be filename_fr_FR.properties
- Create or update the resource bundle for globalization.
Related concepts
Related reference
Slosh bucket JavaScript functions