Create a Blog-like Custom View

Contents

Overview

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 (External link) 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 (External link) 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 (External link) . 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.

Custom View HTML Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.2.2/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.2.2/css/foundation.min.css" />

<style type="text/css">
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: content-box;
}
#kintone-custom-view *,
#kintone-custom-view *:before,
#kintone-custom-view *:after {
  box-sizing: border-box;
}
button, .button {
  padding-top: 0rem;
  padding-right: 0rem;
  padding-bottom: 0rem;
  padding-left: 0rem;
  margin-bottom: 0rem;
}
#kintone-custom-view button,
#kintone-custom-view .button {
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.0625rem;
  padding-left: 2rem;
}
ul {
  margin-left: 0rem;
}
#kintone-custom-view ul {
  margin-left: 1.1rem;
}
ul,
ol,
dl {
  margin-bottom: 0rem;
}
#kintone-custom-view ul,
#kintone-custom-view ol,
#kintone-custom-view dl {
  margin-bottom: 1.25rem;
}
form {
  margin-bottom: 0rem;
}
h2 {
  font-size: inherit;
}
</style>

<div id="kintone-custom-view" name="kintone-custom-view" style="margin-top:25px;">

<!-- Nav Bar -->
  <div class="row" style="height: 6rem;">
    <div class="large-12 columns">
      <h1>Blog <small>Kintone Developer Program</small></h1>
      <hr />
    </div>
  </div>
  <!-- End Nav -->

  <!-- Main Page Content -->
  <div class="row">
    <!-- Main Blog Content -->
    <div id ="articles" name="articles" class="large-12 columns" role="content"> 
    </div>
    <!-- End Main Content -->
  </div>
  <!-- End Main Content -->
  <!-- Footer -->
  <footer class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <p>© 2022 Kintone Corporation - All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer -->
  <script>
    $(document).foundation();
  </script>
</div>

Custom View settings

tips
Note

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 (External link) .

sample.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
(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 (External link) is loaded in the Custom View HTML so that it is only applied to the Custom View page.

1
2
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.2.2/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/5.2.2/css/foundation.min.css" />

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style type="text/css">
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: content-box;
}
#kintone-custom-view *,
#kintone-custom-view *:before,
#kintone-custom-view *:after {
  box-sizing: border-box;
}
button, .button {
  padding-top: 0rem;
  padding-right: 0rem;
  padding-bottom: 0rem;
  padding-left: 0rem;
  margin-bottom: 0rem;
}
#kintone-custom-view button,
#kintone-custom-view .button {
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.0625rem;
  padding-left: 2rem;
}
ul {
  margin-left: 0rem;
}
#kintone-custom-view ul {
  margin-left: 1.1rem;
}
ul,
ol,
dl {
  margin-bottom: 0rem;
}
#kintone-custom-view ul,
#kintone-custom-view ol,
#kintone-custom-view dl {
  margin-bottom: 1.25rem;
}
form {
  margin-bottom: 0rem;
}
h2 {
  font-size: inherit;
}
</style>

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-view ul {
  margin-left: 1.1rem;
}

Next, the HTML for the blog-like view is created. Write the layout by using the official HTML templates (External link) and documentation (External link) 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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="kintone-custom-view" name="kintone-custom-view" style="margin-top:25px;">

<!-- Nav Bar -->
  <div class="row" style="height: 6rem;">
    <div class="large-12 columns">
      <h1>Blog <small>Kintone Developer Program</small></h1>
      <hr />
    </div>
  </div>
  <!-- End Nav -->

  <!-- Main Page Content -->
  <div class="row">
    <!-- Main Blog Content -->
    <div id ="articles" name="articles" class="large-12 columns" role="content"> 
    </div>
    <!-- End Main Content -->
  </div>
  <!-- End Main Content -->
  <!-- Footer -->
  <footer class="row">
    <div class="large-12 columns">
      <hr />
      <div class="row">
        <div class="large-6 columns">
          <p>© 2022 Kintone Corporation - All rights reserved.</p>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer -->
  <script>
    $(document).foundation();
  </script>
</div>

The following image illustrates the <div> elements defined within the Custom View.

JavsScript Code

First, the Foundation JavaScript files are loaded into the App.

1
2
3
4
5
6
7
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');

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 (External link) for continuity, etc.

Reference