When a REST service is invoked, it usually requires input data and returns the response data you want for further actions with it.
With Appery.io Visual Editor, it’s very fast and simple to map data between the scope and REST API services. This works either on request and on response. Arrow is showing the mapping direction.
The custom case of mapping is Binding. It ties UI to Scope with double directed arrows.
Mapping allows you to connect scope variables to service request/response parameters.
Create scope variables of the appropriate types:
Now you are ready to create a mapping between response data and scope variables.
Opening Mapping editor
To open Mapping editor do the following steps:
- Create a new service with needed parameters and open any screen.
- To start input or output mapping, go to
SCOPEview and create any function (by clicking Add) or open an existing one (by clicking Edit).
- In the function editor, click the arrow to filter snippets, select
Invoke service, and click Insert snippet. Then, click
<Backspace>to delete a default name with quotes. Then enter a service name manually or click
- The Mapping buttons for request and response parameters are automatically created when you select the
Invoke servicesnippet. They can be used to add some actions – one before running a service to define input mapping and on the service
Successevent to define output mapping:
- Click an appropriate Mapping button (for request or response parameters) to configure that mapping.
Instead of invoking services in the code editor with subsequent auto completing, you can use a drag and drop feature to map new functions.
There are some issues to consider:
- This feature doesn’t work for the
- This feature doesn’t work if the
SCOPEtab is inactive.
- You can drag any service (except
Settings), but drop it to an allowed location only.
Mapping service parameters
On the above screenshot, the value from the scope variable
flag is mapped to services
param1 parameter and the value from the scope variable
text is mapped to services
param2 parameter. To create the connection, drag and drop scope variable over service parameter; this way the connection is created. It’s also possible to do it in the other direction; drag and drop
For example, you have a service with the following parameters:
Then, you would need to create an appropriate array model in
Project > Model before mapping it to service parameters:
For example, this code returns the result in large letters:
Deleting a mapping arrow
- When you click Cancel, mapping changes won’t be saved and mapping code won’t be changed.
- When you click Save & Replace, mapping changes will be saved and previous mapping code will be replaced with new one.
- When you click Save & Show code, mapping changes will be saved and pop-up with new mapping code will be shown. If there is an error in code and the editor cannot find a needed self-executing function, the code and warning will be displayed. You would need to copy the code and paste it manually. The pop-up has 2 buttons: Close, Replace. Click Replace to replace previous mapping code with new one. If you click Close mapping arrows will be saved but this won’t affect the code itself. So, please use Save & Show code option only for advanced work with mapping.
When you’ve finished and saved changes, the mapping code will be inserted inside corresponding self-executing function.
You can open your saved mapping again to make any changes. You can also edit existing mapping code and replace it with new code. Please note it won’t make any changes to mapping editor so all the arrows won’t be changed.
If you have changed generated mapping function code and then edit mapping via mapping editor you will lose all the custom changes and the code will be replaced with new one.
If you need to change some part of custom mapping code, use Save & Show code instead of Save & Replace to copy the needed part of code and paste it where needed in order not to lose your custom changes.
Deleting Mapping button or changing service name in code leads to losing mapping. Be careful when renaming services. A service name in code must match the actual name of service instance.
The REST service instance supports the following events:
- Before the REST service invocation, there is a Mapping button to edit mapping that generates request data from scope variables.
- Success – this function is called only if the request was successful; no errors from the service or errors in the data were returned.
- Error – this function is only called if an error occurred with the request.
- Notify – this function is called to send back a notification of progress. It provides updates on the status of the promise execution, and may be called multiple times before the promise is either resolved or rejected.