Create a blog-like custom view with Foundation

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

 

without_category.png

 

Blog-like Custom View with Category feature

 

with_category.png

Prepare the App

Create an App that includes the following fields.

 

kintone_form.png

 

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

 

create_custom_view.png

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

 

Screen_Shot_2020-09-01_at_11.38.03_AM.png 

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

 

Screen_Shot_2020-09-01_at_11.54.48_AM.png

 

Custom View display

 

without_category.png

 

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.

 

Screen_Shot_2020-10-09_at_11.45.24_AM.png

 

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.

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!