Sorter

A sorter allows the user to rearrange the order of items within a single sortable list or move items between a pair of sortable lists.

The sorter widget is populated using a 1010data query. The 1010data query associated with the widget should generate one or two columns (i.e., either values or values and labels).

Label
The text that is displayed above the sortable list (or the first list in a pair of sortable lists).
Label for alternate list
The text that is displayed above the second list in a pair of sortable lists.
Width of label
The number of pixels allocated for the text above the sortable list (or the first list in a pair of sortable lists).

If the text of the label is greater than the width specified, the label is truncated.

Width of label for alternate list
The number of pixels allocated for the text above the second list in a pair of sortable lists.

If the text of the label is greater than the width specified, the label is truncated.

Variable for value
The variable to hold the sorted list as a comma-separated string.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Note: You cannot use this variable when specifying a pair of sortable lists.
List variable for value
The variable to hold the sorted list (or the first list in a pair of sortable lists) as a list-value.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Note: You must use this variable for the first list in a pair of sortable lists and not the Variable for value.

This variable will store the items in the sorted list as elements in a list-value. The elements may be accessed via dot notation. For example, if you specified the variable @selected_value in the List variable for value field, you can access the second item in the list-value using the notation {@selected_value.2}.

For more detailed information on working with list-values, see the 1010data Reference Manual.

It is recommended that you use List variable for value over Variable for value, particularly if the items in your list contain commas.

Variable for alternate value
The variable to hold the second list in a pair of sortable lists as a list-value.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

This variable will store the items in the sorted list as elements in a list-value. The elements may be accessed via dot notation. For example, if you specified the variable @list_2_value in the Variable for alternate value field, you can access the second item in the list-value using the notation {@list_2_value.2}.

Text color
The color of the text of the items in the sortable lists.
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Text style
The appearance of the text of the items in the sortable lists.

When this field gets focus, a dialog is presented that allows the user to select the family, style, size, and other characteristics of the text such as letter spacing and underlining.

Item background color
The background color of the items in the sortable list (or the first list in a pair of sortable lists).
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Item background for alternate list
The background color of the items in the second list in a pair of sortable lists.
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic sorted_list_value="366,98A,3B7,A96,65B,CB7,96A,969,3A4" 
sorted_list_list=".(..)" list_1_value="" list_2_value="">
  <widget base_="pub.demo.retail.item" class_="sorter" itembg_="#f79646" 
label_="List to be sorted:" name="hmadded__1" relpos_="92,94" textcolor_="#ffffff" 
value_="@sorted_list_value">
    <link table2="pub.demo.retail.prod" col="sku" col2="sku"/>
    <willbe name="selection" value="g_first1(sku;;)"/>
    <willbe name="selection2" value="g_first1(itemdesc;;)"/>
    <sel value="selection=1"/>
    <sel value="selection2=1"/>
    <colord cols="sku,itemdesc"/>
  </widget>
  <widget class_="text" name="hmadded__2" relpos_="372,99" 
text_="Sorted list value: {@sorted_list_value}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic sorted_list_value="366,98A,3B7,A96,65B,CB7,96A,969,3A4" 
sorted_list_list="{lst('366','98A','3B7','A96','65B','CB7','96A','969','3A4')}">
  <widget base_="pub.demo.retail.item" class_="sorter" label_="List to be sorted:" 
listvalue_="@sorted_list_list" name="hmadded__3" relpos_="96,93" textcolor_="#8064a2" 
textstyle_="font-weight:bold;letter-spacing:0;">
    <willbe name="selection" value="g_first1(sku;;)"/>
    <sel value="selection=1"/>
    <colord cols="sku"/>
  </widget>
  <widget class_="text" name="hmadded__4" relpos_="295,97" 
text_="Sorted list list: {@sorted_list_list}"/>
  <widget class_="text" name="hmadded__5" relpos_="295,138" 
text_="Fourth value: {@sorted_list_list.4}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic list_1_value="" list_2_value="">
  <widget base_="pub.demo.retail.item" class_="sorter" itembg_="#c00000" 
label_="List #1" labelwidth_="150" listvalue_="@list_1_value" name="hmadded__7" 
relpos_="95,95" textcolor_="#ffffff" toitembg_="#00b050" tolabel_="List #2" 
tolabelwidth_="150" tolistvalue_="@list_2_value">
    <link table2="pub.demo.retail.prod" col="sku" col2="sku"/>
    <willbe name="selection" value="g_first1(sku;;)"/>
    <willbe name="selection2" value="g_first1(itemdesc;;)"/>
    <sel value="selection=1"/>
    <sel value="selection2=1"/>
    <colord cols="sku,itemdesc"/>
  </widget>
  <widget class_="text" name="hmadded__8" relpos_="595,97" 
text_="List #1: {@list_1_value}"/>
  <widget class_="text" name="hmadded__9" relpos_="595,154" 
text_="List #2: {@list_2_value}"/>
</dynamic>