Update an Element in a List with Ajax

This product version has reached end of life and is no longer supported. Click here for the latest documentation.

You may need to refresh the widget when the content is outdated with its source, and to update it without interfering with the display and behavior of the page the Ajax technique is the way to accomplish it.

Example

In this example we have a list of the computers and we’ll change the hard disk size of an element and get the price. We want the element to be updated in the Table Records widget. Our goal is to update an element in the widget without need to refresh the page nor the widget.

Create a screen with a query in the preparation screen action to fetch the records from the Computer entity. Add a calculated attribute named 'Quantity' and set its value to '0';
Place a Table Records widget in the screen and set the source record list to be the query in the preparation. Name the widget 'ComputerTable'. Later, you will need to reference this widget by its name;
Add a new column to the table records and name it “Price”. Set the expression with value 'Quantity * PurchasePrice';
Create a screen action and name it 'ChangeQuantity'. Add an integer input parameter and name it 'QuantityToAdd'. This input adds to the quantity either '1' (increment) or '-1' (decrement);
On the 'ChangeQuantity' screen action, assign the new value for the quantity;
Next, add an Ajax Refresh tool . Set its “Widget” property to 'ComputerTable' (the name of the table records widget) and 'Row Number' with the current row number;
On the screen, place two containers, with a plus and minus icon, next to the quantity column values bound to the 'ChangeQuantity' screen action. Give the value '1' (increment) to one’s input and '-1' (decrement) to the other. Since the On Click screen action of a container has built-in Ajax capabilities there is no need to change the method.

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