Display ServiceNow cases on an Adobe Experience Manager page

  • Release version: Yokohama
  • Updated August 3, 2023
  • 5 minutes to read

    • Use case components available within Adobe Experience Manager (AEM) to access customer service cases from the ServiceNow instance and display them on an AEM-based website.

    Before you begin

    Define the cross-origin resource sharing (CORS) rule to access the Case API and CSM Attachment API from your AEM instance. For more information, see Define a cross-origin resource sharing rule to access ServiceNow API endpoints from AEM.

    Role required: AEM author

    About this task

    The Case REST API enables you to create, retrieve, and update customer service case records. For more information, see Case API.

    The CSM Attachment API enables you to upload, download, and remove attachments associated with customer service cases and to retrieve attachment metadata. For more information, see CSM Attachment API.

    Procedure

    1. Log in to your AEM instance.
    2. Open your AEM page in Edit mode.
    3. Open the components browser.
    4. From the All list, select ServiceNow.
    5. Drag a component to the required position on the page.
      Note:
      If components are not available, update your template configuration to include the case components. In addition, you must modify the properties of the site template and add each case component to the list of allowed components.
    6. Open the component dialog for editing.
      Note:
      The case components in the Edit mode of a page in AEM are accessible to all users, including public users. Public users are anonymous AEM users who are not logged in.
    7. Set the Case Cards component properties to display all open customer service cases from your ServiceNow instance as column cards.
      Table 1. Case Cards component properties
      Property Description
      Title Title of this component that appears on the AEM page.
      Label parameters Comma-separated label parameters for Case [sn_customerservice_case] table columns. Each parameter is specified in the format label:column . Where label is displayed on the component and column is the name of a column from the Case [sn_customerservice_case] table.

      Example: Number:number,Priority:priority,Product:product
      Case list page URL Relative URL of the case list page to redirect to.

      Example: /content/servicenow/en/now_case_list.html
      Case view page URL Relative URL of the case view page to redirect to.

      Example: /content/servicenow/en/now_case_view.html
      Hide component for no cases Option to hide the component when there are no cases to display.
      Custom CSS class Custom CSS class for applying custom styles to this component. For more information, see Customizing the colors of ServiceNow components in AEM.
    8. Set the New Case component properties for users to create a customer service case in your ServiceNow instance from your AEM page.
      Table 2. New Case component properties
      Property Description
      Title Title of this component that appears on the AEM page.
      Short description label Label for the field to enter a brief description of the case.
      Description label Label for the field to enter a description of the case.
      Product label Semicolon-separated parameters to define the label and the placeholder text for the product list.
      Asset label Semicolon-separated parameters to define the label and the placeholder text for the asset list
      Number of list items Maximum number of items to include in the product and asset lists.

      Use the increment or decrement icons to increase or decrease the values. You can also manually enter a value. The value must be greater than 1.
      Show assets Option to display the asset list on the component.
      Case list page URL Relative URL of the case list page to redirect to.

      Example: /content/servicenow/en/now_case_list.html
      Case view page URL Relative URL of the case view page to redirect to.

      Example: /content/servicenow/en/now_case_view.html

      Note:
      You need to enter a value for this property to navigate to the case view page from the Case created window.
      Attachment file size limit in MB Maximum size limit for an attachment file that can be added to a case.
      Custom CSS class Custom CSS class for applying custom styles to this component. For more information, see Customizing the colors of ServiceNow components in AEM.
    9. Set the Case View component properties to display customer service cases and any comments and attachments, if available, from a ServiceNow instance.
      Table 3. Case View component properties
      Property Description
      Case parameter Name of the URL query parameter for the case number.

      Example: case_no
      Label parameters Comma-separated label parameters for Case [sn_customerservice_case] table columns. Each parameter is specified in the format label:column . Where label is displayed on the component and column is the name of a column from the Case [sn_customerservice_case] table.

      Example: Number:number,Priority:priority,Product:product
      Activities count Maximum number of activities such as comments and attachments to be displayed on the Activity tab.

      Use the increment or decrement icons to increase or decrease the values. You can also manually enter a value. The value must be greater than 1.
      Attachment file size limit in MB Maximum size limit for an attachment file that can be added to a case.

      Use the increment or decrement icons to increase or decrease the values. You can also manually enter a value. The value must be greater than 1.
      Article page URL Relative URL of the article page to redirect to.
      Example: /content/servicenow/en/now_article_view.html
      Note:
      If an article link is included in a case, you need to enter a value for this property to navigate to the knowledge article view page from the case.
      Custom CSS class Custom CSS class for applying custom styles to this component. For more information, see Customizing the colors of ServiceNow components in AEM.
    10. Set the Case List component properties to display a list of customer service cases.
      Table 4. Case List component properties
      Property Description
      Title Title of this component that appears on the AEM page.
      Label parameters Comma-separated label parameters for Case [sn_customerservice_case] table columns. Each parameter is specified in the format label:column . Where label is displayed on the component and column is the name of a column from the Case [sn_customerservice_case] table.

      Example: Number:number,Priority:priority,Product:product
      Case count Maximum number of cases to display on the component.

      Use the increment or decrement icons to increase or decrease the values. You can also manually enter a value. The value must be greater than 1.

      The maximum value you can enter for this field is 50.
      Show create case Option to display the button to create a case on the component.
      Create case button label Label for the button to create a case.
      Case create page URL Relative URL of the case create page to redirect to.

      Example: /content/servicenow/en/now_case_create.html
      Case view page URL Relative URL of the case view page to redirect to.

      Example: /content/servicenow/en/now_case_view.html
      Custom CSS class Custom CSS class for applying custom styles to this component. For more information, see Customizing the colors of ServiceNow components in AEM.