Custom View Tutorial 1

What are Custom Views?

There are three types of views available in kintone Apps:

  • List Views
  • Calendar Views
  • Custom Views

These views provide different ways to display your data. You can follow the instructions on the kintone help page on how to create new views.

Unlike the List View and the Calendar View, the Custom View allows users to create a rich flexible view by allowing users to specify the HTML contents that this view will show.

How do you create Custom Views?

Go to your App's settings, and click on the "View" tab. Click the + button to create a new view, and choose the Custom View.
customview1.gif

There are a number items on this page which you may not be familiar with:

  • View ID
    The View ID is the unique ID that's given to your view.
  • Enable pagination
    This option can be ignored for this tutorial - it's an option that helps users get record list information via JavaScript.
  • HTML Code
    This option allows custom HTML codes to be written for the view.
  • Filter and Sort
    This option can also be ignored for this tutorial-  it's an option that helps users get record list information via JavaScript.

To create your Custom View, enter some HTML into the "HTML Code" option.
As an example, we have provided some code that you can copy and paste into this option. 

Save your view, and Apply the changes to your App. Your Custom view will be added to the list of views - select the view to display your custom view.


customview2.gif

 

The Custom View creates a blank view, filled in with HTML data that was written in your HTML Code settings.
Notice how your record list data is not included in this view - in later tutorials, we will go through how to display your record list data into the Custom views.

Limitations

<script> tags

The Custom view does not allow <script> tags to run - you'll find that the <script> tags will be ignored when viewing your custom view.
This will be explained in later tutorials, but in order to run JavaScript in your Custom view, you must use the JavaScript and CSS customization settings.

Mobile

The Custom view is not available on the mobile App, and will not appear on the list of views for the App.

Space/Thread bodies

The Custom view is not available for the "Attach App" function for Space/Thread bodies, and will not apepar on the list of views for the App.

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.