The Web API Framework in DataFlex
Lesson 3 - Swagger UI
Swagger UI is a super handy tool that lets you visually explore and test your REST APIs right from your browser — no more switching between apps! It uses the OpenAPI spec (in JSON or YAML) to generate a sleek interface showing your API endpoints, return data, status codes, and even lets you try out requests. Here’s how to set it up and get started:
- Step 1: Understand Swagger UI Basics
- Swagger UI renders your REST APIs using the OpenAPI specification.
- It’s powered by the Swagger UI JavaScript library wrapped in a DataFlex custom control.
- This UI lets you see all your endpoints, response examples, and test the API without extra tools like Postman.
- Step 2: Create a Web View for Swagger UI
- Start by creating an empty web view in your DataFlex application — this will be the container for Swagger UI.
- You can also embed it inside existing views if needed.
- Step 3: Import the Swagger UI Class
- Import the cSwaggerUI into your web view code so you can instantiate and configure it.
- Step 4: Instantiate and Configure Swagger UI
- Create an instance of the cSwaggerUI class inside your web view.
- Set important properties like:
- For example: “/Api/OpenApi” (relative path).
- Column span and index: to control the layout and appearance of the UI.
- Step 5: Compile and Launch
- Compile your application and open the web view in a browser.
- You should now see your API endpoints beautifully rendered by Swagger UI.
- Step 6: Explore and Test Your APIs
- Use the "Try it out" buttons on the endpoints to send real requests and see live responses — all within your browser!
- Filters allow you to search by fields like description or unit price.
- Check out example responses and status codes for success and error cases.
- The interface works like a built-in Postman, so no need for extra tools.
- Step 7: Next Steps
- Your Swagger UI setup is now ready to power API testing and development.
The next lesson will dive into routers, so stay tuned!
REFERENCE LIBRARY
