2015-01-26
1.1.0
OutSystems TechComm
9.0.0.19
All
All
How-tos
[Overview]
Samples of how to use Ajax in screens: 1. Refresh a list; 2. Add an element to a list; 3. Update an element in a list.
[Detail]
Asynchronous JavaScript and XML (Ajax) is a technique used on the client-side to create asynchronous Web applications. With Ajax, the end-user experience is greatly improved because we are able to exchange data with the server without interfering with the display and behavior of the page. This is accomplished by sending small asynchronous requests to the server while the user interacts with the Web screen. This allows for the end-user to update parts of the Web screen and not to have to wait for the response, while keeping the state of the page.
Each Web Screen of this project illustrates a use case of how you can use Ajax in the OutSystems Platform. Check how to:
Refresh a list with Ajax
- You need to have a list screen with a query to fetch the records in the preparation;
- Have a button on the screen bound to a screen action with Method 'Ajax Submit';
- On the screen action refresh the query with the Refresh Data tool;
- Use the Ajax Refresh to refresh only the TableRecords widget.
Learn more about how to refresh a list with Ajax.
Add an element to a list with Ajax
- You need to have an input form to set the values of the new record and a list screen to add the records;
- Have a button on the screen bound to a screen action with Method 'Ajax Submit';
- On the screen action append the record to the Table Records widget using the ListAppend action.
Learn more about how to add an element to a list with Ajax.
Update an element in a list with Ajax
- Add an input form in the Table Records to update the record values;
- Have a screen action bound to the event of changing the values of a list's record;
- On the screen add an Ajax Refresh action to update the record in the list with the new values.
Learn more about how to update an element in a list with Ajax.