Create Mobile Friendly Custom Views

Contents

Overview

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

Sample Image

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.

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 Notes
Text Title title Holds the title of the link.
Link URL url Type set as URL. Holds the link URLs.

Create the Custom View

Navigate to the Views tab and create a new View (External link) . 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.

Sample Code

Desktop Customizations

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

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;
}

Mobile Customizations

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

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;
}

Notes on uploading the files

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.

Test the Customization

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.

Reference

Kintone Help | Configuring Views (External link)