This article introduces how to create a Blog-like Custom View on a Kintone App. This type of view is suitable for internal blogs, guides, and bulletin boards.
Sample Image
This sample displays the contents of the records in a blog-like format. Adding the Category feature of Kintone allows easy navigation between the records. Refer to the
What Can Be Done with the Category Feature
article from the Kintone Help Site for more information about the Category feature.
Standard blog-like Custom View
Blog-like Custom View with Category feature
Prepare the App
Create the Form
Create an App
with the following field and settings. Save the form when finished.
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. For more information, see
Configuring Views
.
Give the view a name and select Custom view as the view type. Check Enable pagination and enter the following code into the HTML Code box. When complete, save the Custom View.
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.
Sample Code
Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the
JavaScript and CSS Customization settings
.
(function() {
'use strict';
function loadJS(src) {
document.write('<script type="text/javascript" src="' + src + '"></script>');
}
loadJS('https://cdn.jsdelivr.net/foundation/5.2.2/js/vendor/jquery.js');
loadJS('https://cdn.jsdelivr.net/foundation/5.2.2/js/foundation.min.js');
loadJS('https://cdn.jsdelivr.net/foundation/5.2.2/js/vendor/modernizr.js');
kintone.events.on('app.record.index.show', function(event) {
// End the program if the view is not the custom view
var check = document.getElementsByName('kintone-custom-view');
if (check.length === 0) {
return;
}
var rec = event.records;
$('#articles').empty();
var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
// Generate article content
for (var i = 0; i < rec.length; i++) {
if (i !== 0) {
$('#articles').append('<hr />');
}
$('#articles').append('<article id="article' + i + '" class="articles"></article>');
$('#article' + i).append('<h3><a href="' + recUrl + rec[i].recordNum.value + '">' + rec[i].title.value + '</a></h3>');
$('#article' + i).append('<h6>Author: ' + rec[i].author.value + ' Posted date: ' + rec[i].postedDate.value + '</h6>');
$('#article' + i).append('<br>');
$('#article' + i).append('<div class="row" id="articleRaw' + i + '"></div>');
$('#articleRaw' + i).append('<p>' + rec[i].article.value.replace(/\r?\n/g, '<br />') + '</p>');
} // for i
}); // kintone.events
})();
JavaScript and CSS Customization settings
Test the Code
After saving and updating the App with both the Custom View code and the JavaScript and CSS Customization code, create a few sample records. Navigate to the Record List page to view the records displayed in a blog-like format.
Code Explanation
Custom View HTML Code
Foundation 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.
1
2
3
4
5
6
7
ul {
margin-left: 0rem;
}
#kintone-custom-viewul {
margin-left: 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.
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.
1
2
3
4
5
6
7
8
kintone.events.on('app.record.index.show', function(event) {
// End the program if the view is not the custom view
var check = document.getElementsByName('kintone-custom-view');
if (check.length === 0) {
// ...
}
// ...
});
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var rec = event.records;
$('#articles').empty();
var recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
// Generate article content
for (var i = 0; i < rec.length; i++) {
if (i !== 0) {
$('#articles').append('<hr />');
}
$('#articles').append('<article id="article' + i + '" class="articles"></article>');
$('#article' + i).append('<h3><a href="' + recUrl + rec[i].recordNum.value + '">' + rec[i].title.value + '</a></h3>');
$('#article' + i).append('<h6>Author: ' + rec[i].author.value + ' Posted date: ' + rec[i].postedDate.value + '</h6>');
$('#article' + i).append('<br>');
$('#article' + i).append('<div class="row" id="articleRaw' + i + '"></div>');
$('#articleRaw' + i).append('<p>' + rec[i].article.value.replace(/\r?\n/g, '<br />') + '</p>');
} // for i
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.
article from the Kintone Help Site for more information about the Category feature.