---
sourceDocument: Australia Customer Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/customer-service-management

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Display ServiceNow cases on an AEM page

# Display ServiceNow cases on an Adobe Experience Manager page {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 3 de ago. de 2023
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 min. de leitura

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.

## Antes de Iniciar

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 (CORS) to access ServiceNow API endpoints from AEM](https://servicenow-prod.fluidtopics.net/Skkg824DVMWXJv0NlOPlUg#aem-set-cors-rules "Define a cross-origin resource sharing (CORS) rule on your ServiceNow instance to access endpoints of the Knowledge Management REST API, Case API, or CSM Attachment API from your Adobe Experience Manager (AEM) instance.").

Role required: AEM author

## Por Que e Quando Desempenhar Esta Tarefa

The Case REST API enables you to create, retrieve, and update customer service case records. For more information, see [Case API](https://www.servicenow.com/docs/access?context=case-api&version=australia&pubname=australia-api-reference&ft:locale=en-US).

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](https://www.servicenow.com/docs/access?context=attachment_csm-api&version=australia&pubname=australia-api-reference&ft:locale=en-US).

## Procedimento

1. Log in to your AEM instance.
2. Open your AEM page in [Edit mode](https://helpx.adobe.com/in/experience-manager/6-5/sites/authoring/using/author-environment-tools.html#main-pars_title_20).
3. Open the [components browser](https://helpx.adobe.com/in/experience-manager/6-5/sites/authoring/using/author-environment-tools.html#main-pars_title_17).
4. From the All list, select ServiceNow.
5. Drag a component to the required position on the page.  
   Nota:  
   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](https://helpx.adobe.com/in/experience-manager/6-5/sites/authoring/using/editing-content.html#ComponentEditDialog).  
   Nota:  
   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.  
   {#aem-display-case-components__table_kx2_4q2_tkb__entry__2}{#aem-display-case-components__component-title-desc}{#aem-display-case-components__component-column-label-desc}{#aem-display-case-components__component-case-list-desc2}{#aem-display-case-components__component-view-case-desc2}{#aem-display-case-components__component-custom-css-desc}

   | 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 <var class="keyword varname">label</var>:<var class="keyword varname">column</var> . Where <var class="keyword varname">label</var> is displayed on the component and <var class="keyword varname">column</var> 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](https://servicenow-prod.fluidtopics.net/fNS9sWA~h3__2rSK9EYgog#aem-style-components "You can define the look and feel of the ServiceNow components in Adobe Experience Manager (AEM) by specifying colors for them."). |
   [Tabela 1. Case Cards component properties]

   {#aem-display-case-components__table_kx2_4q2_tkb}
8. Set the New Case component properties for users to create a customer service case in your ServiceNow instance from your AEM page.  
   {#aem-display-case-components__table_abr_rbk_cmb__entry__2}{#aem-display-case-components__slider-desc}

   | 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 <kbd class="ph userinput">1</kbd>. |
   | 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 Nota: 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](https://servicenow-prod.fluidtopics.net/fNS9sWA~h3__2rSK9EYgog#aem-style-components "You can define the look and feel of the ServiceNow components in Adobe Experience Manager (AEM) by specifying colors for them."). |
   [Tabela 2. New Case component properties]

   {#aem-display-case-components__table_abr_rbk_cmb}
9. Set the Case View component properties to display customer service cases and any comments and attachments, if available, from a ServiceNow instance.  
   {#aem-display-case-components__table_tfp_h4q_tkb__entry__2}

   | Property | Description |
   |-|-|
   | Case parameter | Name of the URL query parameter for the case number. Example: <kbd class="ph userinput">case_no</kbd> |
   | Label parameters | Comma-separated label parameters for Case \[sn_customerservice_case\] table columns. Each parameter is specified in the format <var class="keyword varname">label</var>:<var class="keyword varname">column</var> . Where <var class="keyword varname">label</var> is displayed on the component and <var class="keyword varname">column</var> 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 <kbd class="ph userinput">1</kbd>. |
   | 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 <kbd class="ph userinput">1</kbd>. |
   | Article page URL | Relative URL of the article page to redirect to. Example: /content/servicenow/en/now_article_view.html Nota: 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](https://servicenow-prod.fluidtopics.net/fNS9sWA~h3__2rSK9EYgog#aem-style-components "You can define the look and feel of the ServiceNow components in Adobe Experience Manager (AEM) by specifying colors for them."). |
   [Tabela 3. Case View component properties]

   {#aem-display-case-components__table_tfp_h4q_tkb}
10. Set the Case List component properties to display a list of customer service cases.  
    {#aem-display-case-components__table_ywq_wbr_tkb__entry__2}

    | 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 <var class="keyword varname">label</var>:<var class="keyword varname">column</var> . Where <var class="keyword varname">label</var> is displayed on the component and <var class="keyword varname">column</var> 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 <kbd class="ph userinput">1</kbd>. 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](https://servicenow-prod.fluidtopics.net/fNS9sWA~h3__2rSK9EYgog#aem-style-components "You can define the look and feel of the ServiceNow components in Adobe Experience Manager (AEM) by specifying colors for them."). |
    [Tabela 4. Case List component properties]

    {#aem-display-case-components__table_ywq_wbr_tkb}
{#aem-display-case-components__steps_vqd_flt_flb}