Workflow Customization

This section describes how to customize workflows using JavaScript files and CSS files.
The customization is applied to request data created after you apply the customization.
Request data created prior to applying the customization will not be applied.

Allowing Workflow Customization

You can set whether to allow customizations using JavaScript files and CSS files.
If you allow customization, the "Request form details" page appears with action links to apply JavaScript files or CSS files and an action link to add items for JavaScript customization.

The screen in which you are allowing users customization

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

  2. Click "System settings".

  3. Select "Application settings" tab.

  4. Click "Workflow".

  5. Click "General Settings".

  6. On the "General Settings" screen, in "Allow JavaScript and CSS customization" field, select "Allow".

    Image of an allow radio button

  7. Confirm your settings and click "Apply".

Setting Items for JavaScript Customization

This section describes how to add, change, and delete items for JavaScript customization.
Use the items for JavaScript customization if you want use spaces for the purpose of changing the design in a request form in workflow customizations. The items defined in JavaScript and CSS are placed where the items for customization are placed.
The items for JavaScript customization is used for JavaScript customizations. You don't need to use them if you don't customize the request form.
For details on customization, see the page in cybozu developer network.

Adding Items for JavaScript Customization

Add items for JavaScript customization to request forms.
To add an item for JavaScript customization, you must be allowed to customize the workflow.

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

  2. Click "System settings".

  3. Select "Application settings" tab.

  4. Click "Workflow".

  5. Click "Request Form" list.

  6. On the "Request Form" list screen, select a category, then click the request form name of the request form to which you add items for JavaScript customization.

  7. On "Request form details" screen, click "Add item for customization" in the items list of the Request Form.

    Image of an adding a JavaScript customization item action link

  8. On the "Add item for customization" screen, set the required items.

    • Item Code:
      An item code is a unique code to identify items for JavaScript customization. You can enter codes in up to 100 characters.
      You can use single-byte alphanumeric characters, hyphens, and _ (underscores).
      If an item code is duplicated in one request form, an error occurs.
    • Place the item on the right:
      If you select "Place item on same row as previous item" check box, the item is placed next to the previous item.
    The page to add items for JavaScript customization

  9. Confirm your settings and click "Add".

    Added items are displayed at the bottom of the items list of the Request Form.

Changing Items for JavaScript Customization

Change the settings for the items for JavaScript customization.

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

  2. Click "System settings".

  3. Select "Application settings" tab.

  4. Click "Workflow".

  5. Click "Request Form" list.

  6. On the "Request Form" list screen, select a category, then click the request form name of the request form in which you modify items for JavaScript customization.

  7. On the items list of the Request Form in the "Request form details" screen, click the item name of the items for JavaScript customization to change.

  8. On the "Item for customization details" screen, click "Edit".

    Image of a changing JavaScript customization items action link

  9. On the "Edit item for customization" screen, set the required items.

  10. Confirm your settings and click "Save".

  11. If you have changed the placement, check the request form on the preview screen.

    For details, see Previewing Request Forms.

Reordering Items for JavaScript Customization

Reorder the items for JavaScript customization.
The steps to reorder are the same as changing the order of items and empty lines.

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

  2. Click "System settings".

  3. Select "Application settings" tab.

  4. Click "Workflow".

  5. Click "Request Form" list.

  6. On the "Request Form" list screen, select a category, then click the request form name of the request form in which you reorder items for JavaScript customization.

  7. On the items list of the Request Form in "Request form Details" screen, click "Reorder".

    Image of a reordering action link

  8. On the "Reorder" items screen, reorder the items for JavaScript customization.

    Reordering items screen

  9. Confirm your settings and click "Save".

  10. On the preview screen, check the request form.

    For details, see Previewing Request Forms.

Deleting Items for JavaScript Customization

Delete the item for JavaScript customization.
The customization is applied to request data created after you apply the customization.
For this reason, if you delete the item for JavaScript customization, it is not applied to the request data that you created before the customization.

Deleting Items for JavaScript Customization One by One

Delete the item for JavaScript customization one by one.

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

  2. Click "System settings".

  3. Select "Application settings" tab.

  4. Click "Workflow".

  5. Click "Request Form" list.

  6. On the "Request Form" list screen, select a category, then click the request form name of the request form in which you delete items for JavaScript customization.

  7. On the items list of the Request Form in the "Request form details" screen, click the item name of the item for JavaScript customization to delete.

  8. On the "Item for customization details" screen, click "Delete".

    Image of a delete action link

  9. Click "Yes" on "Delete item for customization" screen.

  10. On the preview screen, check the request form.

    For details, see Previewing Request Forms.

Deleting Multiple Items for JavaScript Customization in Bulk

Select the items for JavaScript customization to delete, then delete them in bulk.

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

  2. Click "System settings".

  3. Select "Application settings" tab.

  4. Click "Workflow".

  5. Click "Request Form" list.

  6. On the "Request Form" list screen, select a category, then click the request form name of the request form in which you delete items for JavaScript customization.

  7. On the items list of the Request Form in the "Request form details" screen, click the items for JavaScript customization to delete, then click "Delete".

    Image of the 'Delete' button

  8. Click "Yes" on the Delete all items screen.

  9. On the preview screen, check the request form.

    For details, see Previewing Request Forms.

Applying JavaScript/CSS Files

Apply JavaScript files or CSS files to request forms.

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 "Application settings" tab.

  5. Click "Workflow".

  6. Click "Request Form" list.

  7. On the "Request Form" list screen, select a category, then click the request form name of the request form to which you apply the JavaScript files or CSS files.

  8. On the "Request form details" screen, click "JavaScript and CSS customization" in request form information.

    Image of a JavaScript and CSS customization action link

  9. In the "JavaScript customization" field on the "JavaScript and CSS customization" screen, set the JavaScript file to apply.

    You can add up to 30 files or links.

    • File:
      Only files with an 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

  10. 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 an 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 Add CSS file action link](/g5/img-en/admin_system_customize_workflow_12. gif)

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

    JavaScript files run from top to bottom.
    Select the check boxes for the files and links you want to reorder, and then click "Move Up" or "Move Down".
    Image of a reordering action link

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

    Image of the Apply radio button

  13. Confirm your settings and click "Save".

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

  15. Enable the request form.

    For details, see Enabling Request Forms.