How to Set Data to Text Field From JavaScript Callback?

,
1

Question / Problem

I want to put the address value received from the sample6_execDaumPostcode function into Kintone's Text field.
Specifically at kintone.events.on('app.record.edit.show', function(event).

Current Situation

How is your Kintone App configured? What are you trying to do?

Kintone App:

form
form1552×482 11.2 KB

Code / Attempts

This is an address search api sample.

(function () {
  'use strict';

  var sample6_execDaumPostcode = function (params) {
    new daum.Postcode({
      oncomplete: function (data) {
        console.log('sample6_execDaumPostcode');
        var record = params.record;
        // The part where you write the code to be executed when a search result item in the popup is clicked.
        console.log('sample6_execDaumPostcode1', record);
        // The addresses are combined according to the exposure rules of each address.
        // If the descending variable has no value, it has a blank ('') value, so branch by referring to this.
        var addr = ''; // address variable
        var extraAddr = ''; // Reference variable

        // Get the address value according to the address type selected by the user.
        if (data.userSelectedType === 'R') { // If the user selects a street address
          addr = data.roadAddress;
        } else { // When the user selects the lot address (J)
          addr = data.jibunAddress;
        }

        // Combine reference items when the address selected by the user is a road name type.
        if (data.userSelectedType === 'R') {
          // If there is a legal same name, add it. (excluding legal fees)
          // In case of statutory consent, the last character ends with "Dong/Ro/Ga".
          if (data.bname !== '' && /[to|to|to]$/g.test(data.bname)) {
            extraAddr += data.bname;
          }
          // If there is a building name and it is an apartment building, add it.
          if (data.buildingName !== '' && data.apartment === 'Y') {
            extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
          }
          // If there are reference items to display, create the final string with parentheses added.
          if (extraAddr !== '') {
            extraAddr = ' (' + extraAddr + ')';
          }
          // Put the combined reference items into the corresponding field.
          params.record.sample6_extraAddress.value = extraAddr;

        } else {
          // document.getElementById("sample6_extraAddress").value = '';
          params.record.sample6_extraAddress.value = '';
        }
        // Put the zip code and address information into the corresponding fields.
        params.record.sample6_postcode.value = data.zonecode;
        console.log(data.zonecode)
        params.record.sample6_address.value = addr;
        console.log(addr)
        // document.getElementById('sample6_postcode').value = data.zonecode;
        // document.getElementById("sample6_address").value = addr;
        // Move the cursor to the detailed address field.
        // document.getElementById("sample6_detailAddress").focus();
      }
    }).open();
  }

  kintone.events.on('app.record.edit.show', function (event) {
    var record = event.record;
    var zipcode = record.sample6_postcode.value;
    record.sample6_postcode.value = 'test'
    var zipcodeElement = kintone.app.record.getSpaceElement('button')
    zipcodeElement.addEventListener('click', event2 => {
      console.log('zipcodeElement.addEventListener');
    });

    const button = new Kuc.Button({
      text: 'findAddr',
      type: 'submit'
    });

    button.addEventListener('click', event1 => {
      var event1 = sample6_execDaumPostcode(event)
      console.log(event1);
    });

    zipcodeElement.appendChild(button)

    return event;
  });
}
)();

Error Message

Screenshots are helpful

Desired Outcome / Expected Behavior

Screenshots are helpful

Referenced Resources

List the tutorials, API docs, & help article you read

2

I ended up solving the problem. However, I have another question.

I add a Space field (As described in the Add Today's Date to the Date Field with One Click tutorial.

However, when I converted the Kintone App to Form Bridge, the Blank Space field is not included.

Is there a way to include the Space field somehow?

3

Hello @H_Nar , Thank you for posting your question & I am glad you solved the problem.

Will provide a solution for future readers:

How to set data to a Kintone Text field from a JavaScript Callback?

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

Few things to note:

  • Be sure to add the Kintone UI Component's CDN link to the App's JavaScript setting: https://unpkg.com/kintone-ui-component/umd/kuc.min.js
  • The Kintone App requires a Space field & Text field and their field codes specified.
// 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 => {
      // let addressInput = sample6_execDaumPostcode(event);
      const addressInput = 'Example Address Value';
      addAddress(event, addressInput);
    });
    return event;
  });
}
)();

Space Field in Form Bridge?

Following assumes that by "formbridge", you mean the Kintone extension created by Toyokumo that makes generating online surveys from a Kintone App easy and public-facing.

A quick look at the Form Bridge's Supported Field Types document shows that Blank Space fields are not supported.

Additionally, any customization made to the Kintone App will not be transferred over to the Form Bridge-generated survey page.
The JavaScript customization is only accessible from your Kintone Subdomain.