Swagger (Angular)
Radzen can connect to Swagger services and can create CRUD pages if entity key is provided.
How to build the application
- Step 1: Create and configure the application
- Step 2: Add the Swagger data source
- Step 3: Display a list of items in a DataGrid
Step 1: Create and configure the application
Create a new Radzen application by following the first step from the quickstart guide.
Step 2: Add the Swagger data source
In this step we create a data source that connects to a Swagger services.
- Open the application that you created in the previous step for editing.
- Click data to go to the My DataSources screen.
- Click new to add a new data source.
- Select Swagger as data source type.
- Set Name to Petstore. We will use the Petstore sample swagger data source.
- Enter the Swagger service info. Set the URL to
https://petstore.swagger.io/v2/swagger.json. - Click Next.
- Radzen will connect to the service and infer all paths/operations. By default all paths/operations are checked and you can choose/uncheck paths/operations needed for your application.
Step 3: Display a list of items in a DataGrid
- Create an empty page.
- Drag and drop a DataGrid component. Open the dropdown editor of the Data property.
- Pick findPetsByStatus from the Operations dropdown. That method has a required parameter that we need to set.
- Click in the empty area of the page designer to show the Page events.
- Edit the Load event.
- Add a new parameter with Name status and value
['available'].
Now run the application. Radzen will display the list of available pets from the Petstore API.
CRUD page generation
You can also generate CRUD pages from Swagger data sources. Make sure your schemas have a key specified though.
Start the New page wizard and select the CRUD Pages template. Then pick the desired Page schema and specify the operations that return, update, create and delete entities.