Hi,

Customer reported that form-level error messages are displayed at both the top and bottom of the harness. From a UI standpoint, customer feels it is a bit odd and they want to show it at the top only. In this post, I will share how we customized it. This tip is applicable to UI-Kit applications.

• Steps to reproduce the issue

1. Create a menu that launches a custom harness. Then place a button that refreshes current harness (not section) and run an activity. In the activity, use Page-Set-Messages to add an error message to the page.

2. Now click the button. Against expectations, error message is not shown. Actually, the harness is not even refreshed.

3. This is because Work area checkbox of the harness is not checked (by default, it is not checked). In order for harness to be refreshable, Work area must be checked. Check Work area checkbox as below and save the harness rule.

4. Test again. Now harness is refreshed, and error message is successfully displayed on screen. However, the message appears twice at the top and bottom of the harness. You may feel this is a bit verbose and want to get rid of one (probably the one at the bottom).

* Be noted, if you configure refresh section instead of harness for on click event, this issue won’t happen. This article is only for when the requirement is to refresh harness.

• Root cause

This is an expected behavior. By default, the messages appear in a standard error section at both the top and bottom of user form, as Help indicates below.

• Solution

If you want to change this to display a message only at the top, you have two options.

(1) "Top of harness" approach

1. From Display options in the harness rule, select "Top of harness" for Form-level errors and save the rule.

2. This is actually not enough - error message is now displayed at the top only, but you will find a large extra blank space inserted in between, marked in red below. We need to fix this issue. FYI, this issue is explained at official support article - https://community.pega.com/support/support-articles/error-messages-display-blank-space.

3. Override UserWorkForm HTML rule to your ruleset and embed below snippet.

<style>
  .harnessContent>.error-table
  {display: none ! important;
</style>

4. Now test. The unnecessary blank space is now gone.

(2) "In configurable section" approach

1. From Display options in the harness rule, select "In configurable section" for Form-level errors. Custom error section field will show up, so enter pyCaseErrorSection and save the rule.

2. Include @baseclass.pyCaseErrorSection section into where you want to display the message. The place is arbitrary. In this example, I have added it in the bottom of header section rule as below.

3. Now test. The error message is successfully displayed at the top only.

* The two approaches display error messages slightly differently. You can choose whichever approach you prefer.

Hope this helps.

Thanks,