The Swagger UI requires to have CORS configured in order to function properly. The following steps should be followed to correctly configure CORS.
Open the <EI_HOME>/conf/synapse.properties file and add the following configuration.
Notice the synapse.rest.CORSConfig.Access-Control-Allow-Origin property has a value of https://localhost:9443 and this will enable CORS for localhost. You can define as many URLs as desired as comma-separated values so that CORS will be enabled for all defined URLs.
Open the management console of the WSO2 Enterprise Integrator and click on APIs in the Main tab. Click on Generate API as depicted in the image below.
The Swagger UI will then open.
On the left side, the Swagger definition of a sample API is shown and on the right side, the details of the API is shown. You can edit the Swagger definition as desired or import your own Swagger definitions by importing via a URL or uploading a definition file through the File menu of the Swagger editor.
Once done, click on the Generate API button to generate the API as depicted below.
The synapse configuration of the generated API will then be shown.
Clicking Save will save the API and redirect to the Deployed APIs section.
1 - The swagger button will direct to the swagger definition of the API
2 - The Try This API button will direct to the TryIt tool which allows testing the API
Editing the API
Click the Edit button and it will open the Edit API view. Click on the Edit swagger button to view the Swagger editor.
On the left side, the editable swagger definition is shown and on the right side, API details along with the Try it out options are shown. More details about the Try it out tool is explained in the next sections of this guide.
Once done with the editing, click on the Apply Changes button and it will redirect to the Edit API view. Click Save in the Edit API view and the API will be saved and you will be redirected back to the Deployed APIs view.
Trying out the API
In the Deployed APIs view, click on the Try This API to try out the API with sample requests and responses. Clicking this will open the Try out tool in a new browser tab. Note that this UI is accessible even without logging in to the WSO2 EI.
In the Try it out view, defined services of the API are shown and once you click on a service, it will expand and show the evaluate view of the selected service.
Click on the Try it out button and it will show the following view.
You can edit the payload and also set the content type of the request and the response. Click on Execute to send the request.
The response will be shown along with several other details such as the cURL command used, request URL, response code and etc.