Adding Custom Fields to Private Portal's My Cases Page
Last Updated -
OverviewIf you enable the Private Portal, the 'My Cases' feature allows your customers to login to your support center and view their cases with your company. This feature comes as standard once you have enabled the Private Portal in Desk.You can customize both how My Cases looks and also what information is displayed by editing your support center theme by using the Advanced Editor. This article covers how to display custom field data within My Cases.
ExampleAt the end of this guide, you'll have additional fields showing within My Cases. Below is an example.
Determining which custom fields you'd like to displayThe first step is deciding which custom fields you'd like to display to your customers. You can view your case custom fields by going to Desk.com Admin, clicking Cases at the top, and selecting Cases on the left hand side.
Your existing custom fields will be listed but if you don't yet have custom fields, go ahead and create them from this screen.
For every custom field you'd like to make visible within My Cases, you'll need to know it's 'key'. To determine a custom field's key, click on the custom field to open up the custom field editor. If you are creating a new custom field, be sure to add a value for the key field. A best practice is to name it the same as the 'name' field but it can be different if you want.
In this example, the custom field named "Product" has the key "product".
Editing your support center themeNow that we know our custom field's key, we're ready to add it to My Cases. To do this, we must edit our My Cases page within our support center theme. Click on Channels at the top of Desk.com Admin, then on the left hand side click on Web Themes under Support Center. Click on the support center theme you'd like to edit and then click on the Advanced Themes tab. On the left, click on "My Cases (Detail)".
Find the HTML that lists out the currently assigned agent. We'll be adding our custom field data here. You'll want to modify the code to match the snippet below:
When done, click "Save and Continue Editing" at the bottom-right and then click on Preview at the top-right to test.