Retrieve Record Data (Record Details)

To Start Off

This tutorial will guide you on how to retrieve values from a record in your kintone record details page.

Step 1. Retrieve Record ID value

We will first retrieve the Record ID of the current record initiated by a button click. 
Record IDs are the key IDs for each record in an app, that starts from 1. We will use the function of kintone.app.record.getId() to retrieve the Record ID. Check here for more details of the API. 
Please note that this function is only for the Desktop, not for the Smartphone. Below is a sample code for retrieving and displaying the Record ID.

(function () {
    "use strict";
    kintone.events.on('app.record.detail.show', function (event) {
        var myMenuButton = document.createElement('button');
        myMenuButton.id = 'my_menu_button';
        myMenuButton.innerHTML = 'Button';
        myMenuButton.onclick = function () {
            // Show Record ID retrieved
            window.alert('id: ' + kintone.app.record.getId());
        };

        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myMenuButton);
    });
})();

Save the code as a JavaScript file, and upload it to your app.
A button should appear on the record details page. Click it to retrieve and display the record ID of the record you are viewing.

 

Step 2. Retrieve record value

The function we will use here will be kintone.app.record.get(). For Smartphones, use kintone.mobile.app.record.get() instead.
The returned value will be in a JSON format, and null will be returned in case of errors.

A sample code can be written as follows:

  var fieldValue = '';
  var rec = kintone.app.record.get();
  if (rec) {
      fieldValue = rec.record.field_code.value;
  }

 

You will need to replace field_code with the field code of your field that you want to retrieve the value from. Field codes can be checked and updated from the app settings menu.
Navigate through to Edit Form > (Hover over a field already set in the canvas) > Settings > Field Code

 

 

 

The following sample code will display the value from the Updated datetime field on a Blank space field, by clicking a button.

  (function () {
      "use strict";

      kintone.events.on('app.record.detail.show', function (event) {
          var myMenuButton = document.createElement('button');
          myMenuButton.id = 'my_menu_button';
          myMenuButton.innerHTML = 'Button';
          myMenuButton.onclick = function () {
              var mySpaceField = kintone.app.record.getSpaceElement('my_space_field');
              mySpaceField.parentNode.style.width = '400px';

              // Retrieve Updated datetime value
              var updatedAt = '';
              var rec = kintone.app.record.get();
              if (rec) {
                  updatedAt = rec.record.Updated_datetime.value;
              }
              kintone.app.record.getSpaceElement('my_space_field').innerHTML = updatedAt;
          };

          kintone.app.record.getHeaderMenuSpaceElement().appendChild(myMenuButton);
      });
  })();

You will need to place a Blank space field into your app's form, and name the Element ID "my_space_field" in the Blank space field's settings. The tutorial here shows how to set your Blank space field's settings.

Note: There are several ways you can write your JavaScript code to retrieve values from the returned object. Use the below code as reference.

  kintone.app.record.get().record.Updated_datetime.value;
  // Same as above
  kintone.app.record.get().record["Updated_datetime"]["value"];

Step 3. Field type and format

After applying the JavaScript code, and clicking on the button on the record details page, check the value that is displayed on the Blank space field.

 

 

You may have noticed that the date formats in the Blank space field and the Updated datetime field are different.
Make sure you check the Field Types and Date Formats pages as formats of data displayed on HTML and data retrieved by API may look different.

Step 4. Be careful when using kintone.app.record.get()

Check the notes written about the kintone.app.record.get() API.

 

 

Due to this, the following code will be incorrect, and will not work.

  (function () {
      "use strict";

      kintone.events.on('app.record.detail.show', function (event) {
          var rec = kintone.app.record.get();    //  You cannot use kintone.app.record.get() here.
      });
  })();

Step 5. The event object

The previous samples returns an Event object.

 

 

To understand the event object more, let's check back on the Record Details Event page.
The property information of the event object is listed in the page.

 

 

Notice that the event object already has the same return value as the values obtained with kintone.app.record.get().

Step 6. Retrieving record values from the event object

The below sample will retrieve the value of the Updated datetime field from the event object instead of using kintone.app.record.get().

  (function () {
      kintone.events.on('app.record.detail.show', function (event) {
          var updatedAt = '';
          if (event) {
              updatedAt = event["record"]["Updated_datetime"]["value"];
          }

          var mySpaceField = kintone.app.record.getSpaceElement('my_space_field');
          mySpaceField.parentNode.style.width = '400px';
          mySpaceField.innerHTML = updatedAt;
      });
  })();

Finally

We hope you enjoyed learning how to retrieve record data by the kintone JavaScript API and have a good understanding of the event object.
Let's move to the next tutorials!

Was this article helpful?
1 out of 1 found this helpful
Comments
  • Avatar
    vcttai

    Thank you for a very helpful tip.

  • Avatar
    vcttai

    Thank you for a very helpful tip.

Please sign in to leave a comment.