Customization Using JavaScript and CSS

Article Number:04042

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

JavaScript/CSS files can be applied from Kintone Administration. You can also customize the Portal of Kintone (top page) and space portals from Kintone Administration.
To customize individual apps separately, apply JavaScript/CSS files from the App Settings screen of each app. For details, refer to Customizing an App Using JavaScript and CSS.

You can use APIs provided by Kintone to create JavaScript programs to apply to Kintone. For details on API, refer to Kintone Developer Program.

Screens to which 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 screen
  • Charts embedded in external sites using the Embed Tag

JavaScript and CSS are applied to all screens expect those listed above.

Uploading JavaScript and CSS files

This section describes how to upload the created JavaScript and CSS files on Kintone.
Only Kintone Administrators can upload the files.

  1. Navigate to 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 customization to all users, apply it only to Kintone Administrators and check that the 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 kintone.com can also be specified as the link.
    • Up to 30 files can be uploaded for PC and mobile devices separately.
    • The files are loaded in the order they are listed, from top to bottom.
    • The ordering of the files can be changed by dragging and dropping Arrow icon . The "System-Wide JavaScript Customization" screen
  5. Click Save.