This article will discuss how to add a row to a table during runtime, instead of making a server call. This method yields faster results.
Adding Rows during Runtime
- Create a table, bind to either a list of Simple Type or Complex Object
- Add desired fields to the table (Figure 1 shows a table with String variables First Name and Last Name)
Figure 1: Table Creation (bound data and control id)
3. Create a button for user to click (see Figure 2 below)
Figure 2: Append Row to Table with a button
4. For the button configuration options, under Events in the On Click event, use the appendElement() method that references the table. You may include objects in the parameters to add static data to the table
Adding new row with Data: ${Table1}.appendElement({"firstName": "John", "lastName": "Jones"});
Adding new row w/o Data: ${Table1}.appendElement({});
Results
Figure 3: Before
Figure 4: After User Clicks the Button
Example 2
Another example of adding data to a Table is if the data being added isn't static.
Just like the example above, create a Table and bind it to a list, and bind each control within the Table.
When the user clicks the 'Add new Contact' button, a Modal Section will pop up (note that the Modal Section should have its visibility set to 'None', otherwise it will pop up as soon as the page loads).
The 'Add new Contact" button sets the visibility of the Modal Section with the setVisible method in the On Click event and clears any previous text in the controls within the Modal Section.
Once the Modal Section pops up, the user can enter in the contact information. When the 'Add new Contact' button is clicked, the Table will be appended with that information.
The 'Add new Contact' button has an On Click event to append the Table using a JSON object, and also sets the visibility of the Modal Section using the setVisible method.
"name", "phoneNumber", and "email" are the bound variable names of the controls in the Table (see image below), and NameAdd, PhoneNumberAdd, and Email are the Control Ids of the controls inside of the Modal Section. When the user clicks the 'Add new Contact' button, it will take what was entered in those Text controls (getText method) and add it to the table (appendElement method).
When the page loads:
After the user clicks the 'Add new Contact' button and enters in contact information:
After clicking 'Add new Contact':
Related Article(s)
- Author: Lisa Leung, Courtney Silva
- Date Created: June 2, 2015
- Date Modified: October 29, 2015
Comments