Design a custom portal with Kintone Portal Designer

Introduction

Kintone Portal Designer is a Chrome extension that helps users freely customize the Kintone portal. It has three main features that are detailed below.

Feature 1: Design a portal using only HTML and CSS

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

Feature 2: Use preset templates and icons

There are several templates that have been prepared and can be used and modified to easily design a portal, so writing HTML and CSS from scratch is not necessary. Additionally, there are more than 50 preset icons available for use.

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 applies the design to all Kintone users.

 

001.png

Install Kintone Portal Designer

1. Install Kintone Portal Designer

Install the extension in Chrome using the link below.


kintoneportaldesigner_chrome_extension.PNG

2. Start up Kintone Portal Designer

Open the Kintone portal page. The Kintone Portal Designer button will appear next to the search field. Click the Kintone Portal Designer button on the Kintone toolbar.


003.png

Kintone Portal Designer settings will open.

Layout of Kintone Portal Designer

The Kintone Portal Designer has the following layout. There is a button to toggle the effects of Kintone Portal Designer on and off, panels to edit the HTML/CSS/JavaScript of the current design, and buttons for saving, importing, or exporting designs, among other features.

 

004.png

Import a Sample Template

1. Select a Sample Template

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


005.png

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


006.png
 

2. Activate and Save

Click the toggle button in the top left of the Kintone Portal Designer to switch it to Design Portal.
The HTML and CSS written in the Kintone Portal Designer window will be loaded into Kintone. Click the Save button.


007.png

3. Check the Design

Return to the portal and reload the page. The sample template will be applied to the page.

 

Screen_Shot_2019-10-11_at_6.33.59_PM.png

Change the Design

Try making some simple changes to the sample template advanced-3tabs.
Select the HTML tab, and then rename Tab1, Tab2, and Tab3 to Sales, Development, and HR. Click Save.

 

008.png

Return to the portal and reload the page. The string on each tab has been rewritten.

 

009.png

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.

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.


010.png

2. Deactivate Kintone Portal Designer

Click the toggle button at the top left of the Kintone Portal Designer to switch it to Default Portal. Leaving the toggle button as Design Portal will cause the design saved in Kintone Portal Designer to be loaded in duplicate on top of the design that will be applied using the JavaScript file.

3. Open the "JavaScript and CSS Customization" Page

Click on the cog wheel on the Kintone Toolbar, and then click on Kintone Administration, then JavaScript and CSS Customization to open the system-wide customization settings screen.

4. Load the JavaScript File

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


011.png

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 page and uncheck all the items under Contents in This Portal.


012.png

Finally

With Kintone Portal Designer, it's easy to design any custom portal using HTML and CSS.
Try experimenting with ready-made sample templates, or create a completely original portal from scratch. For more inspiration, check out the gallery of Kintone portal templates below.

The contents of this article have been checked with the July 2019 version of kintone.

 

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!