Display record data in a custom view

Introduction

This tutorial will introduce how to access data from the records within an App and display them in a Custom View. Custom views utilize HTML, CSS, and JavaScript to enable the flexible display of data beyond the standard filtered and graph views. Learning how to access data within an App and display it within a custom view will open up endless possibilities of what can be done with Kintone. For further information on what a custom view is and how to create one, refer to the Create a custom view tutorial. 

App Preparation

This tutorial will create a birthdate tracker App. First, create an App with the following fields:

Field Type Field Name Field Code
User selection  Employee  employee
Date   Birthdate  birthdate


After activating the App, add a few records of sample data. Finally, navigate to the Views tab in the App settings. Create a new View with Custom as the view type. In the HTML code field, enter in the following HTML.

 

The custom view settings should look like below.

custom_view_settings.png


Save the custom view and update the App. Preparations for the tutorial are complete.

Display Data of All Records

If the created custom view is not displayed already, switch to the custom view from the views drop down menu. Although the record count shows there should be 5 records, the custom view is blank as shown below. 

blank_custom_view.png


Make note of the series of numbers at the end of the URL. This is the view ID that will be used later.

View_URL.png


The next step is to access the data of the available records and display the data in the custom view. To do this, save the following JavaScript and upload the saved file to the JavaScript and CSS Customization settings. Make sure to change the <VIEW_ID> placeholder into the View ID that was noted earlier. For information on uploading JavaScript files, refer to Customizing Kintone with JavaScript & CSS from the Kintone Help Center.

 

 

Save and update the App. The custom view should now display the employee name and birthdate as shown below. 

birthday_all_custom_view.png

Code Explanation

This section will explain the code step-by-step.

First, the app.record.index.show onload event is declared to determine when a record view is displayed. When the event is triggered, the code inside the event is run.

 

Then, an if statement is made that prevents the code following it from being run if the current view's View ID is not the specified View ID. This is necessary because in the following section, the div with the ID recordContent is retrieved, but if the div does not exist in the current view, an error is displayed in the console. To prevent this error, we will only run the code in the applicable view.

 

Next, a variable called recordContent is created to retrieve and hold the div element with the id of recordContent that was created in the custom view settings.

 

Then, a variable called records is created to hold the array of records retrieved by the event object.

 

The array of records held in the records variable is then put through a forEach loop.
The loop retrieves the employee name and birthdate from each individual record, concatenates them, and adds them under the recordContent div element.

 

Finally

This was a simple tutorial to explain how record data from an App can be accessed and displayed in a custom view. Beyond this, CSS may be applied to make the view more visibly appealing, and the data can also be filtered to show only certain records. As an example, here is a birthday view that will show those with birthdays this month with a cute, celebration design.

 

happy_birthday.png

 

With custom views, it's possible to manipulate how record data is displayed, using HTML, CSS, and JavaScript, so the possibilities of what can be done are endless. 

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!