Create a Custom View

Contents

Overview

This article introduces how to create a simple Custom View. The Custom View is one of the views available when configuring views (External link) of Apps. The Custom View allows users to create rich, flexible views by setting up HTML elements.

How to Create Custom Views

Navigate to the App settings, and click on the View tab. Click the [+] button to create a new view, and choose the Custom View option. Enter the neccessary settings and click Save. Click on Update App to apply the changes so the Custom View is created.

A gif showing how to navigate through the App's settings to start creating a Custom View

Custom View Settings

The Custom View option contains the following settings:

  • View ID The unique ID given to the Custom View.
  • Enable pagination If this option is enabled, Kintone events app.record.index.show (External link) and mobile.app.record.index.show (External link) will return record list data in the event object. If more records exist than the number of records in the event object, navigation will be displayed on the record list to access the next set of records. If this option is disabled, Kintone events will not return any record list data in the event object.
  • HTML Code HTML codes written in this setting will be used to construct the Custom View.
  • Filter and Sort The query conditions for the Custom View. This will affect the data returned in the event object.

Custom View Example

Enter the following HTML code into the HTML Code setting of the Custom View option.

1
2
3
4
5
6
<p style="font-size:22px; color:#ffcc00; margin-left:12px"><strong>List of helpful links</strong></p>
<ul>
<li><a href="https://kintone.dev/" target="_blank" rel="external">kintone developer network</a></li>
<li><a href="https://www.kintone.com/" target="_blank" rel="external">kintone Homepage</a></li>
<li><a href="https://www.youtube.com/user/kintoneglobal" target="_blank" rel="external">kintone Tutorial Videos</a></li>
</ul>

Save the view, and apply the changes to the App. The custom view will be added to the list of views. Select the view from the dropdown to display the Custom View.

A gif showing data being set into the Custom View option and the data being saved. The page is then navigated to the newly created Custom View.

The Custom View creates content created from the HTML set in the HTML Code settings. JavaScript customization can be added to the App, so that record list data can be obtained and displayed in the Custom View.

Limitations

Usage of <script> tags

The Custom view does not support <script> tags. If <script> tags are included in the HTML code, they will be ignored when the custom view is loaded. To run JavaScript in a Custom view, the JavaScript and CSS customization settings (External link) must be used.

Attaching in Space/Thread bodies

The Custom view is not available for the Attach App function (External link) of Space/Thread bodies.