{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":5544,"path":"customer-service-management/aem-display-case-components.md","title":"Display ServiceNow cases on an Adobe Experience Manager page","bundle":null,"doc_type":null,"release":"australia","body":"\n# Display ServiceNow cases on an Adobe Experience Manager page\n\nUse 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.\n\n## Before you begin\n\nDefine 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/aem-integration-setup.md).\n\nRole required: AEM author\n\n## About this task\n\nThe Case REST API enables you to create, retrieve, and update customer service case records. For more information, see [Case API](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/api-reference/case-api.md).\n\nThe 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/api-reference/attachment_csm-api.md).\n\n## Procedure\n\n1.  Log in to your AEM instance.\n\n2.  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).\n\n3.  Open the [components browser](https://helpx.adobe.com/in/experience-manager/6-5/sites/authoring/using/author-environment-tools.html#main-pars_title_17).\n\n4.  From the **All** list, select **ServiceNow**.\n\n5.  Drag a component to the required position on the page.\n\n    **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.\n\n6.  Open the [component dialog for editing](https://helpx.adobe.com/in/experience-manager/6-5/sites/authoring/using/editing-content.html#ComponentEditDialog).\n\n    **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.\n\n7.  Set the Case Cards component properties to display all open customer service cases from your ServiceNow instance as column cards.\n\n<table id=\"table_kx2_4q2_tkb\"><thead><tr><th>\n\nProperty\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td id=\"component-title\">\n\nTitle\n\n</td><td id=\"component-title-desc\">\n\nTitle of this component that appears on the AEM page.\n\n</td></tr><tr><td id=\"component-column-label\">\n\nLabel parameters\n\n</td><td id=\"component-column-label-desc\">\n\nComma-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`\n\n</td></tr><tr><td id=\"component-case-list\">\n\nCase list page URL\n\n</td><td id=\"component-case-list-desc\">\n\nRelative URL of the case list page to redirect to. Example: `/content/servicenow/en/now_case_list.html`\n\n</td></tr><tr><td id=\"component-view-case\">\n\nCase view page URL\n\n</td><td id=\"component-view-case-desc\">\n\nRelative URL of the case view page to redirect to. Example: `/content/servicenow/en/now_case_view.html`\n\n</td></tr><tr><td>\n\nHide component for no cases\n\n</td><td>\n\nOption to hide the component when there are no cases to display.\n\n</td></tr><tr><td id=\"component-custom-css\">\n\nCustom CSS class\n\n</td><td id=\"component-custom-css-desc\">\n\nCustom CSS class for applying custom styles to this component. For more information, see [Customizing the colors of ServiceNow components in AEM](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/aem-style-components.md).\n\n</td></tr></tbody>\n</table>8.  Set the New Case component properties for users to create a customer service case in your ServiceNow instance from your AEM page.\n\n<table id=\"table_abr_rbk_cmb\"><thead><tr><th>\n\nProperty\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nTitle\n\n</td><td>\n\nTitle of this component that appears on the AEM page.\n\n</td></tr><tr><td>\n\nShort description label\n\n</td><td>\n\nLabel for the field to enter a brief description of the case.\n\n</td></tr><tr><td>\n\nDescription label\n\n</td><td>\n\nLabel for the field to enter a description of the case.\n\n</td></tr><tr><td>\n\nProduct label\n\n</td><td>\n\nSemicolon-separated parameters to define the label and the placeholder text for the product list.\n\n</td></tr><tr><td>\n\nAsset label\n\n</td><td>\n\nSemicolon-separated parameters to define the label and the placeholder text for the asset list\n\n</td></tr><tr><td>\n\nNumber of list items\n\n</td><td>\n\nMaximum 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`.\n\n</td></tr><tr><td>\n\nShow assets\n\n</td><td>\n\nOption to display the asset list on the component.\n\n</td></tr><tr><td>\n\nCase list page URL\n\n</td><td>\n\nRelative URL of the case list page to redirect to. Example: `/content/servicenow/en/now_case_list.html`\n\n</td></tr><tr><td>\n\nCase view page URL\n\n</td><td>\n\nRelative URL of the case view page to redirect to. Example: `/content/servicenow/en/now_case_view.html`\n\n **Note:** You need to enter a value for this property to navigate to the case view page from the Case created window.\n\n</td></tr><tr><td>\n\nAttachment file size limit in MB\n\n</td><td>\n\nMaximum size limit for an attachment file that can be added to a case.\n\n</td></tr><tr><td>\n\nCustom CSS class\n\n</td><td>\n\nCustom CSS class for applying custom styles to this component. For more information, see [Customizing the colors of ServiceNow components in AEM](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/aem-style-components.md).\n\n</td></tr></tbody>\n</table>9.  Set the Case View component properties to display customer service cases and any comments and attachments, if available, from a ServiceNow instance.\n\n<table id=\"table_tfp_h4q_tkb\"><thead><tr><th>\n\nProperty\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nCase parameter\n\n</td><td>\n\nName of the URL query parameter for the case number. Example: `case_no`\n\n</td></tr><tr><td>\n\nLabel parameters\n\n</td><td>\n\nComma-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`\n\n</td></tr><tr><td>\n\nActivities count\n\n</td><td>\n\nMaximum 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`.\n\n</td></tr><tr><td>\n\nAttachment file size limit in MB\n\n</td><td>\n\nMaximum 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`.\n\n</td></tr><tr><td>\n\nArticle page URL\n\n</td><td>\n\nRelative URL of the article page to redirect to.Example: `/content/servicenow/en/now_article_view.html`\n\n**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.\n\n</td></tr><tr><td>\n\nCustom CSS class\n\n</td><td>\n\nCustom CSS class for applying custom styles to this component. For more information, see [Customizing the colors of ServiceNow components in AEM](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/aem-style-components.md).\n\n</td></tr></tbody>\n</table>10. Set the Case List component properties to display a list of customer service cases.\n\n<table id=\"table_ywq_wbr_tkb\"><thead><tr><th>\n\nProperty\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nTitle\n\n</td><td>\n\nTitle of this component that appears on the AEM page.\n\n</td></tr><tr><td>\n\nLabel parameters\n\n</td><td>\n\nComma-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`\n\n</td></tr><tr><td>\n\nCase count\n\n</td><td>\n\nMaximum 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`.\n\n The maximum value you can enter for this field is 50.\n\n</td></tr><tr><td>\n\nShow create case\n\n</td><td>\n\nOption to display the button to create a case on the component.\n\n</td></tr><tr><td>\n\nCreate case button label\n\n</td><td>\n\nLabel for the button to create a case.\n\n</td></tr><tr><td>\n\nCase create page URL\n\n</td><td>\n\nRelative URL of the case create page to redirect to.Example: `/content/servicenow/en/now_case_create.html`\n\n</td></tr><tr><td>\n\nCase view page URL\n\n</td><td>\n\nRelative URL of the case view page to redirect to.Example: `/content/servicenow/en/now_case_view.html`\n\n</td></tr><tr><td>\n\nCustom CSS class\n\n</td><td>\n\nCustom CSS class for applying custom styles to this component. For more information, see [Customizing the colors of ServiceNow components in AEM](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/customer-service-management/aem-style-components.md).\n\n</td></tr></tbody>\n</table>\n"}}