Kintone UI Component Button to Set Text Field's Value

Tips & Tricks
, ,
1

Kintone UI Component Button to Set Text Field's Value

Overview

Following is an example script that creates a button that will replace the Address text field's value with the addressInput value.

The script is intended for those who will run an API to get the address value and set it for the addressInput variable.

The following Kintone fields are required for the customization:

Kintone UI Component

The example script uses the Kintone UI Component library which allows you to create Kintone-like components easily.

:zap: Make sure to add the Kintone UI Component's CDN link to the App's JavaScript setting

  • Latest version: https://unpkg.com/kintone-ui-component/umd/kuc.min.js
  • v1.10.0 {Latest at the time of writing}: https://unpkg.com/kintone-ui-component@1.0.0/umd/kuc.min.js`

Address Button Script

:warning: Note: The following variables must be specified to match the field codes of your Kintone App:

  • addressFieldCode
  • buttonSpaceFieldCode
// Add CDN to Kintone App: https://unpkg.com/kintone-ui-component/umd/kuc.min.js

(function () {
  'use strict';
  const addressFieldCode = 'address';
  const buttonSpaceFieldCode = 'button';

  function addAddress(records, address) {
    records.record[addressFieldCode].value = address;
    console.log(records.record);
    kintone.app.record.set(records);
  }

  kintone.events.on('app.record.edit.show', event => {
    const buttonLocation = kintone.app.record.getSpaceElement(buttonSpaceFieldCode);
    const button = new Kuc.Button({
      text: 'Find Address',
      type: 'submit'
    });
    buttonLocation.appendChild(button);
    button.addEventListener('click', buttonEvent => {
      const addressInput = 'Example Address Value';
      addAddress(event, addressInput);
    });
    return event;
  });
}
)();