Design a Custom Portal with Kintone Portal Designer

Contents

caution
Attention

For Kintone Portal Designer version 1.9.7 and onwards, Developer mode must be enabled in the Chrome Extensions. If Developer mode is not enabled, the code written in the JavaScript tab cannot be loaded or executed.

Follow the steps below to set it up:

  1. Enter chrome://extensions in a new tab.
  2. Enable Developer mode using the toggle switch at the top right of the page.

  1. Open the Kintone Portal Designer page.
  2. Click the Save button.

For more information on Developer mode, refer to the official site:
Developer mode for extension users (External link)

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.

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) .

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.

The Settings for Kintone Portal Designer

The Kintone Portal Designer has the following layout.

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 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.

2. Activate and Save

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

3. Check the Design

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

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.

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.

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.

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.

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.