SuggestBox

 Top  Previous  Next

SuggestBox is a Process Field. It can be used inside or outside of a ProcessRecord Element.

This highly configurable element can be used to provide the users with, as the name implies, suggest functionality. What can be understood from the suggest functionality is to offering users a set of options retrieved from data sources as the user types into the input field.

SB_Sample

  <input type="text" name="PRODNAME" value="{PRODNAME}" AUTOCOMPLETE="OFF" 
        mo:type="SuggestBox" mo:value="{PRODID};{PRODNAME}"
        mo:props="
           actionName      : 'SBox_Products_Action',
           dataSource      : 'sbox_prods',
           valueFieldName  : 'PRODID',
           autoComplete    : true,
           delay           : 500, 
           mouseUsage      : true, 
           align           : 'left',
           width           : 230,
           suggestField    : 'NAME',
           valueField      : 'ID',
           hdrCaptions     : 'Name,Price', 
           colFields       : 'NAME,PRICE',
           colWidths       : '80,20',
           colAligns       : 'left,right',
           required        : '3. Value and the Associated Value',
           valHandler      : CallMeToValidate,
           valErrorHandler : MyErrorHandler,
           onFocusHandler             : OnFocusHandler,
           onBeforeSendRequestHandler : OnBeforeSelectHandler,
           onReceiveResponseHandler   : OnReceiveResponseHandler,
           onBeforeRowPaintHandler    : OnBeforeRowPaintHandler,
           onFocusOptionHandler       : OnFocusOptionHandler,
           onChangeHandler            : OnChangeHandler,
           onFocusBlur                : OnBlurHandler
        " 
  />

See SuggestBox function class in  MoreMotion Face API.

actionParams configuration for SuggestBox:

  <actionParams name="SBox_Products_Action">
    <param name="dataSource">sbox_prods</param>
    <param name="nodesToEncrypt">ID</param>
    <param name="responseHandler">SBoxMgr.buildDropDownBox</param>
  </actionParams>  

Parameters

dataSource (Accepts MScript)

The name of the data source definition that is configured with dataSource configuration element.

nodesToEncrypt (Accepts MScript)

The names of the nodes (separated with commas) whose values to be encrypted. If more than one data sources are used then the nodes belonging to the different data sources should be separated with a semi-column.
 
e.g.: ID;ID,PRODUCT_ID

responseHandler (Accepts MScript)

The name of the response handler Javascript function that will receive the AjaxResponse and manage the refreshing of the target blocks. Unless a very special treatment is required the value of this element can be left to its default which is SBoxMgr.buildDropDownBox.

 

Required Javascript Files

This element requires the following files are linked to the page in the HEAD section of the HTML document as follows.

  <head> 
    ...
    <link rel="stylesheet" type="text/css" href="moremotion/face/Ajax/SuggestBox/default/0.css"></link>
    <script type="text/javascript" src="moremotion/face/Ajax/SuggestBox.js"></script>
  </head>

If you prefer to use your own CSS styles then link another css file instead of SuggestBox/default/0.css.