How to Design Screens with Ajax
Stable Version 1.1.0 (OutSystems 9)
Published on 26 January 2015 by 
Created on 16 January 2015
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.
Read More

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.
Reviews (0)
Samples & How-tos
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from TechComm who created this component.
How to Design Screens with Ajax has no dependencies.
Component Consumers
How to Design Screens with Ajax has no consumers.
Weekly Downloads 
Related Components
Silk UI Responsive Sample App
Functional fully-responsive application built with the Dublin template and Silk UI patterns, visit for more information.
OutSystems UI Mobile Samples
Get inspired and accelerate your development with these beautiful sample screens. Choose from an amazing collection of beautifully designed screens. Learn how to start using Silk UI and see the examples at 
Dynamic Forms
Huarlem Lima
Component to create dynamic forms with validation, tips and dependent fields. Very useful when the user needs to create his form, create polls, surveys, quiz and checklists. You can sort the fields by dragging and dropping.
More from TechComm
ZXing Services
OutSystems Technical Communication
This component provides services for barcode encoding and decoding in different formats: CODE 39, CODE 128, QR, EAN13, EAN8 throughZXing library (
Google Static Maps API
Wrapper for the Google Maps Static API. Use this component to add a static image showing the location of one or more addresses in a map. Configure several aspects of this image like showing a satellite image or a roadmap view, tune the zoom factor or customize the address marker.
Offline Data Sync Patterns
A collection of working samples for common data synchronization patterns between the database and local storage entities.