Garoon General Customization

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

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

Adding Customization Group

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
Steps:

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

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

  3. Click System settings.

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

    Image with an action link to add customization groups

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

    You should set the name of the customization group.
    Image of the input field of customization group name

  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 targets display in the order set automatically. Cannot change.
    Image of an edit action link Image of selecting targets for customization

  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.
    Image of an adding a JavaScript file action link

  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.
    Image of an adding a CSS file action link

  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".
    Image of a reordering action link

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

    Image of the Apply radio button

  14. Confirm your settings and click Add.

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

Changing Customization Groups

Change the settings in the customization group.

Steps:

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

  2. Click System settings.

  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.

    Image of an edit action link

  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.

Reordering Customization Groups

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.

Steps:

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

  2. Click System settings.

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

    Image of a reordering action link

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

    Screen to reorder 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.

Deleting Customization Groups

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

Deleting Customization Groups One by One

Delete customization groups one by one.

Steps:

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

  2. Click System settings.

  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.

    Image of a delete action link

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

Deleting Multiple Customization Groups in Bulk

Delete multiple customization groups by selecting them at once.

Steps:

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

  2. Click System settings.

  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.

    Image of the 'Delete' button which is surrounded by the red rectangle box

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