Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>kintone-extensionNew to Visual Studio Code? Get it now.

kintone-extension

kintone-extension

|
1,943 installs
| (2) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

kintone Extension

This VS Code extension is for simplifying kintone customization development. This extension provides code completion and code snippets.

This extension supports JavaScript, React, and TypeScript.

Features:

  • Code snippets for and autocompletes kintone JavaScript APIs
  • Code snippets for kintone-js-sdk
  • Code snippets for kintone UI Components

Feature Details

Auto-Completion

This extension provides auto code completion for kintone JavaScript API.

Snippet

Snippet for JS API

  • JS API

    App
    Shortcut Code Generator Description
    ka-app-get
      var body = {
          "id": 1
      };
      kintone.api(kintone.api.url('/k/v1/app', true), 'GET', body, function(resp) {
          // success
          console.log(resp);
      }, function(error) {
          // error
          console.log(error);
      });
      
    Gets general information of an App, including the name, description, related Space, creator and updater information.
    ka-apps-get
      kintone.api(kintone.api.url('/k/v1/apps', true), 'GET', {}, function(resp) {
      // success
      console.log(resp);
      }, function(error) {
      // error
      console.log(error);
      });
      
    Gets general information of multiple Apps, including the name, description, related Space, creator and updater information.
    ka-app-add_preview

    var body = { "name": "APP_NAME", "space": 10, "thread": 11 }

    kintone.api(kintone.api.url('/k/v1/preview/app', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Creates a preview App.
    ka-app-deploy
      var body = {
          "apps": [
              {
                  "app": 1,
                  "revision": 57
              },
              {
                  "app": 1001,
                  "revision": 22
              }
          ],
          "revert": true
      };
    

    kintone.api(kintone.api.url('/k/v1/preview/app/deploy', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the settings of a pre-live App to the live App.
    ka-app-get-deploy
      var body = {
          "apps": [1, 1001]
      };
    

    kintone.api(kintone.api.url('/k/v1/preview/app/deploy', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the deployment status of the App settings for multiple Apps.
    ka-app-get-formFields
      var body = {
          "app": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the list of fields and field settings of an App.
    ka-app-add-formFields
      var body = {
      "app": 1,
      "properties": {
          "Text__single_line_1": {
          "type": "SINGLE_LINE_TEXT",
          "code": "Text__single_line_1",
          "label": "Text (single-line)",
          "noLabel": false,
          "required": true,
          "unique": true,
          "maxLength": 64,
          "minLength": 0,
          "defaultValue": "",
          "expression": "",
          "hideExpression": false
          },
          "Number": {
          "type": "NUMBER",
          "code": "Number",
          "label": "Number",
          "noLabel": true,
          "required": false,
          "unique": false,
          "maxValue": 64,
          "minValue": 0,
          "defaultValue": "12345",
          "expression": "",
          "digit": true,
          "displayScale": "",
          "unit": "$",
          "unitPosition": "BEFORE"
          }
      }
      };
    

    kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Adds fields to a form of an App.
    ka-app-update-formFields
      var body = {
      "app": 1,
      "properties": {
          "Text__single_line_1": {
          "type": "SINGLE_LINE_TEXT",
          "code": "Text__single_line_1",
          "label": "Text (single-line)",
          "noLabel": false,
          "required": true,
          "unique": true,
          "maxLength": 64,
          "minLength": 0,
          "defaultValue": "",
          "expression": "",
          "hideExpression": false
          },
          "Number": {
          "type": "NUMBER",
          "code": "Number",
          "label": "Number",
          "noLabel": true,
          "required": false,
          "unique": false,
          "maxValue": 64,
          "minValue": 0,
          "defaultValue": "12345",
          "digit": true,
          "displayScale": "",
          "expression": "",
          "unit": "$",
          "unitPosition": "BEFORE"
          }
      }
      };
    

    kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the field settings of fields in a form of an App.
    ka-app-delete-formFields
      var body = {
          "app": 1,
          "fields": [
              "Text__single_line_1",
              "Number"
          ]
      }
    

    kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'DELETE', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Deletes fields from a form of an App.
    ka-app-get-formLayout
      var body = {
          "app": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/app/form/layout', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the field layout info of a form in an App.
    ka-app-update-formLayout
      var body = {
      "app": 1,
      "layout": [
              {
                  "type": "ROW",
                  "fields": [
                      {
                          "type": "SINGLE_LINE_TEXT",
                          "code": "Text__single_line_",
                          "size": {
                              "width": "200"
                          }
                      }
                  ]
              },
              {
                  "type": "SUBTABLE",
                  "code": "Table",
                  "fields": [
                      {
                          "type": "SINGLE_LINE_TEXT",
                          "code": "Text2__single_line_",
                          "size": {
                              "width": "193"
                          }
                      },
                      {
                          "type": "MULTI_LINE_TEXT",
                          "code": "Text_Box__multi_line_",
                          "size": {
                              "width": "315",
                              "innerHeight": "125"
                          }
                      }
                  ]
              },
              {
                  "type": "ROW",
                  "fields": [
                      {
                          "type": "NUMBER",
                          "code": "Number",
                          "size": {
                              "width": "193"
                          }
                      }
                  ]
              },
              {
                  "type": "ROW",
                  "fields": [
                      {
                          "type": "RECORD_NUMBER",
                          "code": "Record_number",
                          "size": {
                              "width": "141"
                          }
                      },
                      {
                          "type": "CREATOR",
                          "code": "Created_by",
                          "size": {
                              "width": "136"
                          }
                      }
                  ]
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/preview/app/form/layout', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the field layout info of a form in an App.
    ka-app-get-views
      var body = {
          "app": 1,
          "lang": "en"
      };
    

    kintone.api(kintone.api.url('/k/v1/app/views', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the View settings of an App.
    ka-app-update-views
      var body = {
      "app": 1,
      "views": {
          "My List View": {
          "index": 0,
          "type": "LIST",
          "name": "My List View",
          "fields": [
              "Record_number",
              "Text_single_line"
          ],
          "filterCond": "Updated_datetime > LAST_WEEK()",
          "sort": "Record_number asc"     
          },
          "My Calendar View": {
          "index": 1,
          "type": "CALENDAR",
          "name": "My Calendar View",
          "date": "Updated_datetime",
          "title": "Rich_text",
          "filterCond": "",
          "sort": "Record_number asc"
          },
          "My Custom View": {
          "index": 2,
          "type": "CUSTOM",
          "html": "
    Custom View HTML
    ", "filterCond": "Updated_datetime >= LAST_WEEK() and Updated_datetime <= TODAY()", "sort": "Record_number asc" }, "(Assigned to me)": { "index": 3, "type": "LIST" } } };

    kintone.api(kintone.api.url('/k/v1/preview/app/views', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the View settings of an App.
    ka-app-get-generalSettings
      var body = {
          "app": 1,
          "lang": "en"
      };
    

    kintone.api(kintone.api.url('/k/v1/app/settings', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the description, name, icon, revision and color theme of an App.
    ka-app-update-generalSettings
      var body = {
          "app": 1,
          "name": "APP_NAME",
          "description": "Here is app description.",
          "icon": {
          "type": "PRESET",
          "key": "APP72"
          },
          "theme": "WHITE"
      }
    

    kintone.api(kintone.api.url('/k/v1/preview/app/settings', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the description, name, icon, revision and color theme of an App.
    ka-app-get-processManagementSettings
      var body = {
          "app": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/app/status', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the process management settings of an App.
    ka-app-update-processManagementSettings
      var body = {
          "app": "5",
          "enable": true,
          "states": {
              "Not started": {
                  "name": "Not started",
                  "index": "0",
                  "assignee": {
                      "type": "ONE",
                      "entities": [
                      ]
                  }
              },
              "In progress": {
                  "name": "In progress",
                  "index": "1",
                  "assignee": {
                      "type": "ALL",
                      "entities": [
                          {
                              "entity": {
                                  "type": "USER",
                                  "code": "user1"
                              },
                              "includeSubs": false
                          },
                          {
                              "entity": {
                                  "type": "FIELD_ENTITY",
                                  "code": "creator"
                              },
                              "includeSubs": false
                          },
                          {
                              "entity": {
                                  "type": "CUSTOM_FIELD",
                                  "code": "Boss"
                              },
                              "includeSubs": false
                          }
                      ]
                  }
              },
              "Completed": {
                  "name": "Completed",
                  "index": "2",
                  "assignee": {
                      "type": "ONE",
                      "entities": [
                      ]
                  }
              }
          },
          "actions": [
              {
                  "name": "Start",
                  "from": "Not started",
                  "to": "In progress",
                  "filterCond": "Record_number = \"1\""
              },
              {
                  "name": "Complete",
                  "from": "In progress",
                  "to": "Completed",
                  "filterCond": ""
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/preview/app/status', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the process management settings of an App.
    ka-app-get-customization
      var body = {
          "app": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/app/customize', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the JavaScript and CSS Customization settings of an App.
    ka-app-update-customization
      var body = {
          "app": 1,
          "scope": "ALL",
          "desktop": {
              "js": [
                  {
                      "type": "URL",
                      "url": "https://www.example.com/example.js"
                  },
                  {
                      "type": "FILE",
                      "file": {
                          "fileKey": "ddfc8e89-7aa3-4350-b9ab-3a75c9cf46b3"
                      }
                  }
              ],
              "css": []
          },
          "mobile": {
              "js": [
                  {
                      "type": "FILE",
                      "file": {
                          "fileKey": "20150519023802B3EB762E870645F889B22F9D4F1F3059023"
                      }
                  },
                  {
                      "type": "URL",
                      "url": "https://www.example.com/example-mobile.js"
                  }
              ]
          }
      }
    

    kintone.api(kintone.api.url('/k/v1/preview/app/customize', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the JavaScript and CSS Customization settings of an App.
    ka-app-get-appPermissions
      var body = {
          "app": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/app/acl', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the App permissions of an app.
    ka-app-update-appPermissions
      var body = {
          "app": 1,
          "rights": [
              {
                  "entity": {
                      "type": "USER",
                      "code": "user1"
                  },
                  "appEditable": true,
                  "recordViewable": true,
                  "recordAddable": true,
                  "recordEditable": true,
                  "recordDeletable": true,
                  "recordImportable": true,
                  "recordExportable": true
              },
              {
                  "entity": {
                      "type": "GROUP",
                      "code": "everyone"
                  },
                  "includeSubs": true,
                  "appEditable": true,
                  "recordViewable": true,
                  "recordAddable": true,
                  "recordEditable": true,
                  "recordDeletable": true,
                  "recordImportable": false,
                  "recordExportable": false
              },
              {
                  "entity": {
                      "type": "CREATOR"
                  },
                  "appEditable": true,
                  "recordViewable": true,
                  "recordAddable": true,
                  "recordEditable": true,
                  "recordDeletable": true,
                  "recordImportable": true,
                  "recordExportable": true
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/app/acl', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the App permissions of an App.
    ka-app-get-recordPermissions
      var body = {
          "app": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/record/acl', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the Record permission settings of an App.
    ka-app-update-recordPermissions
      var body = {
          "app": 1,
          "rights": [
              {
                  "filterCond": "Updated_datetime > \"2012-02-03T09:00:00Z\" and Updated_datetime < \"2012-02-03T10:00:00Z\"",
                  "entities": [
                      {
                          "entity": {
                              "type": "ORGANIZATION",
                              "code": "org1"
                          },
                          "viewable": false,
                          "editable": false,
                          "deletable": false,
                          "includeSubs": true
                      },
                      {
                          "entity": {
                              "type": "FIELD_ENTITY",
                              "code": "Updated_by"
                          },
                          "viewable": true,
                          "editable": true,
                          "deletable": true
                      }
                  ]
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/record/acl', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the Record permission settings of an App.
    ka-app-get-fieldPermissions

    var body = { "app": 1 };

    kintone.api(kintone.api.url('/k/v1/field/acl', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the Field permission settings of an App.
    ka-app-update-fieldPermissions
      var body = {
          "app": 1,
          "rights": [
              {
                  "code": "Text__single_line_",
                  "entities": [
                      {
                          "accessibility": "WRITE",
                          "entity": {
                              "type": "USER",
                              "code": "user1"
                          }
                      },
                      {
                          "accessibility": "READ",
                          "entity": {
                              "type": "GROUP",
                              "code": "group1"
                          }
                      }
                  ]
              },
              {
                  "code": "Number",
                  "entities": [
                      {
                          "accessibility": "NONE",
                          "entity": {
                              "type": "ORGANIZATION",
                              "code": "org1"
                          },
                          "includeSubs": true
                      }
                  ]
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/field/acl', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the Field permission settings of an App.
    ka-app-evaluate-recordPermission
      var body = {
          "app": 1,
          "ids": [1, 2]
      };
    

    kintone.api(kintone.api.url('/k/v1/records/acl/evaluate', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Evaluates the API user's permissions for records and fields within an App.
    Record
    Shortcut Code Generator Description
    ka-record-get-record
      kintone.api(kintone.api.url('/k/v1/record', true) + '?app=20&id=100', 'GET', {}, function(resp) {
          // success
          console.log(resp)
      }, function(error) {
          // error
          console.log(error);
      });
      
    Retrieves details of 1 record from an App by specifying the App ID and Record ID.
    ka-record-get-records
      var query = 'Created_by in (LOGINUSER()) and Created_datetime = TODAY() order by $id asc limit 100 offset 0'
      var fields = '&fields[0]=$id&fields[1]=Created_by&fields[2]=Created_datetime'
      kintone.api(kintone.api.url('/k/v1/records', true) + '?app=8&query=' + query + fields, 'GET', {}, function(resp) {
          // success
          console.log(resp);
      }, function(error) {
          // error
          console.log(error);
      });
      
    Retrieves details of multiple records from an App by specifying the App ID and a query string.
    ka-record-add-record

    var body = { 'app': 1, 'record': { 'Text': { 'value': 'Sample' }, 'Number': { 'value': 1 } } }

    kintone.api(kintone.api.url('/k/v1/record', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Adds 1 record to an App.
    ka-record-add-records

    var body = { "app": 1, "records": [ { "Text": { "value": 'Sample001' }, "Number": { "value": 1 } }, { "Text": { "value": 'Sample002' }, "Number": { "value": 2 } } ] }

    kintone.api(kintone.api.url('/k/v1/records', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Adds multiple records to an App.
    ka-record-update-record
      var body = {
          "app": 1,
          "id": 1,
          "record": {
              "Text": {
                  "value": "ABC"
              }
          }
      };
    

    kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates details of 1 record in an App by specifying its record number, or a different unique key.
    ka-record-update-records
      var body = {
          "app": 1,
          "records": [
              {
                  "id": 1,
                  "record": {
                      "Text": {
                          "value": "Silver plates"
                      }
                  }
              },
              {
                  "id": 2,
                  "record": {
                      "Text": {
                          "value": "The quick brown fox."
                      }
                  }
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/records', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates details of multiple records in an App, by specifying their record numbers, or their unique keys.
    ka-record-delete-records
      var body = {
          'app': 1,
          'ids': [100,80],
          'revisions': [1,4]
      }
    

    kintone.api(kintone.api.url('/k/v1/records', true), 'DELETE', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Deletes multiple records in an app.
    ka-record-get-cursor
      var body = {
      'id': '9a9716fe-1394-4677-a1c7-2199a5d28215'
      };
      kintone.api(kintone.api.url('/k/v1/records/cursor', true), 'GET', body, function(resp) {
      // success
      console.log(resp);
      }, function(error) {
      // error
      console.log(error);
      });
      
    Retrieves multiple records from an App by specifying the cursor ID.
    ka-record-add-cursor
      var body = {
      'app': 1,
      'fields': ['$id', 'Created_by', 'Created_datetime'],
      'query': 'Created_by in (LOGINUSER()) and Created_datetime = TODAY() order by $id asc',
      'size': 500
      };
      kintone.api(kintone.api.url('/k/v1/records/cursor', true), 'POST', body, function(resp) {
      // success
      console.log(resp);
      }, function(error) {
      // error
      console.log(error);
      });
      
    Adds a cursor so that large amount of records can be obtained from an App.
    ka-record-delete-cursor
      var body = {
      'id': '9a9716fe-1394-4677-a1c7-2199a5d28215'
      };
      kintone.api(kintone.api.url('/k/v1/records/cursor', true), 'DELETE', body, function(resp) {
      // success
      console.log(resp);
      }, function(error) {
      // error
      console.log(error);
      });
      
    Deletes a cursor by specifying the cursor ID.
    ka-record-get-comments
      var body = {
          'app': 1,
          'record': 1,
          'order': 'desc',
          'offset': 0,
          'limit': 10
      }
      kintone.api(kintone.api.url('/k/v1/record/comments', true), 'GET', body, function(resp) {
      // success
      console.log(resp);
      }, function(error) {
      // error
      console.log(error);
      });
      
    Retrieves multiple comments from a record in an app.
    ka-record-add-comment

    var body = { 'app': 43, 'record': 1, 'comment': { 'text': 'This comment is from the Administrator. \nPlease check!', 'mentions': [ { 'code': 'user16', 'type': 'USER' }, { 'code': 'Global Sales_1BNZeQ', 'type': 'ORGANIZATION' }, { 'code': 'APAC Taskforce_DJrvzu', 'type': 'GROUP' } ] } } kintone.api(kintone.api.url('/k/v1/record/comment', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Retrieves multiple comments from a record in an app.
    ka-record-delete-comment
      var body = {
          'app': 1,
          'record': 1,
          'comment': 1
      }
      kintone.api(kintone.api.url('/k/v1/record/comment', true), 'DELETE', body, function(resp) {
          // success
          console.log(resp);
      }, function(error) {
          // error
          console.log(error);
      });
      
    Delete a comment in a record in an app.
    ka-bulk-request
      var body = {
          'requests': [
              {
                  'method': 'POST',
                  'api': '/k/v1/record.json',
                  'payload': {
                      'app':1690,
                      'record': {
                          'Single_line_text': {
                              'value': 'New text'
                          }
                      }
                  }
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/bulkRequest', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    The Bulk Request API allows multiple API requests to run on multiple kintone apps.
    ka-record-update-status

    var body = { 'app': 4, 'id': 1, 'action': 'Submit', 'assignee': 'user2', 'revision': 1 }

    kintone.api(kintone.api.url('/k/v1/record/status', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    This API updates the Status of one or multiple records.
    ka-record-update-multi-status
      var body = {
          'app': 4,
          'records': [
                  {
                          'id': 1,
                          'action': 'Submit',
                          'assignee': 'user2',
                          'revision': 1
                  },
                  {
                          'id': 2,
                          'action': 'Confirm'
                  },
                  {
                          'id': 3,
                          'action': 'Decline',
                          'revision': 5
                  }
          ]
      }
    

    kintone.api(kintone.api.url('/k/v1/records/status', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    This API updates the Status of multiple records.
    ka-record-update-assignees
      var body = {
          'app': 1,
          'id': 1,
          'assignees': ['user2'],
          'revision': 1
      }
    

    kintone.api(kintone.api.url('/k/v1/record/assignees', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Update assignees of a record.
    Space
    Shortcut Code Generator Description
    ka-space-get-space
      var body = {
          "id": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/space', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets information of a Space.
    ka-space-add-space

    var body = { "id": 1001, "name": "Sample Space Name", "members": [ { "entity": { "type": "USER", "code": "user1" }, "isAdmin": true }, { "entity": { "type": "GROUP", "code": "group1" }, "isAdmin": false }, { "entity": { "type": "ORGANIZATION", "code": "org1" }, "isAdmin": false, "includeSubs": true } ] };

    kintone.api(kintone.api.url('/k/v1/template/space', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Creates a Space from a Space template
    ka-space-update-space
      var body = {
          "id": 1001,
          "body": "Sample Space Description"
      };
    

    kintone.api(kintone.api.url('/k/v1/space/body', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the body of a Space
    ka-space-delete-space
      var body = {
          "id": 1001
      };
    

    kintone.api(kintone.api.url('/k/v1/space', true), 'DELETE', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Deletes a Space
    ka-space-get-spaceMembers
      var body = {
          "id": 1
      };
    

    kintone.api(kintone.api.url('/k/v1/space/members', true), 'GET', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Gets the list of Space Members of a Space.
    ka-space-update-spaceMembers
      var body = {
          "id": "1001",
          "members": [
              {
                  "entity": {
                      "type": "USER",
                      "code": "user1"
                  },
                  "isAdmin": true
              },
              {
                  "entity": {
                      "type": "GROUP",
                      "code": "group1"
                  },
                  "isAdmin": false
              },
              {
                  "entity": {
                      "type": "ORGANIZATION",
                      "code": "org1"
                  },
                  "isAdmin": false,
                  "includeSubs": true
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/space/members', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the Members of a Space
    ka-space-add-threadComment
      var body = {
          "space": 1001,
          "thread": 1001,
          "comment": {
              "text": "This is the Golden Gate Bridge in San Francisco. \nIsn't it gorgeous?",
              "mentions": [
                  {
                      "code": "john",
                      "type": "USER"
                  },
                  {
                      "code": "HR_EBbG2z",
                      "type": "ORGANIZATION"
                  },
                  {
                      "code": "Travel Club_9mhZNJ",
                      "type": "GROUP"
                  }
              ],
              "files": [
                  {
                      "fileKey": "a8c5360e-e919-4ac6-a300-b24fbc9ee1ec",
                      "width": 400
                  }
              ]
          }
      };
    

    kintone.api(kintone.api.url('/k/v1/space/thread/comment', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Adds a comment to a Thread of a Space.
    ka-space-update-thread
      var body = {
          "id": 1001,
          "name": "Thread Name",
          "body": "Thread Body"
      };
    

    kintone.api(kintone.api.url('/k/v1/space/thread', true), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates a Thread of a Space.
    ka-space-add-guests
      var body = {
          "guests": [
              {
                  "code": "guest1@example.com",
                  "password": "password",
                  "timezone": "America/Los_Angeles",
                  "locale": "en",
                  "image": "78a586f2-e73e-4a70-bec2-43976a60746e",
                  "name": "John Doe",
                  "company": "Company Name",
                  "division": "Sales",
                  "phone": "999-456-7890",
                  "callto": "skypecallto"
              }
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/guests', true), 'POST', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Adds Guest users to kintone.
    ka-space-update-guestMembers
      var body = {
          "id": 1001,
          "guests": [
              "guest1@example.com"
          ]
      };
    

    kintone.api(kintone.api.url('/k/guest/{guestspaceId}/v1/space/guests', false), 'PUT', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Updates the Guest Members of a Space.
    ka-space-delete-guests
      var body = {
          "guests": [
                  "guest1@example.com"
          ]
      };
    

    kintone.api(kintone.api.url('/k/v1/guests', true), 'DELETE', body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); });

    Deletes a Guest user from kintone.
  • Event

    Shortcut Code Generator Description
    ke
    kintone.events.on('app.record.index.show', function(event) { 
    return event;
    });
    Handle Event on kintone
    kepromise
    kintone.events.on('app.record.create.submit', function(event) {
    return new kintone.Promise(function(resolve, reject) {
    // resolve a promise function handler
    kintone.api(pathOrUrl, method, params, function(resp) {
    resolve(resp);
    });
    }).then(function(resp) {
    //handle response from above promise here
    });
    return event;
    });
    Handle Event on kintone using promise
  • proxy

    Shortcut Code Generator Description
    kapipromise
    kintone.api(pathOrUrl, method, params).then(function(resp) {
    //This should resolve first
    }).catch(function(error) {
    //If an error is included in the response message, show it
    });
    Send kintone REST API request using promise
    kproxyuploadpromise
    kintone.proxy.upload('url', 'POST', {} /* headers */, {} /* data */).then(function(args) {
    /* args[0] -> body(string)
    /* args[1] -> status(number)
    /* args[2] -> headers(object)
    */
    }, function(error) {
    //Display the response body (string) from the proxy API
    });
    Use kintone proxy to upload
    kplproxypromise
    kintone.plugin.app.proxy('pluginId', 'url', 'GET', {} /* headers */, {} /* data */).then(function(args) {
    /* args[0] -> body(string)
    /* args[1] -> status(number)
    /* args[2] -> headers(object)
    */
    }, function(error) {
    //Display the response body (string) from the proxy API
    });
    Use kintone proxy to send external request in plugin
    kplproxyuploadpromise
    kintone.plugin.app.proxy.upload('pluginId', 'url', 'POST', {} /* headers */, {} /* data */).then(function(args) {
    /* args[0] -> body(string)
    /* args[1] -> status(number)
    /* args[2] -> headers(object)
    */
    }, function(error) {
    //Display the response body (string) from the proxy API
    });
    Use kintone proxy to upload

Snippet for kintone-js-sdk

App
Shortcut Code Generator Description
kjs-app
var kintoneAuth = new kintoneJSSDK.Auth();
var paramsAuth = {
    username: 'YOUR_USER_NAME',
    password: 'YOUR_PASSWORD'
};
kintoneAuth.setPasswordAuth(paramsAuth);
 
var paramsConnection = {
    domain: 'YOUR_DOMAIN',
    auth: kintoneAuth
};
var connection = new kintoneJSSDK.Connection(paramsConnection);
// with connection
var kintoneApp = new kintoneJSSDK.App({connection});

// without connection, module will use session authentication of kintone var kintoneApp = new kintoneJSSDK.App();

Constructor for App module
kjs-app-getApp
var id = YOUR_APP_ID;
kintoneApp.getApp({id}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get single app
kjs-app-getApps
var limit = YOUR_LIMIT_NUMBER;
var offset = YOUR_OFFSET_NUMBER;
kintoneApp.getApps({offset, limit}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get multiple apps
kjs-app-getAppsByIDs
var ids = [YOUR_APP_ID_1, YOUR_APP_ID_2, YOUR_APP_ID_n];
var limit = YOUR_LIMIT_NUMBER;
var offset = YOUR_OFFSET_NUMBER;
kintoneApp.getAppsByIDs({ids, offset, limit}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get multiple apps by list of ids
kjs-app-getAppsByCodes
var codes = ['YOUR_APP_CODE_1', 'YOUR_APP_CODE_2'];
var limit = YOUR_LIMIT_NUMBER;
var offset = YOUR_OFFSET_NUMBER;
kintoneApp.getAppsByCodes({codes, offset, limit}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get multiple apps by a list of codes name
kjs-app-getAppsByName
var name = 'YOUR_APP_NAME';
var limit = YOUR_LIMIT_NUMBER;
var offset = YOUR_OFFSET_NUMBER;
kintoneApp.getAppsByName({name, offset, limit}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get multiple apps by name
kjs-app-getAppsBySpaceIDs
var spaceIds = [];
var limit = YOUR_LIMIT_NUMBER;
var offset = YOUR_OFFSET_NUMBER;
kintoneApp.getAppsBySpaceIDs({spaceIds, offset, limit}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get multiple apps by list of space's ids
kjs-app-addPreviewApp
var name = 'YOUR_APP_NAME';
var space = YOUR_APP_SPACE_ID;
var thread = YOUR_THREAD_ID_OF_SPACE;
kintoneApp.addPreviewApp({name, space, thread}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Creates a preview App.
kjs-app-deployAppSettings
var apps = [
  {
    revision: YOUR_REVISION,
    app: YOUR_APP_ID
  }
// Another app preview here
];
var revert = false;
kintoneApp.deployAppSettings({apps, revert}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates the settings of a pre-live App to the live App.
kjs-app-getAppDeployStatus
var apps = [
  YOUR_APP_ID
// Another app id here
];
kintoneApp.getAppDeployStatus({apps}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Gets the deployment status of the App settings for multiple Apps.
kjs-app-getViews
var previewApp = YOUR_APP_ID;
var previewLang = 'LANGUAGE_CODE'; // Ex: JA
var isPreview = true;
kintoneApp.getViews({app: previewApp, lang: previewLang, isPreview}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Gets the View settings of a an App.
kjs-app-updateViews
var app = YOUR_APP_ID;
var views = {
  'YOUR_VIEW_NAME': {
    'index': 0,
    'type': 'YOUR_VIEW_TYPE', // Default: 'LIST', 'CALENDAR', 'CUSTOM'
    'name': 'YOUR_VIEW_NAME',
    'fields': [
      'YOUR_FIELD_CODE'
      // Another field code here
    ],
    'filterCond': 'YOUR_QUERY',
    'sort': 'YOUR_SORT'
  }
  // Another view here
};
var revision = 'YOUR_SETTINGS_REVISION';
 
kintoneApp.updateViews({app, views, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates views in kintone app
kjs-app-getGeneralSettings
	
var app = YOUR_APP_ID;
var lang = 'LANGUAGE_CODE'; // Ex: JA
kintoneApp.getGeneralSettings({app, lang}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
 
// Get a pre-live (preview) general settings
var app = YOUR_APP_ID;
var lang = 'LANGUAGE_CODE'; // Ex: JA
var isPreview = true;
kintoneApp.getGeneralSettings({app, lang, isPreview}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Gets the description, name, icon, revision and color theme of an App.
kjs-app-updateGeneralSettings
var params= {
  app: YOUR_APP_ID,
  name: 'YOUR_APP_NAME',
  description: 'YOUR_COOL_DESCRIPTION',
  icon: {
    type: 'YOUR_ICON_TYPE', // specified: FILE, PRESET
    key: 'YOUR_ICON_KEY'
  },
  theme: 'YOUR_THEME', // specified: WHITE, RED, BLUE, GREEN, YELLOW, BLACK
  revision: 'YOUR_SETTINGS_REVISION'
};
 
kintoneApp.updateGeneralSettings(params).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Update the description, name, icon, revision and color theme of an App.
kjs-app-getFormFields
	
var app = YOUR_APP_ID;
var lang = 'LANGUAGE_CODE'; // Ex: JA
kintoneApp.getFormFields({app, lang}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
 
// Get a pre-live (preview) form fields
var app = YOUR_APP_ID;
var lang = 'LANGUAGE_CODE'; // Ex: JA
var isPreview = true;
kintoneApp.getFormFields({app, lang, isPreview}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get field of form in kintone app
kjs-app-addFormFields
var app = YOUR_APP_ID;
var fields = {
  'YOUR_FIELD_CODE': {
    'type': 'SINGLE_LINE_TEXT',
    'code': 'YOUR_FIELD_CODE',
    'label': 'Text (single-line)',
    'noLabel': false,
    'required': true,
    'unique': true
  }
  // Another field here
};
var revision = 'YOUR_SETTINGS_REVISION';
kintoneApp.addFormFields({app, fields, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Adds fields to a form of an App.
kjs-app-updateFormFields
var app = YOUR_APP_ID;
var fields = {
  'YOUR_FIELD_CODE': {
    'type': 'SINGLE_LINE_TEXT',
    'code': 'YOUR_FIELD_CODE',
    'label': 'Text (single-line)',
    'noLabel': false,
    'required': true,
    'unique': true
  }
  // Another field here
};
var revision = 'the_revision_of_the_settings ';
kintoneApp.updateFormFields({app, fields, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates the field settings of fields in a form of an App.
kjs-app-deleteFormFields
var app = YOUR_APP_ID;
var fields = [
  'YOUR_FIELD_CODE'
  // Another field code here
];
var revision = 'YOUR_SETTINGS_REVISION';
kintoneApp.deleteFormFields({app, fields, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Deletes the field settings of fields in a form of an App.
kjs-app-getFormLayout
	
var isPreview = true;
kintoneApp.getFormLayout({app, isPreview}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get layout of form in kintone app
kjs-app-updateFormLayout
	
var app = YOUR_APP_ID;
var firstRowLayout = {
  'type': 'YOUR_LAYOUT_TYPE',
  'fields': [
    {
      'type': 'YOUR_FIELD_TYPE',
      'code': 'YOUR_FIELD_CODE',
      'size': {
        'width': 'YOUR_FIELD_WIDTH'
      }
    }
  ]
};
var layout = [
  firstRowLayout
  // Another row layout here
];
var revision = 'YOUR_SETTINGS_REVISION';
 
// Update form layout
kintoneApp.updateFormLayout({app, layout, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates the field layout info of a form in an App.
Record
Shortcut Code Generator Description
kjs-record
var kintoneAuth = new kintoneJSSDK.Auth();
var paramsAuth = {
    username: 'YOUR_USER_NAME',
    password: 'YOUR_PASSWORD'
};
kintoneAuth.setPasswordAuth(paramsAuth);
 
var paramsConnection = {
    domain: 'YOUR_DOMAIN',
    auth: kintoneAuth
};
var connection = new kintoneJSSDK.Connection(paramsConnection);
var kintoneRecord = new kintoneJSSDK.Record({connection});
 
// without connection, module will use session authentication of kintone
var kintoneRecord = new kintoneJSSDK.Record();
The constructor of Record module
kjs-record-getRecord
	
var app = YOUR_APP_ID;
var id = YOUR_RECORD_ID;
kintoneRecord.getRecord({app, id}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Retrieves details of 1 record from an app.
kjs-record-getRecords
	
var app = YOUR_APP_ID;
var query = 'YOUR_QUERY_STRING';
var fields = [
    'YOUR_FIELD_CODE',
    // another fieldCode
]
var totalCount = 'YOUR_DECIDE_TRUE_OR_FALSE';
kintoneRecord.getRecords({app, query, fields, totalCount}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Retrieves details of multiple records from an app using a query string.
kjs-record-getAllRecordsByQuery
	
var app = YOUR_APP_ID;
var query = 'YOUR_QUERY_STRING';
var fields = [
    'YOUR_FIELD_CODE',
    // another fieldCode
]
var totalCount = 'YOUR_DECIDE_TRUE_OR_FALSE';
var seek = 'YOUR_DECIDE_TRUE_OR_FALSE';
kintoneRecord.getAllRecordsByQuery({app, query, fields, totalCount, seek}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Retrieves details of all records from an app using a query string.
kjs-record-getAllRecordsByCursor
const rcOption = {
  app: {your_app_id},
  fields: [
    '{your_field_code}',
    // another fieldCode
  ],
  query: '{your_query_string}'
};
 
kintoneRecord.getAllRecordsByCursor(rcOption).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err.get());
});
Retrieves details of all records from an app using a cursor.
kjs-record-addRecord
var app = YOUR_APP_ID;
var record = {
  YOUR_FIELD_CODE: {
    value: 'VALUE_OF_YOUR_FIELD_CODE'
  },
  // Another fieldcode here
};
kintoneRecord.addRecord({app, record}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Add one record to an app.
kjs-record-addRecords
		
var app = YOUR_APP_ID;
var record = {
    YOUR_FIELD_CODE: {
        value: 'VALUE_OF_YOUR_FIELD_CODE'
    },
    // Another fieldcode here
};
var records = [
    record,
    // another record
];
kintoneRecord.addRecords({app, records}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Add multiple records to an app.
kjs-record-addAllRecords
	
var app = YOUR_APP_ID;
var record = {
    YOUR_FIELD_CODE: {
        value: 'VALUE_OF_YOUR_FIELD_CODE'
    },
    // Another fieldcode here
};
var records = [
    record,
    // another record
];
kintoneRecord.addAllRecords({app, records}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  console.log(err)
});
Add multiple records to an app.
kjs-record-updateRecordByID
var app = YOUR_APP_ID;
var id = YOUR_RECORD_ID;
var record = {
    YOUR_FIELD_CODE: {
        value: 'VALUE_OF_YOUR_FIELD_CODE'
    },
    // Another fieldcode here
};
var revision = REVISION_OF_RECORD;
kintoneRecord.updateRecordByID({app, id, record, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates details of 1 record in an app by specifying its record number.
kjs-record-updateRecordByUpdateKey
var app = YOUR_APP_ID;
var updateKey = {
  field: 'YOUR_FIELD_CODE',
  value: 'YOUR_FIELD_CODE_VALUE'
};
var record = {
  YOUR_FIELD_CODE: {
    value: 'VALUE_OF_YOUR_FIELD_CODE'
  },
  // Another fieldcode here
};
var revision = REVISION_OF_RECORD;
kintoneRecord.updateRecordByUpdateKey({app, updateKey, record, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates details of 1 record in an app by unique key.
kjs-record-updateRecords
var app = YOUR_APP_ID;
var record = {
  YOUR_FIELD_CODE: {
    value: 'VALUE_OF_YOUR_FIELD_CODE'
  },
  // Another fieldcode here
};
 
// This object can not have both "id" and "updateKey" keys at the same time.
var recordUpdate = {
  // Required, if updateKey will not be specified.
  id: YOUR_RECORD_ID,
  // Required, if id will not be specified.
  updateKey: {
    field: 'YOUR_FIELD_CODE',
    value: 'YOUR_FIELD_CODE_VALUE'
  },
  record: record,
  revision: RECORD_REVISION_NUMBER
};
var records= [
  recordUpdate,
  // Another recordUpdate
]
kintoneRecord.updateRecords({app, records}).then((rsp) => {
    console.log(rsp);
  }).catch((err) => {
    // This SDK return err with KintoneAPIException
    console.log(err);
  });
Updates details of multiple records in an app, by specifying their record number, or a different unique key.
kjs-record-updateAllRecords
var app = YOUR_APP_ID;
var record = {
  YOUR_FIELD_CODE: {
    value: 'VALUE_OF_YOUR_FIELD_CODE'
  },
  // Another fieldcode here
};
 
// This object can not have both "id" and "updateKey" keys at the same time.
var recordUpdate = {
  // Required, if updateKey will not be specified.
  id: YOUR_RECORD_ID,
  // Required, if id will not be specified.
  updateKey: {
    field: 'YOUR_FIELD_CODE',
    value: 'YOUR_FIELD_CODE_VALUE'
  },
  record: record,
  revision: RECORD_REVISION_NUMBER
};
var records = [
  recordUpdate,
  // Another recordUpdate
]
kintoneRecord.updateAllRecords({app, records}).then((rsp) => {
    console.log(rsp);
  }).catch((err) => {
  console.log(err)
  });
Updates details of multiple records in an app, by specifying their record number, or a different unique key.
kjs-record-deleteRecords
var app = YOUR_APP_ID;
var ids = [YOUR_RECORD_ID]
kintoneRecord.deleteRecords({app, ids}).then((rsp) => {
   console.log(rsp);
}).catch((err) => {
   // This SDK return err with KintoneAPIException
   console.log(err);
});
Deletes multiple records in an app.
kjs-record-deleteRecordsWithRevision
var app = YOUR_APP_ID;
var idsWithRevision = {
  YOUR_RECORD_ID: REVISION_OF_RECORD
}
kintoneRecord.deleteRecordsWithRevision({app, idsWithRevision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Deletes all records in an app by query string
kjs-record-deleteAllRecordsByQuery
var app = YOUR_APP_ID;
 var query = 'YOUR_QUERY_STRING';
 kintoneRecord.deleteAllRecordsByQuery({app, query}).then((rsp) => {
     console.log(rsp);
 })
 .catch((err) => {
   console.log(err)
 });
Deletes all records in an app by query string
kjs-record-upsertRecord
		
var app = YOUR_APP_ID;
var updateKey = {
  field: 'YOUR_FIELD_CODE',
  value: 'YOUR_FIELD_CODE_VALUE'
};
var record = {
  YOUR_FIELD_CODE: {
    value: 'VALUE_OF_YOUR_FIELD_CODE'
  },
  // Another fieldcode here
};
var revision = REVISION_OF_RECORD;
kintoneRecord.upsertRecord({app, updateKey, record, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Insert or update a record to kintone app. Insert the record if the updateKey doesn't exists and update the record if the updateKey exists.
kjs-record-upsertRecords
	
var app = YOUR_APP_ID;
var records = [
  {
    updateKey: {
      field: 'YOUR_FIELD_CODE',
      value: 'YOUR_FIELD_CODE_VALUE_1'
    },
    record: {
      YOUR_FIELD_CODE: {
        value: 'VALUE_OF_YOUR_FIELD_CODE 1'
      },
    }
  }
];
kintoneRecord.upsertRecords({app, records}).then((resp) => {
  console.log(resp);
}).catch((err) => {
  console.log(err);
});
Insert or update up to 1500 records to kintone app. If the records are over 1500, It is thrown Error. Insert the records if the updateKey doesn't exists and update the records if the updateKey exists.
kjs-record-updateRecordAssignees
var app = YOUR_APP_ID;
var id = YOUR_RECORD_ID;
var assignees = ['YOUR_ASSIGNEE'];
var revision = REVISION_OF_RECORD;
 
kintoneRecord.updateRecordAssignees({app, id, assignees, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Update assignees of a record.
kjs-record-updateRecordStatus
	
var app = YOUR_APP_ID;
var id = YOUR_RECORD_ID;
var action = 'YOUR_ACTION_NAME';
var assignee = 'YOUR_ASSIGNEE';
var revision = REVISION_OF_RECORD;
 
kintoneRecord.updateRecordStatus({app, id, action, assignee, revision}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates the Status of a record of an app.
kjs-recordupdateRecordsStatus
var app = YOUR_APP_ID;
var recordStatusUpdateItem = {
  id: YOUR_RECORD_ID,
  action: 'YOUR_ACTION_NAME',
  assignee: 'YOUR_ASSIGNEE',
  revision: 'YOUR_RECORD_REVISION'
}
var records = [
  recordStatusUpdateItem,
  // another data like recordStatusUpdateItem
];
kintoneRecord.updateRecordsStatus({app, records}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Updates the Status of multiple records of an app.
kjs-record-getComments
var app = YOUR_APP_ID;
var record = YOUR_RECORD_ID;
var order = 'YOUR_ORDER_TYPE'; // asc or desc
var offset = YOUR_OFFSET_NUMBER;
var limit = YOUR_LIMIT_NUMBER;
kintoneRecord.getComments({app, record, order, offset, limit}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Get comments of the record
kjs-record-addComment
	
var app = YOUR_APP_ID;
var record = YOUR_RECORD_ID;
var comment = {
  text: 'YOUR_COMMENT_CONTENT',
  mentions: [
    {
      code: 'YOUR_MEMBER_CODE',
      type: 'YOUR_MEMBER_TYPE' // either `USER` or `GROUP` or `ORGANIZATION`
    },
    // another mention here
  ]
};
kintoneRecord.addComment({app, record, comment}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Add the record comment
kjs-record-deleteComment
var app = YOUR_APP_ID;
var record = YOUR_RECORD_ID;
var comment = YOUR_COMMENT_ID;
kintoneRecord.deleteComment({app, record, comment}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});
Delete the comment
RecordCursor
Shortcut Code Generator Description
kjs-cursor
var kintoneAuth = new kintoneJSSDK.Auth();
var paramsAuth = {
    username: 'YOUR_USER_NAME',
    password: 'YOUR_PASSWORD'
};
kintoneAuth.setPasswordAuth(paramsAuth);
 
var paramsConnection = {
    domain: 'YOUR_DOMAIN',
    auth: kintoneAuth
};
var connection = new kintoneJSSDK.Connection(paramsConnection);
// with connection
var kintoneRC = new kintoneJSSDK.RecordCursor({connection});
 
// without connection, module will use session authentication of kintone
var kintoneRC = new kintoneJSSDK.RecordCursor();
The constructor of record cursor
kjs-cursor-createCursor
var rcOption = {
    app: YOUR_APP_ID,
    fields: ['YOUR_FIELD_CODE'],
    query: 'YOUR_QUERY',
    size: YOUR_SIZE
}
 
kintoneRC.createCursor(rcOption).then(function(creatCursorResponse){
    var myCursor = creatCursorResponse;
    console.log('Cursor ID: ' + myCursor.id );
    console.log('Total Count: ' + myCursor.totalCount );
}).catch((err) => {
    // This SDK return err with KintoneAPIException
    console.log(err);
});
Create a cursor.
kjs-cursor-getRecords
var rcOption = {
    app: YOUR_APP_ID,
    fields: ['YOUR_FIELD_CODE'],
    query: 'YOUR_QUERY',
    size: YOUR_SIZE
}
 
kintoneRC.createCursor(rcOption).then(function(creatCursorResponse){
    var myCursor = creatCursorResponse;
    return kintoneRC.getRecords({id: myCursor.id})
}).then(function (getRecordsResponse) {
    console.log('Records result: ');
    console.log(getRecordsResponse);
}).catch((err) => {
    // This SDK return err with KintoneAPIException
    console.log(err);
});
Get one block of records.
kjs-cursor-getAllRecords
var rcOption = {
    app: YOUR_APP_ID,
    fields: ['YOUR_FIELD_CODE'],
    query: 'YOUR_QUERY',
    size: YOUR_SIZE
}
 
kintoneRC.createCursor(rcOption).then(function(creatCursorResponse){
    var myCursor = creatCursorResponse;
    return kintoneRC.getAllRecords({id: myCursor.id})
}).then(function (getAllRecordsResponse) {
    console.log('All records result: ');
    console.log(getAllRecordsResponse);
}).catch((err) => {
    // This SDK return err with KintoneAPIException
    console.log(err);
});
Get all records
kjs-cursor-deleteCursor
var rcOption = {
    app: YOUR_APP_ID,
    fields: ['YOUR_FIELD_CODE'],
    query: 'YOUR_QUERY',
    size: YOUR_SIZE
}
 
kintoneRC.createCursor(rcOption).then(function(creatCursorResponse){
    var myCursor = creatCursorResponse;
    return kintoneRC.deleteCursor({id: myCursor.id})
}).then(function (getAllRecordsResponse) {
    console.log('Cursor Deleted');
}).catch((err) => {
    // This SDK return err with KintoneAPIException
    console.log(err);
});
Delete a cursor

Snippet for kintone-ui-component

Alert
Shortcut Code Generator Description
kuc-alert
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
Initialize a KUC Alert
kuc-alert-set-render
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
Get dom element of component.
kuc-alert-set-text
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.setText('Network error');
Set the content of alert.
kuc-alert-set-type
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.setType('success');
Set the type of alert.
kuc-alert-on
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.on('click', function(event) {
    console.log('on click');
});
The callBack function will be execute after user click the alert.
kuc-alert-show
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.show();
Display the Alert.
kuc-alert-hide
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.hide();
Hide the Alert.
kuc-alert-disable
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.disable();
Disable the Alert.
kuc-alert-enable
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.enable();
Enable the Alert.
Attachment
Shortcut Code Generator Description
kuc-attachment
var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
Initialize a KUC attachment
kuc-attachment-render
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
Get dom element of component.
kuc-attachment-set-files
const body = document.getElementsByTagName("BODY")[0];
 
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
 
const button = new kintoneUIComponent.Button({text: 'Set Files'});
body.appendChild(button.render());
button.on('click', () => {
    attachment.setFiles([{name: 'test_1', size: 12345}]);
});
Set the files of attachment field.
kuc-alert-get-files
	
const body = document.getElementsByTagName("BODY")[0];
 
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
 
const button = new kintoneUIComponent.Button({text: 'Set Files'});
body.appendChild(button.render());
button.on('click', () => {
    attachment.setFiles([{name: 'test_1', size: 12345}]);
});
Get all files information of attachment field.
kuc-attachment-set-dropzone-text
const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setDropZoneText('Drop files here.');
Set the text of the drop zone
kuc-alert-set-browse-button-text
const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setBrowseButtonText('Browse');
Set the text of the browse button
kuc-alert-set-file-limit-text
const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setFileLimitText('Maximum: 1 GB');
Set the text of the file limit warn part.
kuc-alert-set-error-message
const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setErrorMessage('Error message');
Set the error message.
kuc-alert-show-error
const body = document.getElementsByTagName("BODY")[0];
 
const attachment = new kintoneUIComponent.Attachment({errorMessage: 'Error message'});
body.appendChild(attachment.render());
 
const showButton = new kintoneUIComponent.Button({text: 'Show Error'});
body.appendChild(showButton.render());
showButton.on('click', () => {
    attachment.showError();
});
Show the error message
kuc-attachment-hide-error
const body = document.getElementsByTagName("BODY")[0];
 
const attachment = new kintoneUIComponent.Attachment({errorMessage: 'Error message'});
body.appendChild(attachment.render());
 
const showButton = new kintoneUIComponent.Button({text: 'Show Error'});
body.appendChild(showButton.render());
showButton.on('click', () => {
    attachment.showError();
});
 
const hideButton = new kintoneUIComponent.Button({text: 'Hide Error'});
body.appendChild(hideButton.render());
hideButton.on('click', () => {
    attachment.hideError();
});
Hide the error message
kuc-attachment-on
const body = document.getElementsByTagName("BODY")[0];
 
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
 
attachment.on('filesAdd', (files) => {
    console.log('files:', files);
});
 
attachment.on('fileRemove', (files) => {
    console.log('files:', files);
});
Register callback for change event
kuc-attachment-show
	
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
attachment.show();
Display the attachment component.
kuc-attachment-hide
	
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
attachment.hide();
Hide the the attachment component.
Button
Shortcut Code Generator Description
kuc-button
var button = new kintoneUIComponent.Button({
    text: 'Submit',
    type: 'submit'
});
constructor of Button component
kuc-button-render
	
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
Get dom element of component.
kuc-button-set-text
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setText('submit');
Set displayed text in button.
kuc-button-set-type
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setType('normal');
Set the displayed type for button.
kuc-button-on
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.on('click', function(event) {
    console.log('on click');
});
Register callback for click event
kuc-button-show
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.show();
Display button.
kuc-button-hide
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.hide();
Hide button.
kuc-button-disable
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.disable();
Disable button.
kuc-button-enable
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.enable();
Enable button.
Checkbox
Shortcut Code Generator Description
kuc-check-box
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
Constructor of CheckBox
kuc-check-box-render
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
Dom element
kuc-check-box-add-item
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.addItem({
    label: 'Grape',
    value: 'grape',
    isDisabled: false
});
Add an item to the end of checkbox list.
kuc-check-box-get-item
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
var firstItem = checkbox.getItem(0);
console.log(firstItem);
Get the value of specific position in checkbox list.
kuc-check-box-remove-item
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0]; body.appendChild(checkbox.render());

checkbox.removeItem(0);

Remove the specific item from checkbox list.
Get all items from the checkbox
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
var items = checkbox.getItems();
items.forEach(function(item) {
    console.log(item.value + ':' + item.isDisabled);
});
kuc-check-box-get-items
kuc-check-box-get-value
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
var value = checkbox.getValue();
value.forEach(function(item) {
    console.log(item);
});
Get the checked values of the checkbox.
kuc-check-box-set-value
	
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.setValue(['Lemon']);
Set the checked value of checkbox.
kuc-check-box-disable-item
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.disableItem('Orange');
Set the disabled item of checkbox.
kuc-check-box-enable-item
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.enableItem('Banana');
Set the enable item of checkbox.
kuc-check-box-on
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.on('change', function(value) {
    console.log('on change');
});
Register callback for change event
kuc-check-box-show
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.show();
Display the checkbox.
kuc-check-box-hide
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.hide();
Hide the checkbox.
kuc-check-box-disable
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.disable();
Disabled the checkbox.
kuc-check-box-enable
var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});
 
var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());
 
checkbox.enable();
Enabled the checkbox.
ColorPicker
Shortcut Code Generator Description
kuc-color-picker
var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
Constructor of ColorPicker
kuc-color-picker-set-color
var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(colorPicker.render());
});
Get dom element of component.
kuc-color-picker-get-color
var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(colorPicker.render());
colorPicker.setColor('#666666');
Set the color of colorpicker .
kuc-color-picker-on
var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(colorPicker.render());
colorPicker.getColor();
Get the color of colorpicker.
kuc-color-picker-show
var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
colorPicker.on('change', function(color) {
    console.log(color);
});
 
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(colorPicker.render());
});
Register callback for click event
kuc-color-picker-hide
var myColorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myColorPicker.render());
myColorPicker.show();
Display ColorPicker.
kuc-color-picker-disable
var myColorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myColorPicker.render());
myColorPicker.hide();
Hide ColorPicker.
kuc-color-picker-enable
var myColorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myColorPicker.render());
myColorPicker.disable();
Disable ColorPicker.
Datetime
Shortcut Code Generator Description
kuc-date-time
var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});
Constructor of DateTime component
kuc-date-time-render

const date = new Date(); var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'}); const space = kintone.app.getHeaderSpaceElement(); space.appendChild(dateTime.render());

Get dom element of component.
kuc-date-time-get-value

const date = new Date(); var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'}); const space = kintone.app.getHeaderSpaceElement(); space.appendChild(dateTime.render()); dateTime.getValue();

Get the value of datetime field.
kuc-date-time-set-value
var dateTime = new kintoneUIComponent.DateTime({type: 'datetime', locale: 'en'});
const space = kintone.app.getHeaderSpaceElement();
space.appendChild(dateTime.render());
dateTime.setValue(new Date());
Set the value of datetime field.
kuc-date-time-get-locale
const date = new Date();
var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});
const space = kintone.app.getHeaderSpaceElement();
space.appendChild(dateTime.render());
dateTime.getLocale();
Get the setting of language.
kuc-date-time-set-locale
const date = new Date();
var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime'});
const space = kintone.app.getHeaderSpaceElement();
space.appendChild(dateTime.render());
dateTime.setLocale('en');
Set the language setting.
kuc-date-time-time-show
var container = kintone.app.getHeaderSpaceElement();
container.appendChild(myDateTime.render());
myDateTime.show();
Display DateTime.
kuc-date-time-time-hide
var myDateTime = new kintoneUIComponent.DateTime({value: new Date()});
 
kintone.events.on('app.record.index.show', function(event) {
    var container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.show();
});
Hide DateTime.
kuc-date-time-time-disable
var myDateTime = new kintoneUIComponent.DateTime({value: new Date()});
 
kintone.events.on('app.record.index.show', function(event) {
    var container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.disable();
});
Disable DateTime.
kuc-date-time-time-enable
var myDateTime = new kintoneUIComponent.DateTime({value: new Date(), isDisabled: false});
 
kintone.events.on('app.record.index.show', function(event) {
    var container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.enable();
});
Enable DateTime.
Dropdown
Shortcut Code Generator Description
kuc-dropdown
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
Constructor of dropdown
kuc-dropdown-render
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
Get dom element of component.
kuc-dropdown-add-item
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.addItem({label: 'Lemon', value: 'Lemon', isDisabled: true});
Add an item to dropdown list.
kuc-dropdown-remove-item
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
var firstItem = dropdown.getItems()[0];
dropdown.removeItem(0);
console.log(firstItem);
Remove an item at specific position in dropdown's list.
kuc-dropdown-get-items

var dropdown = new kintoneUIComponent.Dropdown({ items: [ { label: 'Orange', value: 'Orange', isDisabled: true }, { label: 'Banana', value: 'Banana', isDisabled: false } ], value: 'Banana' });

var body = document.getElementsByTagName("BODY")[0]; body.appendChild(dropdown.render());

var list = dropdown.getItems(); list.forEach(function(item) { console.log(item); });

The list contains all items of dropdown.
kuc-dropdown-get-value
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
var selectedItem = dropdown.getValue();
console.log(selectedItem);
Get value of the selected item
kuc-dropdown-set-value
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.setValue('Orange');
Set the selected value for dropdown.
kuc-dropdown-disable-item
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.disableItem('Orange');
Set the disabled item for dropdown.
kuc-dropdown-enable-item
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.enableItem('Banana');
Set the enabled item for dropdown.
kuc-dropdown-on
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.on('change', function(value) {
    console.log('on change');
});
Register callback for change event
kuc-dropdown-show
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.show();
Display the dropdown.
kuc-dropdown-hide
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.hide();
Hide the dropdown.
kuc-dropdown-disable
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.disable();
Disabled the dropdown.
kuc-dropdown-enable
var dropdown = new kintoneUIComponent.Dropdown({
    items: [
        {
            label: 'Orange',
            value: 'Orange',
            isDisabled: true
        },
        {
            label: 'Banana',
            value: 'Banana',
            isDisabled: false
        }
    ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(dropdown.render());
 
dropdown.enable();
Enabled the dropdown.
FieldGroup
Shortcut Code Generator Description
kuc-field-group
const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
Constructor
kuc-field-group-render

kuc-field-group-render
	
const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
Get dom element of component.
kuc-field-group-set-content
const radioBtn = new kintoneUIComponent.RadioButton({
      items: [{ label: 'Orange', value: 'orange' }, { label: 'Banana', value: 'banana' }],
      value: 'orange',
      name: 'Fruit'
});
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: radioBtn.render(),
      name: 'Group',
      toggle: 'expand'
    })
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
 
const text = new kintoneUIComponent.Text({ value: "12345" });
fieldGroup.setContent(text.render());
Add an item to end of the field group.
kuc-field-group-get-content

kuc-field-group-render
const radioBtn = new kintoneUIComponent.RadioButton({
      items: [{ label: 'Orange', value: 'orange' }, { label: 'Banana', value: 'banana' }],
      value: 'orange',
      name: 'Fruit'
});
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: radioBtn.render(),
      name: 'Group',
      toggle: 'expand'
    })
 
fieldGroup.getContent();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
Get content of field group
kuc-field-group-set-name

kuc-field-group-render
const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
 
fieldGroup.setName('New Group Name');
Set the name for the field group.
kuc-field-group-get-name
const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
 
fieldGroup.getName();
Get name of field group
kuc-field-group-set-toggle
const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      items: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
 
fieldGroup.setToggle('collapse');
Set the toggle state for the field group.
kuc-field-group-render

get-toggle
kuc-field-group-render
const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(fieldGroup.render());
 
fieldGroup.getToggle();
Get toggle state of the field group.
IconButton
Shortcut Code Generator Description
kuc-icon-button
var insertBtn = new kintoneUIComponent.IconButton({type: 'insert',color:'blue', size: 'small'});
Constructor
kuc-icon-button-render
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
Get dom element of component.
kuc-icon-button-render

kuc-icon-button-set-color
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setColor('green');
Change color of icon button.
kuc-icon-button-render

kuc-icon-button-set-shape
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setShape('normal');
Change shape of icon button.
kuc-icon-button-set-type
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.setType('remove');
Set the type of the button.
kuc-icon-button-on
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.on('click', function(event) {
    console.log('on click');
});
Register callback for click event
kuc-icon-button-show
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.show();
Display the icon button.
kuc-icon-button-hide
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.hide();
Hide the icon button.
kuc-icon-button-disable
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.disable();
Disabled the icon button.
kuc-icon-button-enable
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.enable();
Enabled the icon button.
Label
Shortcut Code Generator Description
kuc-label
var label = new kintoneUIComponent.Label({
    text: 'Name',
    textColor: '#e74c3c',
    backgroundColor: 'yellow',
    isRequired: true
});
Constructor
kuc-label-render
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
Get dom element of component.
kuc-label-set-text
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setText('Name');
Set the value of text field.
kuc-label-text-color
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setTextColor('#e74c3c');
Set color of caption.
kuc-label-background-color
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setBackgroundColor('#e74c3c');
Set color of background.
kuc-label-required
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setRequired(true);
Set the required for the label.
kuc-label-on
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.on('click', function(event) {
    console.log('on click');
});
Register callback for click event
kuc-label-show
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.show();
Display the Label.
kuc-label-hide
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.hide();
Hide the Label.
kuc-label-disable
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.disable();
Disabled the Label.
kuc-label-enable
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.enable();
Enabled the Label.
NotifyPopup
Shortcut Code Generator Description
kuc-notify-popup
var label = new kintoneUIComponent.Label({
    text: 'Name',
    textColor: '#e74c3c',
    backgroundColor: 'yellow',
    isRequired: true
});
Constructor
kuc-notify-popup-render
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
Get dom element of component.
kuc-notify-popup-set-text
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.setText('Submit failed');
Setting the displayed text on popup.
kuc-notify-popup-kuc-notify-popup-set-type
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.setType('success');
Setting type for popup.
kuc-notify-popup-on
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.on('click', function(event) {
    console.log('on click');
});
Register callback for click event
kuc-notify-popup-show
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.hide();
Hide the notify popup.
kuc-notify-popup-disable
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.disable();
Disabled the notify popup.
kuc-notify-popup-enable
var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.enable();
Enabled the notify popup.
RadioButton
Shortcut Code Generator Description
kuc-radio-button
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
Constructor
kuc-radio-button-render

kuc-radio-button-render
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
Get dom element of component.
kuc-radio-button-add-item
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            }
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.addItem({label: 'Lemon', value: 'Lemon', isDisabled: true});
Add an item to end of the radio button list.
kuc-radio-button-remove-item
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.removeItem(0);
Remove item at specific index of radio button list.
kuc-radio-button-get-items
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
var items = radioBtn.getItems();
items.forEach(function(item) {
    console.log(item);
});
Get all items in radio button list.
kuc-radio-button-get-value
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.getValue();
Get the selected item in radio button.
kuc-radio-button-render

kuc-radio-button-set-value

kuc-radio-button-render
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.setValue('Lemon');
Set the selected item for radio button.
kuc-radio-button-disable-item

kuc-radio-button-render
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.disableItem('Orange');
Set the disabled item for the radio button.
kuc-radio-button-enable-item
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.enableItem('Banana');
Set the enabled item for radio button.
kuc-radio-button-on
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.on('change', function(value) {
    console.log('on change');
});
Register callback for change event
kuc-radio-button-show

kuc-radio-button-show
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.show();
Display the radio button.
kuc-radio-button-hide
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.hide();
Hide the radio button.
kuc-radio-button-disable
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.disable();
Disabled the radio button.
kuc-radio-button-enable
var radioBtn = new kintoneUIComponent.RadioButton({
     name: "fruit",
     items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ],
    value: 'Banana'
});
 
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(radioBtn.render());
 
radioBtn.enable();
Enabled the radio button.
Spinner
Shortcut Code Generator Description
kuc-spinner
var spinner = new kintoneUIComponent.Spinner();
Constructor
kuc-spinner-render
var spinner = new kintoneUIComponent.Spinner();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(spinner.render());
Get dom element of component.
kuc-spinner-show
	
var spinner = new kintoneUIComponent.Spinner();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(spinner.render());
spinner.show();
Display the spinner.
kuc-spinner-hide
var spinner = new kintoneUIComponent.Spinner();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(spinner.render());
spinner.hide();
Hide the spinner.
Tabs
Shortcut Code Generator Description
kuc-tabs
var spinner = new kintoneUIComponent.Spinner();
Constructor
kuc-tabs-render
var button = new kintoneUIComponent.Button({
    text: 'Hello',
    type: 'submit'
});
button.on('click',function(e){
    alert('hello')
})
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: button.render()
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
   ]
});
 
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement()
    el.appendChild(tab.render());
});
Get dom element of component.
kuc-tabs-add-item
	
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    var item = { tabName: "Tab4", tabContent: "This is Tab4", isDisabled: true };
 
    el.appendChild(tab.render());
    tab.addItem(item);
});
Add an item to end of the tab list.
kuc-tabs-remove-item
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
 
    el.appendChild(tab.render());
    tab.removeItem(0);
});
Remove item at specific index of tab list.
kuc-tabs-get-items

kuc-tabs-render
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
         {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
 
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(tab.render());
 
    var items = tab.getItems();
    items.forEach(function(item) {
        console.log(item);
    });
});
Get all tabs.
kuc-tabs-get-value
	
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
 
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(tab.render());
 
    console.log(tab.getValue());
});
Get index of selected item.
kuc-tabs-set-value
	
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(tab.render());
 
    tab.setValue(1);
});
Set the selected value for the tab.
kuc-tabs-disable-item
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2"
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(tab.render());
 
    tab.disableItem('Tab2');
});
Disable a tab.
kuc-tabs-enable-item
var tab = new kintoneUIComponent.Tabs({
    items: [
        {
            tabName: "Tab1",
            tabContent: 'This is Tab1'
        },
        {
            tabName: "Tab2",
            tabContent: "This is Tab2",
            isDisabled: true
        },
       {
            tabName: "Tab3",
            tabContent: "This is Tab3"
        }
    ]
});
kintone.events.on('app.record.index.show', function(event) {
    var el = kintone.app.getHeaderSpaceElement();
    el.appendChild(tab.render());
 
    tab.enableItem('Tab2');
});
Enable a tab.
Text
Shortcut Code Generator Description
kuc-text
var text= new kintoneUIComponent.Text({value: '12345'});
Constructor
kuc-text-render
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
Get dom element of component.
kuc-text-set-value
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.setValue('input text');
Set the value of text field.
kuc-text-get-value
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.getValue();
Get the value of text field.
kuc-text-on
	
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.on('click', function(event) {
    console.log('on click');
    console.log('value: ' + event.target.value);
});
Register callback for a event of component
kuc-text-show
	
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.show();
Display the Text field.
kuc-text-hide
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.hide();
Hide the Text field.
kuc-text-disable
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.disable();
Disabled the Text field.
kuc-text-enable
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.enable();
Enabled the Text field.
TextArea
Shortcut Code Generator Description
kuc-text-area
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
Construtor
kuc-text-area-render
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
Get dom element of component.
kuc-text-area-set-value
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.setValue('set value into textarea');
Set the value of textarea field.
kuc-text-area-get-value
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.getValue();
Get the value of textarea field.
kuc-text-area-on
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.on('click', function(event) {
    console.log('on click');
});
Register callback for a event of component
kuc-text-area-show
	
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.show();
Display the TextArea field.
kuc-text-area-hide
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.hide();
Hide the TextArea field.
kuc-text-area-disable
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.disable();
Disabled the TextArea field.
kuc-text-area-enable
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.enable();
Enabled the TextArea field.
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft