Skip to main content
Version: 2.4

Swagger Wizard Tutorial

This tutorial illustrates how to call a REST API, generated from a Swagger / OpenAPI definition. We illustrate how it works using a Pokémon API, but the same approach can be used to integrate with any API, such as those offered by SAP.

Pokémon API

Pokemon Swagger JSON

  • We only need to import the /pokemon/{idOrName} method, though you can import both if you want to play with the other endpoint

Get Pokemon By Id

  • Check the generated folder, you will see that it contains a data model, as well as functions to get the API's configuration, call the API, and manipulate the objects returned by the API: Pokemons and Sprites

Generated Bricks

Create an app

  • Create a UI App, and a screen to display a Pokémon's name and sprite.
  • Title label Text property = Load a Pokemon
  • Load button button Text property = Load Pokemon
  • Here we use a Vertical Layout to organize a label for the title, an image, a label for the Pokémon's name, a text field and a button:

Create Screen

  • Edit the On Click function of the button so that:
    1. it gets a pokemon using the id in the input field using [get] getPokemonByIdOrName
    2. it then transforms the response into a pokemon object using JSON to Cloud Object
    3. then extract the Pokemon object properties using Get Pokemon's attributes to:
    • feed the label with its name
    • get the sprite you want using Get Sprite's attributes, and set it within the Image URL property of the image

Load Pokemon

Test

  • Go back to your UI app's root and click on the Open app in new tab button to run your app in a new tab.

Open App

  • Type a number or a Pokémon name and click Load Pokémon to see a Pokémon!

UI App Pokémon