Introduction
CSS can be used to create visually appealing Custom Views in Kintone, such as the one shown in the Display record data in a custom view article. To take this a step further, CSS frameworks such as Foundation and Bootstrap can be utilized to create even more visually stunning pages. This article introduces how to create a blog-like Custom View using Foundation. This type of view is suitable for internal blogs, guides, and bulletin boards.
Notes on Using CSS Frameworks
Be careful of the following points when using CSS frameworks with Kintone.
- Many frameworks determine the style of the entire web page. A workaround is necessary to apply the style to only the Custom View.
- The timing to load the framework is also important because the page's styling will change at the time the framework is loaded.
The following are some solutions to these caution points.
- Since the CSS framework will only be used in the Custom View, it is loaded within the Custom View settings so it will not affect other pages within the App. In other words, the CSS framework is purposely not loaded in the App's JavaScript and CSS Customization settings to prevent applying the styles to all pages in the App.
- Styles that may still affect other pages within the App are fixed by reverting them back with additional CSS.
- This article uses Foundation because it is easier to control within Kintone, and has many samples compared to other CSS frameworks.
Example of the Final Result
Applying the code to the App will result in a blog-like display of each record. Adding the Category feature of Kintone allows easy navigation between posts and more organization. Refer to the What Can Be Done with the Category Feature article from the Kintone Help Center for more information about the Category feature and how to set it up.
Standard blog-like Custom View
Blog-like Custom View with Category feature
Prepare the App
Create an App that includes the following fields.
|
Field Type |
Field Name |
Field Code |
|---|---|---|
|
Text |
Title |
title |
|
Text |
Author |
author |
|
Date |
Posted Date |
postedDate |
|
Record number |
Record number |
recordNum |
|
Text area |
Article |
article |
Create the Custom View
In the App settings, navigate to the Views tab and click the [+] button to create a new View. Give the view a name and select Custom view as the view type. Check Enable pagination and then copy and paste the following code into the HTML Code box. When complete, save the custom view.
Custom View HTML Code
Custom View settings
Upload the JavaScript File
Navigate to the App Settings tab and click on JavaScript and CSS Customization. Save the following JavaScript code as sample.js and upload the code to the Upload JavaScript for PC settings. Save the settings and update the App.
sample.js
JavaScript and CSS Customization settings
Test the Configuration
After saving and updating the App with both the Custom View code and the JavaScript and CSS Customization code, create a few sample records. The created records will be shown in the blog-like format.
Creating the record
Custom View display
Code Explanation
This section will explain the Custom View HTML code and the JavaScript code.
Custom View HTML Code Explanation
First, the Foundation CSS is loaded into the Custom View. As stated in the Notes on Using CSS Frameworks section, the CSS loaded into the JavaScript and CSS Customization settings would lead to the styles affecting other pages in the App in addition to the Custom View page. To avoid this, the CSS is loaded in the Custom View HTML so that it is only applied to the Custom View page.
Although styles affecting other pages have been avoided, there are still styles affecting other parts of the page outside of the Custom View area. To fix this, CSS is written to eliminate unwanted styles.
For example, the section below reverts the global ul element's margin-left style back to 0rem, the original margin-left style for Kintone's ul element. Then, to make sure that the ul elements within the Custom View retain the Foundation styling, it is declared that any ul elements within the element with the id, kintone-custom-view have a margin-left value of 1.1rem.
Next, the HTML for the blog-like view is created. Write the layout by using the official HTML templates and documentation of Foundation as reference. Notice that the encompassing div element id is kintone-custom-view, as the previously declared CSS beginning with #kintone-custom-view is written to be active only within this div element. At the very end, Foundation is initialized with $(document).foundation(). JavaScript will be used to control the dynamic elements.
The following image illustrates the <div> elements defined within the Custom View.
JavaScript Code Explanation
First, the Foundation JavaScript files are loaded into the App.
Then, the Record List Onload Event is declared and will be triggered each time the record list is loaded. A check is conducted to see if the kintone-custom-view element is included in the loaded page. If it's not, the page is not the Custom View page that was created in this article, and the code beneath the check is not executed.
Finally, the code to change the record data into the article HTML is declared. $('#articles').empty() is used to make sure the element holding the articles elements is empty, and then a for loop is used to generate HTML for each record.
Important notes
- This tutorial has been written and tested using Google Chrome.
- Foundation version 5.2.2 is used as a CSS framework in this article. Check usage restrictions regarding supported browsers, licenses, etc.
- External libraries used in this article are downloaded from the free CDN. Check the official Foundation site for continuity, etc.
Finally
CSS frameworks allow users to quickly modify page designs without extensive design skills themselves and work well with Kintone's rapid development concept. The example in this article was a simple example of what can be done with Foundation and Kintone, but using the same concepts, even more intricate and effective designs can be created. Try out other templates from Foundation or test out different CSS frameworks with Kintone.