Plug-in settings kintone UI Component (v0) guide

Introduction

kintone UI Component (v0) can be used to easily create Kintone-styled elements for plug-in settings pages. Refer to the kintone UI Component (v0) guide for an overview of the tool and instructions for use. This guide will introduce various ways to use kintone UI Component (v0) to create elements that would be useful for a plug-in settings page.

 

Note that this guide does not include a comprehensive list of all elements available. Refer to the kintone UI Component (v0) documentation for a complete list of all elements and their settings.

 

Please note that with the release of the v1 library, the v0 library is now in maintenance mode. No new functions are planned to be developed.

Alert Message

There are two types of alert messages that can be used. In this example, the HTML element has an ID of alert.

Success Alert

success_alert.png

 

Error Alert

error_alert.png

 

Label

Labels are generally used to insert titles for fields. In this example, the HTML element has an ID of label.

Normal Label

label.png

 

Required Label

label_required.png

 

Text Input

Text inputs can be made as single-line or multi-line input fields. In this example, the HTML element has an ID of input.

Single-line Input

single_line.png

 

Multi-line Input

multi_line.png

 

Check Box and Multiple Choice

Check box fields and multiple choice fields allow the user to select none, one, or multiple selections. In this example, the HTML element has an ID of multichoice.

Check Box

checkbox.png

 

Multiple Choice

multichoice.png

 

Dropdown and Radio Button

Dropdown fields and radio button fields require the user to select a single value. In this example, the HTML element has an ID of singlechoice.

Dropdown

dropdown_closed.png dropdown_open.png

 

Radio Button

Screen_Shot_2021-03-02_at_10.44.57.png

 

Button

There are two types of button styles that can be used. In this example, the HTML element has an ID of button.

Normal Button

normal_button.png

 

Submit Button

submit_button.png

 

Note

Layouts and styles may change in the case of future updates that include a change in design. 

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!