Design a Custom Portal with Kintone Portal Designer
Kintone Portal Designer 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.
Feature 1: Design a portal using only HTML and CSS
Feature 2: Use preset templates and icons
Kintone Portal Designer comes with several templates. Developers can also use more than 50 preset icons for their portal development.
Feature 3: Apply the design to all users
How to Use Kintone Portal Designer
Install the Chrome Extension
Install the Kintone Portal Designer Chrome extension .
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.
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
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
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.