Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
maxLevel2

Overview

  • The Table building widgets within the Editor make building a simple summary table a simple task, however occasionally table need to have imbedded script to alter their appearance based on values entered into a form.

  • To achieve this a table can be built in script.  To assist this process the editor includes a table wrapper class called TableHelper

    Note

    The TableHelper class is available from version 6.0 onwards.

    Drag and drop table functionality is available from version 6.1 onwards that allows building tables without javascript. Please see Summary Table Tutorial for more information.

 


How It Works

Table of Contents
minLevel3
 

Info
titleForm Definition File

This example utilises the form Acme MySQL Property Inspection.afdz. Download from the link and when creating a new form select "Import from a Form Definition File (.afdz)"

 


1. Adding a Table via the TableHelper Class

To add a table to a form page perform the following tasks

  1. From the tools pallet drag and drop a HTML control onto the design area.  Ensure the contents of the control are blank and set the controls Id e.g "myTableControl"
  2. For the page add an event for onBeforePageShow by clicking the "Add..." button next to that event which appears under the Events section on the right hand properties panel for the page.  To make the pages properties appear click anywhere on in the design area for that page that isn't a control.
  3. The editor will prompt you for the name of the event handler and will then take you to JavaScript editor with the handler function pre configured.

2. Writing Script

To access the TableHelper simply create an instance of the object passing in the Id on the HTML control created above in step 1.

Code Block
themeEclipse
languagejs
var tableHeader = new AsdeqForms.TableHelper("myTableControl")

 

With an instance of the TableHelper created and linked to a HTML control a table can be defined.  An individual table row is defined as a list of cells, which in turn is made up as one or more pieces of JSON which set the cells attributes.

Every table starts with a header.  

Code Block
themeEclipse
languagejs
var testTable = new AsdeqForms.TableHelper("myTableControl")
testTable.renderHeader({text: "Greeting1", width: "50%"}, {text: "Greeting2", width: "50%"})
testTable.renderRow({text: "Hello"}, {text: "World"})

 

A header may have no text inserted into it, in which case it will not be displayed but importantly the header defines the table widths as below.

Code Block
themeEclipse
languagejs
var testTable = new AsdeqForms.TableHelper("myTableControl")
testTable.renderHeader({text: "", width: "50%"}, {text: "", width: "50%"})
testTable.renderRow({text: "Greeting", title: true}, {text: "Hello World"})

 

Cells can contain multiple elements which are passed as an array of JSON.  The most useful application of this functionality is to enable individual cells to contain both a heading as well as contents as below

Code Block
themeEclipse
languagejs
testTable.renderRow([{text: "Greeting1: ", title: true}, {text: "Hello World"}], [{text: "Greeting2: ", title: true}, {text: "Goodbye Cruel World}]) 

3. Setting a Cells Properties

Within the TableHelper class the following properties exist

 

Table Header

NameTypeCommentExample
textStringSet the header columns text. If blank the header will be hidden.
{text: "Greeting1"}
widthStringSet the columns width.
{text: "Greeting1", width: "50%"}

 

Table Cell

NameTypeCommentExample
textStringSet the cells text
{text: "Hello World"}
titleBooleanControls if the text should be bold
[{text: "Greeting1: ", title: true}, {text: "Hello World"}]
heightStringSpecifies the cells and thus the rows height
{text: "Hello World", height: "15px"}
colspanNumberAllows a cell on a row to span multiple columns
[{text: "Details: ", title: true, colspan: 3}, {text: data.details}]
colorStringValue specifying the color of the text in the cell 
[{text: "Details: ", title: true, color: "blue"}, {text: data.details, color: "#ff0000"}]
backgroundColorStringValue specifying the background color of a cell 
{text: "Hello World", backgroundColor: "white"}

4. Example 

The following code is from the attached example form and builds two quite complex summary tables for a property inspection.

Code Block
themeEclipse
languagejs
function onBeforePageShowSummaryPage( event )
{
    var tableHeader = new AsdeqForms.TableHelper("summaryTableHeader")
    tableHeader.renderHeader({text: "", width: "50%"}, {text: "", width: "50%"})
    
    var data = formEngine.model.data;

    var str = data.dateTime;
    var date = str.substr(6, 2) + "/" + str.substr(4, 2) + "/" + str.substr(0, 4);
    tableHeader.renderRow([{text: "Date: ", title: true}, {text: date}], [{text: "Inspector: ", title: true}, {text: getOptionText("insp", data.insp)}]) 
    tableHeader.renderRow([{text: "Location: ", title: true}, {text: data.location}], [{text: "Building: ", title: true}, {text: getOptionText("building", data.building)}]) 
    tableHeader.renderRow([{text: "Address: ", title: true}, {text: data.address}])

    var tableBody = new AsdeqForms.TableHelper("summaryTableBody")
    tableBody.renderHeader({text: "", width: "50%"}, {text: "", width: "50%"})

    var items = (formEngine.model.faultsMasterDetail.faultDetail)
    if (items.length > 0)
    {
        for (item of items)
        {
            tableBody.renderRow([{text: "Floor: ", title: true}, {text: item.floor}], [{text: "Room: ", title: true}, {text: getOptionText("room", item.room)}]) 
            
            if( item.noFault === "1")
                tableBody.renderRow([{text: "Fault Type: ", title: true}, {text: "No Faults"}])
            else
            {
                tableBody.renderRow([{text: "Category: ", title: true}, {text: getOptionText("category", item.category)}], [{text: "Component: ", title: true}, {text: item.component}]) 
                tableBody.renderRow([{text: "Fault Type: ", title: true}, {text: getOptionText("fault", item.fault)}])
                tableBody.renderRow([{text: "Prioritise: ", title: true}, {text: item.prioritise? "Yes" : "No"}])
                tableBody.renderRow([{text: "Comments: ", title: true}, {text: item.notes}])
            }
            tableBody.renderRow([{text: "", height: "5px"}])
        }
    }
}