Click here to access legacy documentation for this feature
Overview
AJAX (Asynchronous JavaScript And XML) is often used for interacting with a data server through a browser page without needing to refresh.
You have already seen AJAX in use with Multiple Row Data List Retrievals. As you enter text into a Selections input box, the page begins to suggest valid data for you! With AJAX m-Painter helpers, you can add similar functionality into all of your web applications.
In m-Painter once you select an input, the Element Panel will open with an option for “Ajax Input Helpers”.
Each AJAX Helper feature will be discussed below:
Type-ahead Suggest
AJAX Type-ahead Suggest can be implemented on any input text box. When configured, as your end-user begins typing, the server will return a list of valid values. Users can either continue typing, or select a value from the list. Behind-the-scenes, the logic is passing the values entered in by your end-user and comparing that text to the value of a pre-existing field in a pre-existing model/application.
For this function to work, you must first build a Data Model or a Multiple Row Data List Retrieval application to use as your AJAX querying list.
When you first select the Type-ahead Suggest option, a modal will open prompting you to select your datasource. This will be either a Data Model or an m-Power Application.
Next, select the pre-existing model/application to query the dataset.
Once the model/application is selected, you can include any additional URL parameters in order to filter the dataset as needed.
Finally, select the field from the model/application you want used as the “Suggest” field.
Click “SAVE”.
Only applications/models from the current Data Dictionary will appear in this list. If you wish to use applications from other Data Dictionaries, use the available dropdown to “Select a dictionary”.
At runtime, a list will appear with matching values as to what the end user is typing in the input.
Ajax Cascading Dropdown List
A popular feature of m-Power Reports is the ability to have a cascading dropdown list. That is, the selection of one dropdown list, affects subsequent dropdown lists. with AJAX Cascading Dropdown Lists, this functionality is available for all application types except Retrievals.
After your first dropdown has been added, select the input box where you would like to add your cascading dropdown. From the Element Panel, select the “Ajax Input Helpers” -> Cascading Dropdown”.
A modal will open prompting you to select your datasource. This will be either a Data Model or an m-Power Application.
Next, select the pre-existing model/application to query the dataset.
Once the model/application is selected, you can include any additional URL parameters in order to filter the dataset as needed.
The last step is to set the “Which field does this dropdown depend on”. Select the input field from the current application that your cascading dropdown is dependent on.
Similarly, for the “Field name to look up” dropdown, select the field that associates back to your first dropdown.
Tip: Often the above dropdowns will have the same field selected.
In the example image below, my salesman dropdown is dependent on the select Region above. Therefore, I will select “R001 – Region” and “SREGION” respectively.
Click “SAVE”. At runtime, your end-user cannot choose the 2nd dropdown option, until the 1st dropdown value has been selected.
AJAX Return Data to Input
The AJAX Return Data feature will populate one or more inputs in a maintainer based on one key field.
To implement, select the input box or dropdown where you would like to add your Ajax helper. From the Element Panel, select the “Ajax Input Helpers” -> “Return Data to Input”.
If you are attempting to add an AJAX Return Data Dropdown, don’t forget to first create a dropdown list via m-Painter, then implement the AJAX Return Data feature on the dropdown.
A modal will open prompting you to select your datasource. This will be either a Data Model or an m-Power Application.
Next, select the pre-existing model/application to query the dataset.
Only applications/models from the current Data Dictionary will appear in this list. If you wish to use applications from other Data Dictionaries, use the available dropdown to “Select a dictionary”.
Once the model/application is selected, you can include any additional URL parameters in order to filter the dataset as needed.
Next, use the “Field name to Look up” to choose the field you want used as the key field for your return data from your pre-defined app/model.
All returned data will be returned based on this first field. If multiple records are found for this key, the first record is the one that will be returned.
Map all fields that you wish to be returned by selecting the “Current App fields” on the left and the “Fields from selected app” on the right. Repeat as needed to fully map each field.
Click “Save”.
In the example screenshot below, after the Zip Code is entered and the user moves their focus away from the field (either by using tab, clicking on a different input, or selecting the value if using a dropdown), AJAX will go out to the inquiry, pull the relevant data, and return it to the inputs based on the field mappings made in the last step (City, State, Country).
Remove Helper
In the event that you create an AJAX Helper but later decide you want to revert back to a standard Input box, use this option to remove any AJAX Helper.
To remove helpers, select the input box you wish to revert. From the blue context menu, select the “Quick Edit” option.
Select “Remove Ajax Feature” from the Configure Ajax Feature modal.
Additional Notes
- AJAX Helpers are not supported with the Grid Maintenance Template.
- AJAX Cascading Dropdowns are not supported with “Is-in-the-list” runtime value prompt Filters.