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.
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.
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.
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
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
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 CSS (desktop.css)
Applying mobile versions of Kintone events
Before the change
After the change
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.
The full mobile version CSS code is below.
Mobile version CSS (mobile.css)
Upload the files to their respective setting as shown below and save and update the App.
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.