7.1.9 Configuring a list editor

A list editor is a component that allows users to add strings to a list. It is configured using the <list-editor> element. This component has an input area that allows a user to input a string value and buttons on the side for adding or removing items in the list.

To add a value to the list box, the user enters a value into the input component and clicks the "+" button. A user removes a value from the list by selecting one or more items on the list and clicking the "-" button.

The list editor widget currently supports default values and enforces a minimum and maximum number of items in the list. Unlike other components, there may be more than one <default> element. Each default element will add another item to the list.

To add/delete/modify a list box

1. Open the appropriate XML file located in the Viewpoint home directory. Locate the <components> element.
2. Create the <component> with a unique id.
3. Insert the <list-editor> element within <component>.
4. Determine which widget to use for input to the list editor.
   • Specify a text box as the list editor input. This is the default and is used if no input area is configured in the XML.
     1. Use the <default> child element any number of times to add default items to the list.
     2. Set the <minimum> child element to specify the minimum items users may add to the list.
     3. Set the <maximum> child element to specify the maximum items users may add to the list.
     4. Optional: Specify a regular expression using the <regex> child element.

     <component id="zip_code_list">
       <description>List of ZIP Codes</description>
       <list-editor>
         <default>84043</default>
         <default>30052</default>
         <minimum>1</minimum>
         <maximum>5</maximum>
         <regex>^\d{5}$</regex>
       </list-editor>
     </component>

     

   • Specify a select box as the list editor input.
     1. Use the <select-value> element to preset default options in the list editor.

     <component id="licenses">
       <description>Software Licenses</description>
       <list-editor>
         <select-value>Matlab</select-value>
         <select-value>NetSuite</select-value>
         <select-value>Tomcat</select-value>
         <select-value>Windows Server 2008</select-value>
         <select-value>Microsoft Office 2010</select-value>
         <select-value>Adobe Acrobat 9</select-value>
       </list-editor>
     </component>

     

   • Specify a suggest box as the list editor input.
     1. Use the <suggest-box> element. See Configuring a suggest box.
   • Specify the list editor input as inferred values.
     1. Insert the <inferred-value> element.
     2. Set the source attribute to "moab", the type attribute to "node-name", and the component attribute to "suggest"
   • Specify the list editor input as a composite list.
     1. Insert the <composite-list-editor> element.
     2. Set the <display-value> element to determine how any new item in the list should be displayed.
     3. Set the <api-value> element to determine the internal, hidden value of any new item.
     4. Optional: Set the <add-text> element to specify the desired text of the “Add” button.
     5. Optional: Set the <remove-text> element to specify the desired text of the “Remove” button.

     <component id="storage-list">
       <composite-list-editor>
         <add-text>Add Storage</add-text>
         <api-value>
           <calculate operation="append-in-order">
             <value order="1">
               <component id="storage-amount" />
             </value>
             <value order="2">:</value>
             <value order="3">
               <component id="storage-type" />
             </value>
             <value order="4">@</value>
             <value order="5">
               <component id="storage-location" />
             </value>
           </calculate>
         </api-value>
         <display-value>
           <calculate operation="append-in-order">
             <value order="1">
               <component id="storage-amount" />
             </value>
             <value order="2"> units of type </value>
             <value order="3">
               <component id="storage-type" />
             </value>
             <value order="4"> at </value>
             <value order="5">
               <component id="storage-location" />
             </value>
           </calculate>
         </display-value>
       </composite-list-editor>
     </component>

     

     

     A description is not required for this component. However, if one is specified, it will be placed in the upper left section of the widget:

     

Related topics 

• Configuring the <components> element
• Setting component rules
• Getting component rule responses dynamically
• Changing a component/section's visibility
• Validating and invalidating components

© 2012 Adaptive Computing