BEE can process "spreadsheet" form.  Like in a real spreadsheet, each column corresponds a data field and each row corresponds a data row.  Each cell can be uniquely identified by the field name and the row number as in Field_row.

To build such a "spreadsheet" form with BEE, you can display the data records using a "foreach" loop as in the previous example.  Each table cell contains an "input" tag of which the name is the field name joined with the row number (iteration) after an underscore.

For example, the fifth record will have these "input" tags: ID_5 (hidden, unchangeable), Name_5, Tel_5, Height_5 and Birthday_5.

Look at the following example:

<script language="bee">

// Process the form

...

</script>

<form method="post">

<table>

  <tr>

    <td><b>ID</b></td>

    <td><b>Name</b></td>

    <td><b>Tel</b></td>

    <td><b>Height</b></td>

    <td><b>Birthday</b></td>

  </tr>

<bee var="phbook%decode:Birthday" value="strftime:%d/%m/%Y">

<beedatabase "phbook" query="select * from PhoneBook">

<beeforeach source="(db)phbook" var="rec">

  <tr> 

    <td><input type=hidden name="ID_${result%rec:iteration}"

      value="${rec:ID}">${rec:ID}</td>

    <td><input type=text name="Name_${result%rec:iteration}"

      value="${rec:Name}"></td>

    <td><input type=text name="Tel_${result%rec:iteration}"

      value="${rec:Tel}"></td>

    <td><input type=text name="Height_${result%rec:iteration}"

      value="${rec:Height}"></td>

    <td><input type=text name="Birthday_${result%rec:iteration}"

      value="${rec:Birthday}"></td>

  </tr>

</beeforeach>

</table>

<input type=submit name=Submit value=Update>

</form>

In the above example, the form does not submit to any page.  The browsers will submit the result back to the very own page.  (To be compatible with older version of browsers, you can add action="${sys%url:page}" attribute to the <form> tag.)  Also, to simplify the example, we just select all the records in the table.  (You can modify the script to make a search-then-modify application as an exercise.)

In the top part where the comment text "Process the form" is located comes the definition of the table, the key field, and other decoding and encoding requirements.  Then follows the building of the matrix:

var phbook%table = "PhoneBook";

var phbook%keyfield = "ID";

var phbook%decode:Birthday = "strftime:%d/%m/%Y";

var phbook%encode:Birthday = "strtotime";

var Submit = "{sys%form:Submit}";

clear sys%form:Submit;

group sys%form result="phbook";

After this, you will have a new object called "matrix" containing a variable for each record named by the key value.  The elements of the variable is the field values, indexed by the field name.  In the above example, you will have matrix%5:ID, matrix%5:Name, matrix%5:Tel, matrix%5:Height and matrix%5:Birthday.

Also, you will have the following two variables: phbook%fields containing all field names, and phbook%keys containing all key values.

Note: If the matrix is to be fed into a "database" command (like what we're going to do in the following sections), the "result class" must be the database object.  If you do not specify the "result" parameter, it will be default to "result".  (In the same way, you can name the "matrix class" using the "matrix" parameter too, but the usage is trivial because the "database" command will take the name "matrix" as default.)

Once you have the matrix and the database object defined (with "table", "keyfield", "fields", "keys" and optionally "decode" and "encode" for some fields), the record modification operation is trivial:

switch ('{#Submit}') {

case 'Update':

   // Update existing records

   ...

   break;

case 'Insert':

   // Insert new records

   ...

   break;

case 'Delete':

   // Delete existing records

   ...

   break;

}

Let's look at these operations one by one.