Customizing Kintone with Javascript & CSS

Overview

You can change the look and feel of the Kintone platform using Javascript and CCS customization.

Users can upload Javascript and CSS files to affect system-wide platform changes, or make app-level changes for each specific application.

Please note that JavaScript files support customizations for both desktop and mobile devices (including the smartphone app), whereas CSS files only support customizations for desktop devices.

Uploaded JavaScript & CSS customizations are applied to all webpages except for the following:

  • System Administration
  • App Management
  • Personal Settings
  • Graphs embedded in external sites by using the Embed Tag

Use our open API to create your JavaScript programs. For details on our API, please visit the Kintone Developer Network.

System-wide Javascript and CSS Customization

This section talks about how to upload files you created to Kintone. Only Kintone administrators can upload JavaScript and CSS files.

  1. Navigate to the JavaScript and CSS Customization page by clicking the gear wheel gear_wheel.PNG, selecting Kintone Administration, and clicking JavaScript and CSS Customization under Customization
  2. Choose the scope of customization from the following options:
    • Affect all users: this will affect all users.
      • Tip: Before applying the customization to all users, apply it only to Kintone Administrators. By doing this, you can test to make sure the customization is working correctly.
    • Affect only Kintone administrator pages: this will affect only the pages accessible by Kintone administrators.
    • Disable: the files will be uploaded but won't go into affect. 
  3. Select a Javascript or CSS file from your device.
  4. Click Save.

Please note: 

  • Customizations are not applied to guest users. 

App-level Javascript and CSS Customization

This section talks about how to upload files you created to Kintone. Only those with permission to App Settings can upload JavaScript and CSS files to an app.

  1. From the App you wish to customize, click the gear wheel gear_wheel.PNG to Change App Settings. 
  2. Navigate to the App Settings tab.
  3. Under Customization and Integration, select Javascript and CSS Customization. 
  4. Specify whether the changes will:
    • Affect all users: this will affect all users.
      • Tip: Before applying the customization to all users, apply it only to the app administrators. By doing this, you can test to make sure the customization is working correctly.
    • Affect only app administrators: this will show changes only for those with permission to the App Settings. 
    • Disable: the files will be uploaded but won't go into affect. 
  5. Upload a Javascript or CSS file or link.
  6. Click Save
  7. Click Update App.

Please note:

  • You can upload up to 30 files each for:
    • JavaScript files for PC
    • JavaScript files for mobile devices
    • CSS files for PC
  • The files are imported in order from top to bottom. Use the drag and drop arrow icon to change the order of files.
Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.