This topic describes how to add an element to a list in a Table of Records without refreshing the whole page by using Ajax. You may need to refresh the widget when adding the new element to the list source, and to update it without interfering with the display and behavior of the page the Ajax technique is the way to accomplish it.


In this example we have a list of the computers and we want to add an element to the Table Records widget. Our goal is to add an element to the widget without refreshing the whole page.

  1. Create a local variable named 'ComputerList' with data type 'List' and element type 'Computer'. This will be the source of the list;
  2. Insert a Table Records widget in the screen and assign the list 'ComputerList' as source;
  3. Create a local variable named 'NewComputerId' with data type “Computer Identifier”. This variable will hold the id of the computer to be added to the list;
  4. Insert a Combo Box with source entity 'Computer', displaying the computer model and bound to the local variable 'NewComputerId';
  5. Create a screen action and name it 'AddComputer';
  6. Insert a button on the screen bound to the screen action created in the last step with the method property 'Ajax Submit';

  7. On the 'AddComputer' action screen, insert a query to get the computer record given the 'NewComputerId' variable;
  8. Next, add a ListAppend action. Set the 'List' with the table records list and the 'Element' with the record from the last query. You can use a ListInsert instead if you want to specify the position of the element in the list.


You can remove an element from a list by using the action ListRemove as you use the ListAppend to add. Learn more about system actions with Ajax capabilities.


Check the How to Design Screens with Ajax sample at OutSystems Forge to view this example in action.

See Also

Refresh Page Parts Using Ajax | System Actions with Ajax Capabilities