Customization Using JavaScript and CSS

Article Number:04042

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

You can apply JavaScript/CSS files from Kintone Administration. You can also customize the Portal of Kintone (top page) and space portals from Kintone Administration.
If you want to customize each app separately, apply JavaScript/CSS files from the "App Settings" screen of each app. 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 screen
  • 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 applying your customization to all users, apply it only to System Administrators and test whether your customization works correctly.
    Regardless of the option you choose here, customization is not applied to guest users.

  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.