Mobile-friendly custom views

Introduction

Custom views can be used to create modified UI designs that go beyond the standard Kintone view. For example, displays for a birthday celebration view (check out the Display record data in a custom view article) or an internal blog or FAQ page (check out the Create a blog-like custom view with Foundation article) can be developed freely and easily to add some fun to a work environment or to add visible practicality. However, in an increasingly mobile-centric world, it may be necessary to display these views on mobile as well. This article will explain how to modify a custom view made for desktop into a custom view for mobile as well.

Customization Overview

Custom views coded for desktop will not show up on mobile, aside from any HTML that is set inside the custom view's settings. For example, the desktop custom view from the Create a custom view article has been modified with JavaScript and CSS to retrieve record data from the App and display the data as visibly-pleasing formatted links.

 

Screen_Shot_2020-10-27_at_9.58.58_AM.png

 

However, because the HTML in the custom view settings does not contain hard-coded links, when viewing this custom view on mobile without making any changes it shows up as follows.

 

Screen_Shot_2020-10-27_at_10.00.29_AM.png

 

Notice that although the List of helpful links header is still displayed, all other parts of the custom view have disappeared, and there is no styling. However, with a few fixes to the original code, the custom view can easily be modified for mobile as shown below.

 

Screen_Shot_2020-11-09_at_11.45.43.png

 

The next section will explain how to make these changes and why they are necessary.

Key Changes to the Custom View

There are three main changes from the original desktop custom view that are needed to apply the custom view to mobile. 

  • Applying mobile versions of Kintone events
  • Changing the CSS to style the mobile view
  • Uploading JavaScript and CSS files for mobile to the mobile customization settings

Before going through each of these changes, the App field information, the custom view page settings and HTML, and the desktop version of the sample codes are shown below for reference. 

App field information

Field Type Field Name Field Code Notes
Text Title title Holds the title of the link.
Link URL url Type should be set as URL. Holds the link URL.

Custom view page settings and HTML

Screen_Shot_2020-11-06_at_11.47.48.png

 

Note that the Use This View In setting in the custom view settings page must be kept as its default of Both Desktop and Mobile-optimized Views. Additionally, the HTML in the image above is shown below again for easier reference.

 

Desktop version JavaScript (desktop.js)

Desktop version CSS (desktop.css)

Applying mobile versions of Kintone events

Many Kintone events have a desktop version and a mobile version that work for each display type. For instance, this custom view uses the Record List Onload Event. Going to the specifications page, there is both a desktop version and mobile version available, but the JavaScript code is using only the desktop version. To modify this code for mobile, the event should be changed to the mobile version like so.

Before the change

After the change

The full mobile version JavaScript code is below.

Mobile version JavaScript (mobile.js)

Changing the CSS to style the mobile view

CSS written for desktop may not always be optimal for mobile as well. In this case, there are two parts to modify in particular to optimally display the custom view for mobile. 

 

First, unlike the desktop mobile view, there is no white background on the mobile view by default. Therefore, the linksListContainer div is given a white background like so.

Before the change

After the change

Next, in order to make the links bigger and easier to read on a mobile device, the font size of the listContents div is specified. The unordered list is also specified with a list-style of inside to ensure that the bullet points show up to the left of the links. The added CSS is shown below.

Added CSS

The full mobile version CSS code is below.

Mobile version CSS (mobile.css)

Uploading JavaScript and CSS files for mobile to the mobile customization settings

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. 

 

Refer to the Uploading JavaScript and CSS Files article in the Kintone Help Center for information on how to access the JavaScript and CSS Customization settings. An App without customization files will look like the following. Note that JavaScript settings for both desktop and mobile are on the top half, and CSS settings for both desktop and mobile are on the bottom half of the page.

 

Screen_Shot_2020-11-05_at_11.10.52.png

 

Upload the files to their respective setting as shown below and save and update the App.

 

Screen_Shot_2020-11-05_at_11.10.40.png

Finally

Custom mobile views can provide just as much flexibility as their desktop counterparts and help speed up or improve mobile processes and workflows with custom solutions for on-the-go jobs. While this article introduced a very simple custom view, nearly anything can be done on mobile as can be done on desktop with the proper adjustments made. As a next step, try converting other desktop-centric Apps to be used on mobile as well. 

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!