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
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
Install Kintone Portal Designer
1. Install Kintone Portal Designer
Install the extension in Chrome using the link below.
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.
Kintone Portal Designer settings will open.
Layout of Kintone Portal Designer
Import a Sample Template
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 advanced-3tabs and then click the Import button. The HTML and CSS for the template will be loaded.
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.
3. Check the Design
Return to the portal and reload the page. The sample template will be applied to the page.
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.
Return to the portal and reload the page. The string on each tab has been rewritten.
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
2. Deactivate Kintone Portal Designer
5. Hide Portal Content
To hide these elements, open the Portal Settings page and uncheck all the items under Contents in This Portal.
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.