About TableProxy

The proxied attribute on a table component specifies a boolean value that determines whether table operations can be performed using JavaScript on the client-side. If set to true, JavaScript proxy code (TableProxy JavaScript object) is included in the table when rendering on the client, and thus can be used.


...
<table proxied="true">
  ...
  ...
</table>
...

Reading and writing input elements

The following UIX XML example uses the TableProxy to read table elements, sum up all the values in a column, and update the total.


...
<dataScope>
  <provider>
    <data name="tableData">
      <inline>
        <row name="Person 1" cost="11" />
        <row name="Person 2" cost="12" />
        <row name="Person 3" cost="13" />
        <row name="Person 4" cost="14" />
        ...
      </inline>
    </data>
  </provider>
  <contents>
    <form name="form1">
      <contents>
        <table proxied="true" tableData="${uix.data.tableData.row}"
               id="table1" ... >
          <contents>
            <column>
              <columnHeader>Name</columnHeader>
              <contents>
                <text text="${uix.current.name}"/>
              </contents>
            </column>
            <column>
              <columnHeader>Cost</columnHeader>
              <contents>
                <textInput name="cost" text="${uix.current.cost}"/>
              </contents>
            </column>
          </contents>
          <footer>
            <tableFooter>
              <total>
                <totalRow destination="javascript:updateTotal();">
                  <contents>
                    <textInput name="total" text="50"/>
                  </contents>
                </totalRow>
              </total>
            </tableFooter>
          </footer>
        </table>
      </contents>
    </form>
  </contents>
</dataScope>
...

When the Recalculate button is clicked, the updateTotal() JavaScript method is called. This method creates a new TableProxy using the table id, gets the number of rows in the table by calling the getLength() method, gets the form element in the column (for each row), sums the values and writes the total to the appropriate text field. The getFormElement(...) method takes an element name and the row index, and returns that element.


Example:

function updateTotal()
{
  var proxy = new TableProxy('table1');
  var rowCount = proxy.getLength(); 
  var total = 0;
  for(var i=0; i<rowCount; i++)
  {
    var currTextField = proxy.getFormElement('cost', i);
    // the minus zero here is necessary to convert the string value
    // to a number
    total += currTextField.value - 0;
  }
  document.form1.total.value = total;
}

Working with singleSelection

When a table is used in single selection mode, it is possible to use the TableProxy's getSelectedRow() method to get the index of the currently selected row. Here is an example:


Example:

function hire()
{
  var proxy = new TableProxy('table1');
  var row = proxy.getSelectedRow();
  // check to make sure that something was selected
  if (row < 0)
  {
    alert('You have not chosen anyone!');
  }
  else
  {
    var name = proxy.getFormElement('theName', row).value;
    alert('You have chosen to hire '+name);
  }
}

The above function is called by the following UIX XML code:


...
<table name="table1" ...>
  <tableSelection>
    <singleSelection ...>
      <contents>
        <button text="Hire" destination="javascript:hire()"/>
      </contents>
    </singleSelection>
  </tableSelection>
  <contents>
    <column>
      <columnHeader>Name</columnHeader>
      <contents>
        <text text="${uix.current.name}"/>
      </contents>
    </column>
    <column>
      <columnHeader>Name</columnHeader>
      <contents>
        <text text="${uix.current.cost}"/>
      </contents>
    </column>
    <formValue name="theName" value="${uix.current.name}"/>
  </contents>
</table>
...

Similarly, use the getSelectedRows() method on the TableProxy to get the selected row indices in multiple selection mode. This method returns an array, each element of which is an index of a selected row. Here is some sample JavaScript code:


Example:

function recruit()
  {
  var proxy = new TableProxy('table1');
  var rows = proxy.getSelectedRows();
  var length = rows.length;
  // make sure that something was selected
  if (length > 0)
  {
  var list = "";
  // loop through each selected row and concatenate the name
  for(var i=0; i < length; i++)
  {
  // get the next selected row index
  var row = rows[i];
  // get the selected row (from the index) and pull out the name
  var name = proxy.getFormElement('theName', row).value;
  list += '\n'+name;
  }
  alert("You have chosen to recruit "+list);
  }
  else
  {
  alert("You have not chosen anyone to recruit!");
  }
  }

This method would be called from the following UIX XML code:


...
<table ... >
  <tableSelection>
    <multipleSelection text="Select ...">
      <contents>
        <button text="Recruit" destination="javascript:recruit()"/>
      </contents>
    </multipleSelection>
  </tableSelection>
  ...
</table>
...