This article introduces how to create Custom Views on Kintone that are mobile-friendly.

When users navigate to the Custom View, they are able to view a list of links. These contents can be viewed via the desktop browser, and can also be viewed through the mobile browser or mobile App.

If customizations are only applied to the desktop view, the list of links on the Custom View are not displayed on the mobile.

Create an App with the following field and settings. Save the form when finished.

Navigate to the Views tab and create a new View . Give the view a name and select Custom view. Select the Both Desktop and Mobile-optimized views option, so that Custom Views will be available for mobile devices. Enter the following HTML in the HTML Code option.

1
2
3
4
5
6

<div id="linksListContainer">
  <div class="listTitle">List of helpful links</div>
  <div class="listContents">
    <ul id="linkList"></ul>
  </div>
</div>

The Custom View settings should look like the following image.

Prepare the following JavaScript and CSS codes in separate text editors and navigate to the Kintone App's settings. Upload the files into the Upload JavaScript for PC and Upload CSS File for PC options of the JavaScript and CSS Customization settings .

Desktop version JavaScript (desktop.js)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    var records = event.records;
    records.forEach(function(record) {
      var linkListElement = document.getElementById('linkList');
      var listElement = document.createElement('li');
      var linkElement = document.createElement('a');
      var linkTitle = document.createTextNode(record.title.value);
      linkElement.setAttribute('href', record.url.value);
      linkElement.appendChild(linkTitle);
      listElement.appendChild(linkElement);
      linkListElement.appendChild(listElement);
    });
  });
})();

Desktop version CSS (desktop.css)

1
2
3
4
5
6
7
8
9

#linksListContainer {
  padding: 2em;
}

.listTitle {
  color: #FFCE4A;
  font-size: 1.5em;
  font-weight: bold;
}

Prepare the following JavaScript and CSS codes in separate text editors and navigate to the Kintone App's settings. Upload the files into the Upload JavaScript for Mobile Devices and Upload CSS File for Mobile Devices options of the JavaScript and CSS Customization settings .

Mobile version JavaScript (mobile.js)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

(function() {
  'use strict';
  kintone.events.on('mobile.app.record.index.show', function(event) {
    var records = event.records;
    records.forEach(function(record) {
      var linkListElement = document.getElementById('linkList');
      var listElement = document.createElement('li');
      var linkElement = document.createElement('a');
      var linkTitle = document.createTextNode(record.title.value);
      linkElement.setAttribute('href', record.url.value);
      linkElement.appendChild(linkTitle);
      listElement.appendChild(linkElement);
      linkListElement.appendChild(listElement);
    });
  });
})();

Mobile version CSS (mobile.css)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

#linksListContainer {
  padding: 2em;
  background-color: #FFF;
}

.listTitle {
  color: #FFCE4A;
  font-size: 2em;
  font-weight: bold;
}

.listContents {
  font-size: 1.5em;
}

.listContents ul {
  list-style: inside;
}

In the App settings, JavaScript and CSS files for desktop and mobile are separated so that customizations may be applied to only one or the other. Therefore, the JavaScript and CSS files prepared earlier need to be uploaded to their appropriate locations.

The JavaScript and CSS Customization Settings should look like the below image.

Once the changes have been applied to the App, navigate to the Custom View through the Desktop Browser. The Custom View should display a list of links. Next, access the Custom View through the mobile App of Kintone. The Custom View should again display a list of links.

Kintone Help | Configuring Views