Configure the Case Management Accelerator for custom templates

The Case Management Accelerator uses default templates for the case screen to allow you to use any case model.

However, you can choose to customize case templates by editing the default templates and using your own HTML.

Assuming you have the ServiceRequest sample up and running, you can quickly see how custom templates work:

1. Open appdev console http://localhost:8080/apps
2. Double click the CaseManager.config.json file
3. Locate the caseDisplayConfig -> useCustomTemplates configuration key:
4. Set useCustomTemplates: true

Now save the file and access the application using the test URL:

http://localhost:8080/apps/_test/CaseManager/index.html

Now search and open an existing 'customer' case - you will see both the case header (top of the screen) and case details (lower section) have changed - there is extra information about the case in the header (name, date of birth) and the linked complaints are shown as a list with a chart vizualisation.

So what happened? By default the default templates are in the case-templates folder of the application:

The default case header template is default_header.html and the default case details template is default.html. However, when you switch useCustomTemplates to true - the UI will try and use a template specifically for the case type. In the Service Request sample the case type for customer is Service.Cases.Customer. Therefore the UI loads the Service.Cases.Customer_header.html and Service.Cases.Customer.html instead.

If you edit the Service.Cases.Customer_header.html file you will see it contains HTML for the header. You can just edit this file to change the look and feel. The Service.Cases.Customer.html contains components - you can just add more HTML here to change look and feel - or you can edit the components inside the HTML. Note that each component inside the Service.Cases.Customer.html (comments, case details, documents) has a template-path attribute - you can change these to change the look and feel of each component too. Changing these HTML templates/components does require a basic understanding of AngularJS concepts.

If you want to create a new template for your own case type, we recommend you start by taking a copy of default.html and default_header.html, and name them using your case class name such as com.example.mycaseclass_header.html and com.example.mycaseclass.html - you can then modify the templates as you wish.

Some tips:

1. When editing use RADJAD rather than directly editing the app in CaseManagement UI - radjad lets you use an external tool to edit the HTML files
2. See what data is available to your templates by looking at CaseManager/components/case-display/case-display.js - the comments at the top of this file shows all the data available in scope variables
3. Do a quick angularJS primer so you understand scope variables adn the use of templates and marking data such as {{mydata}} in HTML - there are plenty of these primers on the web
4. Only when your happy with your app, deploy it to the appdev console and publish it... this will save you lots of time
5. A firefox plugin called angular scope can help you to see what data is available to your template