Table Form

The goal is to make a form with mulitple tables, in order to create a nice ordering form.
Because the user can select the number of ordered items, we need to calculate the total cost as well.
So a grid or radio-type field were no options.

The solution is not dynamic, so any change to a product name or price, needs to be done in the fields, there is no background datastore parameter that needs updating.
So the administration can only be done by an experiences SSP-Forms-Administrator.

This is what it looks like:

Link: http://dev.ssp7.smt-x.com/Forms/Admin/formDetail.aspx?tab=1&id=395&ActiveFieldId=8484

we used these Fieldtypes & classes: 1 :

  Type: Read only display
  Label: formLabel_Shop
  Value: formValue_Shop

2 & 3 :

  Type: Text Field, 7 columns
  Label: formLabel_Border_H28_W100
  Value: formLabel_Border_H28_W100

Classes:

  .formLabel_Shop   {height:35px;width:300px;border-bottom: #c8c8c8 1px dotted;}
  .formValue_Shop   {height:35px;   width:200px;border-bottom: #c8c8c8 1px dotted;}
  .formLabel_Border_H28_W100  {height:35px;width:100px;border-top: #c8c8c8 0px dotted;border-bottom: #c8c8c8 1px dotted;}

Some more details on the fields:

Finally, the formula used in the last set of fields (3), both in label as in value:

  format('{0:N0}',tonumber('#REPLACE-FORMFIELD-HWRandapparatuur||200_003_Aantal||#',0) * 90)
  format('{0:N0}',tonumber('#REPLACE-FORMFIELD-HWRandapparatuur||200_003_Aantal||#',0) * 792)