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.
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.
Make note of the series of numbers at the end of the URL. This is the view ID that will be used later.
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.
Save and update the App. The custom view should now display the employee name and birthdate as shown below.
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.
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.
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.