Customizing an App with JavaScript and CSS

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:

  • Record List 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 graphs in which records are summarized
    Design themes do not apply to graphs that are embedded in external sites using Embed Tags.
  • The above screens in the test environment (only for PC)
  1. Click the app setting button Setting button on the upper right of the record view, select "App Settings" tab > "Customization and Integration", and then select JavaScript and CSS Customization.

  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 customization files
  4. Click "Save".

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