Hello again!
In a previous post, I described how to create your own custom add case page using the Client-side Human Service (CSHS) framework that is also used to create BAW process task UI pages.
This time, we are going to see how you can quickly create a custom case details page using the same CSHS design tools and starting from the updated custom starter page we provide in the new BAW 22.0.2. If you want to follow along on your own BAW 22.0.2 system, follow the steps in the previous post to get to the point where we are going to start from below.
With your badge request project open in Case Builder, navigate to the Case Types / Badge Request / Case Type page. Scrolling down you will again see the section that shows you the pages that will be displayed for the add, split and case details.
Click the New Case Details layout link next to the dropdown menu that shows you are currently using the classic Case Details page to view your Badge Request cases. This will start a new layout definition for you where you can enter a name like Badge Request Details. The rest of the settings are fine and you can see by the checkbox option that this new page will become the default case details page. Click OK to save.
Like we did for the Add Case page we customized before, we need to do one thing before we try it out. Click the new Badge Request Details name as shown below to open the CSHS page editor.
The Client-side Human Service (CSHS) editor will open in a new window and you will initially see the flow that will occur when the page is opened in the client. As you can see, the CSHS goes through several steps before the page is actually displayed to the user at the Case Details step. These system steps load the information about the case instance and its properties into variables that are used during the CSHS lifecycle.
To see the actual Case Details UI page, you can either double-click the Case Details tile in the flow or select it from the tabs just above the diagram.
The updated custom details start page provided with BAW 22.0.2 now includes a new Case Header view that is easily customized and allows you to drop in your own buttons next to the default ones we provide (more on that later).
For now, just click on the tab that will show the case properties (its localized name key is tw.resource.CAT.properties).
You will see that there are no case properties included yet, just a vertical layout placeholder you can use as a starting point. Now select the Variable section from the palette on the right and look for the Content Object variable that represents your case type and its properties.
We want all the properties we have defined to be displayed so we grab the caseProperties (Badge Request) level and drag it (and its children) onto the blue Drop content here drop zone. Note that you can also drag individual case properties from under the case type variable to anywhere on the page you want them.
We are done for now so let's go try it out. Click the Save checkmark icon to commit your changes and return to the Case Builder window. You can leave the CSHS editor widow open int he background if you like.
Back in Case Builder, deploy our changes by clicking the Deploy icon and then click the Play button to launch the Case Client.
Like we did in the custom Add Case example, make sure you have added your user to the case roles if this is the first time you are opening the Badge Request solution in the Case Client. Once at the main Cases page, either add a new Badge Request case or do a search and open the one from the previous example.
As usual, a new page tab will open in the Case Client and your new custom Badge Request Details CSHS page will be displayed.
With the new custom case details CSHS starter page, you will notice that all the default page actions (Split and Close) and now just page of the CSHS page itself. The Case Toolbar widget that is part of the Adapter Page that hosts the CSHS page no longer has any buttons on it as the actions are now available as native CSHS UI Views. The Case Toolbar widget on the Adapter Page now simply orchestrates the loading of the CSHS into the CSHS Viewer widget on the Adapter Page when a case is opening in the Case Client.
Returning to the CSHS editor for your custom page, lets explore the new Case Header UI View and how you can customize it.
The Case Header UI View is a quick way to display information about the case and provide a place for the common action buttons. You can completely replace this view if you want something completely different and just provide your own buttons that trigger the boundary events that close the page.
If you select the Case Header UI View and look at its configuration options at the bottom of the editor, you will see quite a few choices you can make before deciding to completely replace this handy view.
You can see it is already pre-bound to the CSHS input variables that identify the case that is being displayed. Those values are passed in by either Case Client or Workplace when the case is being opened. The isCaseClient variable is used to tell the CSHS case views that they are being displayed in the Case Client web application (not Workplace) and can send messages to it to do things like open other case artifacts into new case tabs.
In the Case Header UI View there are several predefined sections. The right has the case information text and the left contains a horizontal layout with a set of drop zones for buttons. The left drop zone is empty and right drop zone has a normal button configured as Close. The Split Case button is built into the UI View and can be configured or turned off using the configuration options.
Returning to the palette on the right, select Case from the picker to scope the available UI Views to that category.
Let's now add a couple of the prebuilt case action buttons to the header. Click and drag the Add Activity UI View into the empty drop zone in the Case Header UI View.
Scroll down in the palette and find the Create Package UI View and drag it onto the Add Activity button you just added. You will see an orange bar indicating that you are actually placing it before or after the Add Activity button that is already in the drop zone.
Now you see you have two buttons in the drop zone placeholder. You could have also dropped the new button onto the Close button that is already populating the right hand drop zone. After adding the two button UI Views, you need to configure them so they know about the current case being displayed. You do that by selecting them on the page and in the Configuration section for them at the bottom, click the purple circle to toggle to select mode
You then select the corresponding input variable the view wants.
To make the new buttons match the size of the ones that are already there, use the Appearance section of the Configuration to set their size to "Small" and any other options you would like.
Save your changes in the CSHS editor again and reopen your case in the Case Client to load the new CSHS page.
"Hey!" you ask. "Where is the Add Activity button we added?" Well unless your case type has any Discretionary case activities defined, the Add Activity UI View is smart enough to hide itself.
Also note that like case properties, you can place these built-in button actions anywhere you want on the page and use the Appearance configuration to make them look differently. If you look in the palette, you will see there is also a standalone Split Case UI View button that you can use on its own as well. With CSHS based case pages, your layout options are only limited to your imagination (or requirements).
That's all for this introduction to the updated case details custom CSHS page. Next time we'll explore the updated Case Activities and Case Tasks UI Views in BAW 22.0.2.