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 from Gyazo

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

Image from Gyazo

2. Create a topic

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

Image from Gyazo

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

Image from Gyazo

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

Image from Gyazo

3. Create endpoint

Click [Configure Endpoint] on the API list page.

Image 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 from Gyazo

Click [Add].

Image 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 from Gyazo

Click [Try it out].

Image from Gyazo

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

Image from Gyazo

Check Details in Responses.

Image 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.