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();

var id = YOUR_APP_ID;
kintoneApp.getApp({id}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

	
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);
});

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);
});

	
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);
});

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);
});

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);
});

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);
});

	
var isPreview = true;
kintoneApp.getFormLayout({app, isPreview}).then((rsp) => {
  console.log(rsp);
}).catch((err) => {
  // This SDK return err with KintoneAPIException
  console.log(err);
});

	
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);
});

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();

	
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);
});

	
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);
});

	
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);
});

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());
});

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);
});

		
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);
});

	
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)
});

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);
});

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);
});

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);
  });

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)
  });

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);
});

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);
});

var app = YOUR_APP_ID;
 var query = 'YOUR_QUERY_STRING';
 kintoneRecord.deleteAllRecordsByQuery({app, query}).then((rsp) => {
     console.log(rsp);
 })
 .catch((err) => {
   console.log(err)
 });

		
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);
});

	
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);
});

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);
});

	
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);
});

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);
});

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);
});

	
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);
});

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);
});

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();

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);
});

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);
});

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);
});

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);
});

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.setText('Network error');

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.setType('success');

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');
});

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.show();

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.hide();

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.disable();

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(alert.render());
alert.enable();

var alert = new kintoneUIComponent.Alert({text: 'Network error', type: 'error'});

const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());

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}]);
});

	
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}]);
});

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setDropZoneText('Drop files here.');

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setBrowseButtonText('Browse');

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setFileLimitText('Maximum: 1 GB');

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setErrorMessage('Error message');

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 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();
});

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);
});

	
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
attachment.show();

	
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
attachment.hide();

var button = new kintoneUIComponent.Button({
    text: 'Submit',
    type: 'submit'
});

	
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setText('submit');

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setType('normal');

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');
});

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.show();

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.hide();

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.disable();

var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.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 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 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
});

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);

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);

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);
});

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);
});

	
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']);

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');

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');

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');
});

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();

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();

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();

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();

var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});

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());
});

var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(colorPicker.render());
colorPicker.setColor('#666666');

var colorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(colorPicker.render());
colorPicker.getColor();

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());
});

var myColorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myColorPicker.render());
myColorPicker.show();

var myColorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myColorPicker.render());
myColorPicker.hide();

var myColorPicker = new kintoneUIComponent.ColorPicker({color: '#FF0000'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(myColorPicker.render());
myColorPicker.disable();

var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});

const date = new Date();
var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});
const space = kintone.app.getHeaderSpaceElement();
space.appendChild(dateTime.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());
dateTime.getValue();

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

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();

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');

var container = kintone.app.getHeaderSpaceElement();
container.appendChild(myDateTime.render());
myDateTime.show();

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();
});

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();
});

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();
});

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

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 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});

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);

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);
});

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);

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');

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');

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');

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');
});

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();

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();

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();

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();

const text = new kintoneUIComponent.Text({ value: "12345" });
 
const fieldGroup = new kintoneUIComponent.FieldGroup({
      content: text.render(),
      name: 'Group',
      toggle: 'expand'
    })

	
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());

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());

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());

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');

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();

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');

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();

var insertBtn = new kintoneUIComponent.IconButton({type: 'insert',color:'blue', size: 'small'});

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setColor('green');

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setShape('normal');

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.setType('remove');

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');
});

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.show();

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.hide();

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.disable();

var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
 
iconBtn.enable();

var label = new kintoneUIComponent.Label({
    text: 'Name',
    textColor: '#e74c3c',
    backgroundColor: 'yellow',
    isRequired: true
});

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setText('Name');

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setTextColor('#e74c3c');

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setBackgroundColor('#e74c3c');

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setRequired(true);

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');
});

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.show();

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.hide();

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.disable();

var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.enable();

var label = new kintoneUIComponent.Label({
    text: 'Name',
    textColor: '#e74c3c',
    backgroundColor: 'yellow',
    isRequired: true
});

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.setText('Submit failed');

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.setType('success');

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');
});

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.hide();

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.disable();

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submit sucessffully',
    type: 'success'
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(notifyPopup.render());
 
notifyPopup.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 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 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});

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);

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);
});

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();

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');

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');

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');

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');
});

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();

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();

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();

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();

var spinner = new kintoneUIComponent.Spinner();

var spinner = new kintoneUIComponent.Spinner();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(spinner.render());

	
var spinner = new kintoneUIComponent.Spinner();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(spinner.render());
spinner.show();

var spinner = new kintoneUIComponent.Spinner();
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(spinner.render());
spinner.hide();

var spinner = new kintoneUIComponent.Spinner();

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());
});

	
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);
});

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);
});

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);
    });
});

	
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());
});

	
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);
});

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');
});

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');
});

var text= new kintoneUIComponent.Text({value: '12345'});

var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());

var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.setValue('input text');

var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.getValue();

	
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);
});

	
var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.show();

var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.hide();

var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.disable();

var text = new kintoneUIComponent.Text({value: 'input text'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(text.render());
 
text.enable();

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.setValue('set value into textarea');

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.getValue();

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');
});

	
var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.show();

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.hide();

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.disable();

var textArea = new kintoneUIComponent.TextArea({value: 'textarea'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(textArea.render());
 
textArea.enable();