Customizing kintone system-wide using JavaScript and CSS

Article Number:04042

You can use JavaScript and CSS to customize the behavior and appearance of kintone system-wide. Customization can be set for PCs and mobile devices (including the mobile app) separately.

You can access the screen for applying JavaScript and CSS files from kintone administration. By applying files there, you can customize kintone system-wide, as well as your portal (the main page of kintone) or space portals.

You can use APIs provided by kintone to create customization files to apply to kintone system-wide. For details, refer to the following page.
cybozu developer network

Screens affected by system-wide kintone customization

For information on which screens are affected by JavaScript or CSS files imported in kintone administration, refer to the following page.
Pages where kintone system-wide customizations are applied

Applying JavaScript and CSS files

This section describes how to apply customization files created with JavaScript and CSS to kintone. Note that only kintone administrators can apply customization.

  1. Open the kintone administration screen.
    Opening the "kintone administration" screen

  2. Click JavaScript and CSS customization.

  3. On the Customizing kintone system-wide screen, select one of the following as the scope of customization.

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

    If you want your customization to affect all users, make sure to first apply it to affect only kintone administrator's pages 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 import.
    If multiple files are imported, they are read in the order they are listed. You can change the file order by dragging and dropping the Drag to reorder icon (the up and down arrows icon) to the left of each file name.
    Screenshot: The "Customizing kintone system-wide" screen

  5. Click Save at the upper left of the screen.