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] button at the top right.
Image 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
Item nameImage
Identifierblank
Annotationblank
Item settingsImage (upload to File manager)
extensions::jpeg;jpg;png
Sort Order0

Image from Gyazo

Save the ID of created group. (7 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. (3 in the case of the below picture)

Image from Gyazo

3. Create endpoint

Click [Add new 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(7 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 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_1": {
  "id": "3_ext_01_0",
  "url": "https://kuroco-*****.g.kuroco-img.app/v=1659513618/files/topics/3_ext_1_0.png",
  "desc": "Kuroco logo",
  "url_org": "https://kuroco-*****.g.kuroco-img.app/files/topics/3_ext_1_0.png"
},
  • Image URL: details.ext_1.url
  • Image description: details.ext_1.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 use our contact form or Slack workspace.