Table Style

The appearance of an e-Form table section can be styled using the Table Style design element. The background, border and text colour, border style and cell padding/spacing can be adjusted to fit design needs.

There is also an option to make the table visible with the ‘Table display’ property which assigns a value of hide or show to the table. A table is ‘show’ be default and all fields will appear on the form. The designer of the form can set the display to ‘hide’ and all elements within that table section will not appear when the form is rendered. This is handy if the form requires a series of fields to perform functionality that the user does not need to see.  It is also the property that is used along with the hide/show event on the radio button.

ch7_p39

The appearance of an e-Form can be styled using this design element. The background colour, border and cell padding can be adjusted to fit design needs.

As discussed in the Form Style section there are three levels in an e-Form where design can take place, at the Form Level, the Table Level and at the Element/Field Level. Table Style overrides the Form Style setting for the particular form section. All elements created within the table section will share all of these properties.

RADIO BUTTON EVENTS

In addition to standard selection functionality, you can associate an event per radio (option) button to hide or show (builder table) sections of the e-form, by clicking the ‘Hide/Show’ button on the property panel.

ch7_p42

In the ‘Adding Events’ window that appears, follow the instructions to make corresponding sections hidden or shown.

Step 1: Enter the largest assigned table/section number being used on the form. The value is 54 for our example and then press confirm.

ch7_p43

Step 2: Select the table/section number that you wish to hide or show and then click the > button to Show the section, or the >> button to Hide the table/section.

ch7_p44

Step 3: Associate the table sections that are going to be shown or hidden with an item by clicking on the appropriate item in the list.

Looking at the image below the logic reads as follows:

Table section 12 will be shown and table sections 14 and 16 will be hidden when the user selects the item ‘Pending’.

ch7_p45

When creating Radio Button events there are a few important things to remember and make note of:

  • Multiple tables can be shown and hidden at the same based on an item selection
  • There can only be one assignment per radio button item; so assign all hide and shows to an item at the same time.
  • Hide and Show are Table/section level functions, all fields sharing the same table section will be hidden or shown.
  • To separate fields from hide/show each field should be in its own table.
Contact Form Powered By : XYZScripts.com