Customizing an App with JavaScript and CSS

Article Number:040556

You can use JavaScript and CSS to customize app operations and app screens.

Use API to create your JavaScript programs.
For details on how to use JavaScript and CSS Customization to customize apps, see cybozu developer network.

Uploading JavaScript and CSS Files

This section explains how to upload the created files to apps.
Only Kintone system administrators can upload JavaScript/CSS files to Kintone.

For JavaScript/CSS files, you can upload different files for PCs and mobile devices (including the smartphone app). The uploaded files are reflected on the following screens:

  • View screen
  • Create Record screen
  • Edit Record screen
  • Record Details screen
    The imported files are also reflected on the Record Details screen that is displayed when you open a notification from an app.
  • Print Record screen
  • Tables and charts that present aggregated record data
    A color theme is not applied to charts that are embedded in external sites using Embed Tags.
  • The above screens in the test environment (only for PC)
  1. Click the app settings button Settings button at the upper right of the "View" screen, select the App Settings tab, and then select JavaScript and CSS Customization under Customization and Integration.

  2. Select the scope of customization from the following:

    • Affect all users
    • Affect only app administrators
    • Disable

    Before applying customization to all users, check to see that the customization is done correctly by having it applied only to the app administrator.
    When you select "Affect all users", the customization applies to guest users as well.

  3. 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.

    Screen to upload a file for customization

  4. Click Save.

  5. Click Update App on the upper right side of the screen.