Customizing with JavaScript and CSS

You can apply JavaScript and CSS files to customize the system-wide operation and appearance of Kintone. In this case, you can specify customization settings for PC and Mobile (including mobile apps) separately.

You can apply JavaScript/CSS files in the Kintone Administration. Use the same administration screen to customize the Portal of the Kintone top page and the Space Portal page.
When you want to customize each app separately, apply JavaScript/CSS files from the app settings page. For details, refer to "Customizing an App with JavaScript and CSS".

You can use APIs provided by Kintone to create JavaScript programs to apply to Kintone. For details on API, access cybozu developer network.

Screens That JavaScript and CSS Are Not Applied

JavaScript and CSS are not applied to the following screens.

  • Screens that can be configured from Kintone Administration
  • App settings page
  • Personal Settings
  • Graphs embedded in external sites by using the Embed Tag

Except the above screens, JavaScript and CSS are applicable to any screen.

Uploading JavaScript and CSS Files

This section describes how to upload files you created to Kintone.
Only Kintone System Administrators can upload files.

  1. Open the Kintone Administration screen.
    Opening the Kintone Administration Screen

  2. Click "JavaScript and CSS customization".

  3. Choose the scope of customization from the following three options:

    • Affect all users
    • Affect only Kintone administrators pages
    • Disable

    Before you apply your customization to all users, you should apply it to only the system administrators, to test whether your customization works correctly.
    Regardless of which option you choose here, customization is not applied to guests.

  4. Click Add Link or Add File and select a file to upload.

    • Domains other than can be specified for the URL.
    • You can upload up to 30 files for each combination of file types and device types.
    • The files are loaded in order from top to bottom.
    • Drag and drop Arrow icon to change the order of files. System-Wide Customization screen
  5. Click "Save".