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.
- Create a local variable named 'ComputerList' with data type 'List'
and element type 'Computer'. This will be the source of the list;
- Insert a Table Records widget in the screen and assign the list
'ComputerList' as source;
- 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;
- Insert a Combo Box with source entity 'Computer', displaying the
computer model and bound to the local variable 'NewComputerId';
- Create a screen action and name it 'AddComputer';
- Insert a button on the screen bound to the screen action created
in the last step with the method property 'Ajax Submit';
- On the 'AddComputer' action screen, insert a query to get the computer
record given the 'NewComputerId' variable;
- 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.
Refresh Page Parts Using
Ajax | System
Actions with Ajax Capabilities