How to check the data structure using Swagger UI

You can check the API response by using Swagger UI.
In this tutorial, we will check the data structure of the extra column configured in the content structure.

1. Create content structure

On the Content structure page, click [Add group] button at the top right.
Image (fetched from Gyazo)

Set an extra column for an image and create a new content structure referring to Content structure edit.

This time, we are setting as follows:

ItemSetting
Parent ItemNo selection
AnnotationItem nameImage
Annotationblank
Item settingsImage
extensions::jpeg;jpg;png
Sort Order0

Image (fetched from Gyazo)

Save the ID of created group. (8 in the case of the below picture)

Image (fetched from Gyazo)

2. Create a topic

On the topics list page, click [Add] at the top right.

Image (fetched from Gyazo)

Fill out referring to topics edit and click [Add].

Image (fetched from Gyazo)

Save the ID of the created topic. (959 in the case of the below picture)

Image (fetched from Gyazo)

3. Create endpoint

Click [Configure Endpoint] on the API list page.

Image (fetched from Gyazo)

This time, we create an endpoint with the following configuration:

ItemSettings
Pathtest
Enabled/DisabledEnabled
ModelCategoryContent
ModelTopics
OperationDetails
topics_group_idGroup ID of the structure of the content you have created(8 in this example)

Image (fetched from Gyazo)

Click [Add].

Image (fetched from Gyazo)

4. Check the structure of the extra column on Swagger UI

Click [Swagger UI] on the API list page.

Image (fetched from Gyazo)

Click the endpoint you have just created.

Image (fetched from Gyazo)

Click [Try it out].

Image (fetched from Gyazo)

Enter the topics ID which you saved on step 2 and click [Execute].

Image (fetched from Gyazo)

Check Details in Responses.

Image (fetched from Gyazo)

The data structure of image which we set as extra column ID=1 is as follows:

"ext_col_01": {
  "id": "959_ext_01_0",
  "url": "https://**********.g.kuroco-img.app/v=1627014746/files/topics/959_ext_01_0.jpg",
  "desc": "caption"
},
  • Image URL: details.ext_col_01.url
  • Image description: details.ext_col_01.desc

You can check various data such as other extra columns and response of API endpoint in list format, in the same way, so please use it for building the front-end.

If you have any other questions, please contact us or check out Our Slack Community.