Swagger

Radzen can connect to Swagger services and can create automatically 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: Automatically generate CRUD pages

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.

  1. Open the application that you created in the previous step for editing.
  2. Click data to go to the My DataSources screen.
  3. Click new to add a new data source.
  4. Select Swagger as data source type.
  5. Pick a Name for your data source.
  6. Enter the Swagger service info.
  7. Click Next.
  8. 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.

For this article we are using Amadeus Travel Records Swagger API. To get API Key please register/login and create an app here.

Step 3: Automatically generate CRUD pages

  1. Specify primary keys for entities.

  1. Check the Generate pages for CRUD operations check-box.
  2. Radzen will open Edit and Add pages by default in dialogs. Uncheck the check-box if you want to have navigation instead.
  3. Click Finish.

Paths requirements for auto-generation of pages:

  • Main page with DataGrid component will be generated if there is a path that ends with entity name and get operation with response type array of entity:
    ...
    "definitions": {
      "Category": {
        "required": [
          ...
        ],
        "type": "object",
        "properties": {
         ...
        }
      }
    ...
    "paths": {
      "/Northwind/Categories": {
        "get": {
          "tags": [
            "Categories"
          ],
          "summary": "Get Categories",
          "description": "Returns the EntitySet Categories",
          "operationId": "getCategories",
          "consumes": [],
          "produces": [
            "application/json"
          ],
          "parameters": [
              ...
          ],
          "responses": {
            "200": {
              "description": "OK",
              "schema": {
                "type": "array",
                "items": {
                  "$ref": "#/definitions/Category"
                }
              }
            }
          }
          ...
        }
      }
    
  • Add new page will be generated and Add New will be enabled on DataGrid component if there is a path that ends with entity name and post operation with response type entity:
    "paths": {
      "/Northwind/Categories": {
        "post": {
          "tags": [
            "Categories"
          ],
          "summary": "Create Category",
          "description": "Post a new entity to EntitySet Categories",
          "operationId": "createCategory",
          "consumes": [
            "application/json"
          ],
          "produces": [
            "application/json"
          ],
          "parameters": [
            {
              "name": "Category",
              "in": "body",
              "description": "The entity to post",
              "required": true,
              "schema": {
                "$ref": "#/definitions/Category"
              }
            }
          ],
          "responses": {
            "200": {
              "description": "OK",
              "schema": {
                "$ref": "#/definitions/Category"
              }
            }
          },
          "deprecated": false
        }
      }
    
  • Edit/Update page will be generated and Delete functionality will be enabled if there is a path that ends with /ENTITY_NAME(ENTITY_IDs), there are get, patch and delete operations with response type entity:
    "paths": {
      "/Northwind/v4/Categories({CategoryID})": {
        "get": {
          "tags": [
            "Categories"
          ],
          "summary": "Get Category",
          "description": "Returns the entity with the key from Categories",
          "operationId": "getByCategoryById",
          "consumes": [],
          "produces": [
            "application/json"
          ],
          "parameters": [
            {
              "name": "CategoryID",
              "in": "path",
              "description": "key: CategoryID",
              "required": true,
              "type": "integer",
              "format": "int32"
            },
            {
              "name": "$select",
              "in": "query",
              "description": "Selects which properties to include in the response.",
              "required": false,
              "type": "string"
            }
          ],
          "responses": {
            "200": {
              "description": "OK",
              "schema": {
                "$ref": "#/definitions/Category"
              }
            }
          },
          "deprecated": false
        },
        "delete": {
          "tags": [
            "Categories"
          ],
          "summary": "Delete Category",
          "description": "Delete entity in EntitySet Categories",
          "operationId": "deleteCategory",
          "consumes": [],
          "produces": [],
          "parameters": [
            {
              "name": "CategoryID",
              "in": "path",
              "description": "key: CategoryID",
              "required": true,
              "type": "integer",
              "format": "int32"
            },
            {
              "name": "If-Match",
              "in": "header",
              "description": "If-Match header",
              "required": false,
              "type": "string"
            }
          ],
          "responses": {
            "204": {
              "description": "No Content"
            }
          },
          "deprecated": false
        },
        "patch": {
          "tags": [
            "Categories"
          ],
          "summary": "Update Category",
          "description": "Update entity in EntitySet Categories",
          "operationId": "updateCategory",
          "consumes": [
            "application/json"
          ],
          "produces": [],
          "parameters": [
            {
              "name": "CategoryID",
              "in": "path",
              "description": "key: CategoryID",
              "required": true,
              "type": "integer",
              "format": "int32"
            },
            {
              "name": "Category",
              "in": "body",
              "description": "The entity to patch",
              "required": true,
              "schema": {
                "$ref": "#/definitions/Category"
              }
            }
          ],
          "responses": {
            "204": {
              "description": "No Content"
            }
          },
          "deprecated": false
        }
      }
    

Invoke Swagger operation with parameters and display the result in DataGrid component.

In this section we will show you how to search flights using Amadeus API.

  1. Create a page with Form component. Add form fields for origin, destination, departure, return and adults properties needed for Flight Affiliate Search data-source operation invoke. Change departure and return properties field type to date and adults to integer. Check required for all form fields.

  2. Invoke Swagger data-source method Flight Affiliate Search on Form component Submit event and provide parameters. Set flights property to invoke result.

  3. Bind DataGrid component to flights property, auto-generate columns and remove unwanted.

  4. Run the application to search flights.

We are here for you

Making our users happy is always a priority for us.