Design a Custom Portal with Kintone Portal Designer

Contents

Overview

Kintone Portal Designer (External link) is a Chrome extension that helps users freely customize their Kintone portal. The customization can be exported out from the extension, so that it can be imported into Kintone to take effect on all users.

A screenshot of a portal customized with Kintone Portal Designer

Features

Feature 1: Design a portal using only HTML and CSS

Portals can be designed with HTML and CSS. No JavaScript knowledge is required.

Feature 2: Use preset templates and icons

Kintone Portal Designer comes with several templates. Developers can also use more than 50 preset icons (External link) for their portal development.

Feature 3: Apply the design to all users

Designs created with Kintone Portal Designer can be exported as JavaScript files. Loading this file into Kintone's System-Wide JavaScript Customization settings (External link) applies the design to all Kintone users.

How to Use Kintone Portal Designer

Install the Chrome Extension

Install the Kintone Portal Designer Chrome extension (External link).

A screenshot of the Kintone Portal Designer extension on the Chrome Web Store.

Activate the extension

Log in to Kintone and navigate to the portal page. The button for Kintone Portal Designer will appear next to the search field. Click the button to open the settings for Kintone Portal Designer.

A screenshot showing where the button for Kintone Portal Designer is displayed.

The Settings for Kintone Portal Designer

The Kintone Portal Designer has the following layout.

004.png

A toggle switch enables and disables the portal customization. Switch through the tabs to apply HTML/CSS/JavaScript customization to the portal. Customizations will not be applied until the Save button is clicked. Templates can be imported through the Import button. Clicking Export will show options to export the design as a JSON template, or as a JavaScript file to apply to the System-Wide JavaScript Customization settings (External link).

How to Import Sample Templates

1. Select a sample template

Click the Import button, and then click Import Sample Template.

A screenshot of the Kintone Portal Deisgner settings, focused on the Import button.

A dialog will be displayed with a list of templates. Select a template, such as advanced-3tabs, then click the Import button. The HTML and CSS for the template will be loaded into the settings.

A screenshot of the Kintone Portal Designer settings, showing a list of templates and the Import button.

2. Activate and save

Click the top left toggle switch to Design Portal, and click on Save.

A screenshot of the Kintone Portal Designer settings, focused on the toggle switch and the Save button

3. Check the design

Navigate to the Kintone portal. The HTML/CSS/JavaScript of the sample template will be applied to the page.

A screenshot of the Kintone portal with the Kintone Portal Designer customization applied.

Note that this customization can only be seen by the applied user. Other Kintone users who log in will see the default portal.

How to Make Changes to the Templates

Changes can be applied to the templates by editing the code and clicking on Save. The below image shows the advanced-3tabs template being modified. In the HTML tab, Tab1, Tab2, and Tab3 are changed to Sales, Development, and HR respectively.

A screenshot of the Kintone Portal Designer settings, focused on the HTML code.

To view the changes, click on Save, navigate to the portal page. Return to the portal and reload the page. The string on each tab will be rewritten.

A screenshot of the Kintone portal with a new design applied from Kintone Portal Designer

How to Export the Design

The modified design can be exported as a JSON file, and reloaded into Kintone Portal Designer at a later time.

To export the design, select Export as JSON from the Export button. This will export the current design as a JSON file. To import the design again, select Import JSON from the Import button and select the file.

How to Apply the Design to All Users

To apply the design to all Kintone users, the design will first need to be exported as a JavaScript file.

1. Export a JavaScript File

Select Export as JavaScript (Desktop) from the Export button. This will export the design as a JavaScript file.

A screenshot of the Kintone Portal Designer settings, focused on the Export as JavaScript option.

2. Deactivate Kintone Portal Designer

Click the top left toggle switch to Default Portal. If the toggle switch is left as Design Portal, both the design from the Kintone Portal Designer and the JavaScript file will affect the portal.

3. Navigate to Kintone's "JavaScript and CSS Customization" Page

Navigate to the JavaScript and CSS Customization (External link) page of Kintone from the cog wheel at the top of the page of Kintone.

4. Load the JavaScript File

Click Add File under Upload JavaScript File for PC and then add the JavaScript file exported in step 1.

A screenshot of the system-wide JavaScript and CSS Customization settings.

5. Hide Portal Content

After applying the JavaScript file, elements from the original portal will be displayed under the custom-designed portal.
To hide these elements, open the Portal Settings (External link) page and uncheck all the items under Contents in This Portal.

A screenshot of the Kintone portal settings.