This section describes how to customize the entire Garoon using JavaScript files and CSS files.
The JavaScript files and CSS files you apply here affect the user interfaces in PC view.
The customizations are not applied to the following screens:

• System administration screens
• Operational Administration Screen
• Personal Settings Screen
• Login screen
• Pop-up window
  However, the customization is also applied to pop-up windows in "Compose E-mail" screen.

We recommend that you customize the following applications using the administrative screens of each application:

• Portal Customization
• Scheduler Customization
• Message Customization
• E-mail Customization
• Workflow Customization

Add a customization group for each target or purpose of the customization.
Set the following information to customization groups:

• Users, organizations, or roles for which you want to apply customizations
• JavaScript files required for customization
• CSS files required for customization

1. You can prepare JavaScript files and CSS files yourself.

2. Click the administration menu icon (gear icon) in the header.

3. Click Garoon System Administration.

4. Select "Basic system administration" tab.

5. Click "Customize".

6. Click "JavaScript and CSS customization".

7. On the "JavaScript and CSS customization" screen, click "Add customization group" .

   

8. On the "Add Customization Group" screen, enter the "Customization Group name" field.

   You should set the name of the customization group.
   

9. In the "Applied to" field, click "Edit" and select the target for which you want to apply the customization.

   Select the target from the user, organization, or role. By default, the logged-in user has been set for the target.
   The order to display the targets are set automatically. You cannot change it.
   

10. In the "JavaScript customization" field, set the JavaScript file you want to apply.

    You can add up to 30 files or links.

    • File:
      Only files with a file extension of ".js" can be added.
      Up to 5 MB of files can be uploaded.
    • Link:
      Specify a URL starting with "https://" in up to 512 characters.
    

11. In the "CSS customization" field, set the CSS file you want to apply.

    You can add up to 30 files or links.

    • File:
      Only files with a file extension of ".css" can be added.
      Up to 5 MB of files can be uploaded.
    • Link:
      Specify a URL starting with "https://" in up to 512 characters.
    

12. You can change the order of the files and links as needed.

    JavaScript files run from top to bottom.
    Select the checkboxes for the files and links you want to reorder, and then click "Move Up" or "Move Down".
    

13. In the "Customization" field, select "Apply".

    

14. Confirm your settings and click Save.

15. On the screen where the customizations are applied, confirm that the design and item functions are fine.

Change the settings in the customization group.

1. Click the administration menu icon (gear icon) in the header.

2. Click Garoon System Administration.

3. Select "Basic system administration" tab.

4. Click "Customize".

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, click the customization group name of the customization group to change.

7. On the "Customization group details" screen, click Edit.

   

8. On the "Edit customization group" screen, set the required items.

9. Confirm your settings and click Save.

10. On the screen where the customizations are applied, confirm that the design and item functions are fine.

Reorder the customization groups.
The JavaScript file and the CSS file are imported from top to bottom in the order appearing in "JavaScript and CSS customization" screen.

1. Click the administration menu icon (gear icon) in the header.

2. Click Garoon System Administration.

3. Select "Basic system administration" tab.

4. Click "Customize".

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, click "Reorder Customization Groups".

   

7. On the "Reorder Customization Groups" screen, reorder the customization groups.

   

8. Confirm your settings and click Save.

9. On the screen where the customizations are applied, confirm that the design and item functions are fine.

Delete customization groups.
If you delete a customization group, its settings are disabled.

Delete customization groups one by one.

1. Click the administration menu icon (gear icon) in the header.

2. Click Garoon System Administration.

3. Select "Basic system administration" tab.

4. Click "Customize".

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, click the customization group name of the customization group to delete.

7. On the "Customization group details" screen, click Delete.

   

8. Click Yes on the "Delete customization group" screen.

Delete multiple customization groups by selecting them at once.

1. Click the administration menu icon (gear icon) in the header.

2. Click Garoon System Administration.

3. Select "Basic system administration" tab.

4. Click "Customize".

5. Click "JavaScript and CSS customization".

6. On the "JavaScript and CSS customization" screen, select the checkbox of the customization group to delete, then click Delete.

   

7. Click Yes on the "Delete customization groups" screen.