Table of Contents

Article

Radio buttons and check boxes in repeating grids misbehave

Symptom

Example 1. Pega Survey interaction returns focus back to the first question and changes its answer

Example 2. The first radio button or check box gets the interaction focus instead of the control selected

Example3. Refresh This Section not triggered when radio button label is clicked

Example 4. Radio buttons and check boxes in repeating grid layout onClick Refresh This Section have incorrect DOM IDs

Explanation

Solutions

Requesting a hotfix

Symptom

Application users experience unexpected behavior with radio buttons and check boxes inside of repeating grid layouts.

Application developers have no way to specify unique IDs for user interface controls.

The following subsections describe some example scenarios in which the problem was reported. Each example illustrates the overarching Explanation and Solutions. Additional scenarios are described in the Support Articles cited in the Solutions table.

Example 1. Pega Survey interaction returns focus back to the first question and changes its answer

Application users working with Pega Survey 7.1 ML2 on Pega 7.1.5 report that surveys designed with simple questions to be answered by their interactions on a succession of radio buttons always shift user focus back to the first question of the survey and change the original value of the answer. For example, the radio buttons for Questions 1, 2, and 4 of the survey are labeled for Answer values Yes/No or True/False. A survey respondent answers Question 1 as Yes, Question 2 as No, and Question 4 as No. The user interaction focus goes back to Question 1 and changes the Answer value to No. This problem occurs for survey questions having the same type of Answer values.

Resolution

Pega 7.1.5 SA-9451, Abnormal behavior of radio buttons, Grid Repeat (PegaSurvey)

Example 2. The first radio button or check box gets the interaction focus instead of the control selected

Application users of Pega 7.1.5 report that when there are multiple radio buttons or check boxes in the same section of the application with the same labels, clicking any label fires the click event of the first radio button or check box instead of the intended one. Application developers see this problem when they are developing the applications in the Designer Studio.

Steps to Reproduce

  1. Create a simple text property, specifying pxRadioButton as the UI control.
  2. Create a Local List with two or more values for the radio button options.
  3. Create a section that includes the set of radio buttons defined in Steps 1 and 2 as the options.
  4. Create another section with a repeating grid and include the radio button section in one of the columns.

If you run the section with multiple rows returned and select the radio button labels for the second or third row, the first row is selected.

Root Cause

When a section with radio buttons is included in a repeating grid layout, the radio buttons in the inner section always generate the same ID for the "for" attribute when there are multiple rows in the grid. The IDs should be unique for each row of the repeating grid, but they are not unique.

Resolution

Apply HFix-9427 for Pega 7.1.5. Restart the application server for the fix to take effect.

The hotfix corrects the Rule-Utility-File (RUF) pzGenerateRadioGroup by adding a condition check before generating the HTML for the radio buttons. If the radio buttons are inside a grid layout, then a unique ID is generated for the radio button and the "for" attribute based on the current row index of the grid.

Example 3. Refresh This Section not triggered when radio button label is clicked

Application developers using Pega 7.1.5 report that sections containing radio buttons specified with onClick or onChange Refresh This Section behavior do not work as expected when the radio buttons are inside of a repeating grid. When they run the flow and click a radio button label, the Refresh This Section is not triggered. It triggers if the radio button is clicked, but not when radio button label is clicked.

Steps to Reproduce

  1. Create a simple text property using pxRadioButton as the UI Control.
  2. Create a Local List with two or more values for radio button options.
  3. Create a section and add the set of radio buttons from Step 2 as options.
  4. Specify onClick or onChange Refresh This Section behavior for the radio buttons.
  5. Create another section with a repeating grid and include the section with the radio buttons in one of the columns.
  6. Run the flow.
  7. Add multiple rows.
  8. Click any radio button and see that the section is refreshed.
  9. Click any radio button label and see that the section is not refreshed.

Root Cause

The data-click attribute is not generated for the label associated with the radio button.

Resolution

  1. Generate the data-click attribute for the label in the Rule-Utility-File pzGenerateRadioGroup.
  2. Add the undefined check for tabElem.radValue in pzpega_control_radiogroup.js.

Example 4. Radio buttons and check boxes in repeating grid layout onClick Refresh This Section have incorrect DOM IDs

Radio buttons (and check boxes) in a repeating grid layout are meant to have incremental IDs to support distinct actions for each row of the repeating grid. However, when these UI controls are designed with onClick Refresh This Section, the UI control’s ID does not recognize that the control is inside of a repeating grid layout. The ID of the DOM that is given after the section is refreshed is no longer distinct. This affects how the CSS styles are applied. The application’s screen design uses CSS3 hover and focus styles. However, with the onClick Refresh This Section action of the UI control, the CSS styling is applied to the first element only. In repeating grid layout, the UI control of the field is not distinctly incremental because the UI control has no unique ID but, rather, refers to the Property name.

Resolutions

Pega 7.1.6 SA-40557, https://pdn.pega.com/support-articles/button-repeat-layout-refresh-section-has-incorrect-dom-id

Pega 7.1.7 SA-11855, https://pdn.pega.com/support-articles/button-repeat-layout-refresh-section-has-incorrect-dom-id-1

Pega 7.1.7 SA-12889, https://pdn.pega.com/support-articles/toggling-styles-elements-first-row-only

Pega 7.1.8 SA-11095, https://pdn.pega.com/support-articles/button-repeat-layout-refresh-section-has-incorrect-dom-id-0

Explanation

Currently Pega does not generate unique IDs for user interface elements. For example, when radio buttons and check boxes are placed inside of repeating grid layouts, the browser interprets them to all be part of the same group. Application developers have no way to specify unique IDs on each UI control in their applications. For a UI control in a repeating grid, the unique ID of the UI control would work within an enumerating system for the cells in a repeating grid to add an incremental integer as a suffix, for example, Button-1, Button-2, Button-3, and so on.

Solutions

Correction of this limitation is planned for a future Pega platform release.

In the meantime, apply the hotfix that is available for the Pega platform release that you are using. If no hotfix is available, request a new hotfix.

The following table lists hotfixes for Pega releases in which the unexpected behavior of radio buttons or check boxes in repeating grids was reported.

Pega Platform Version

Application Version

Hotfix Number

Solution

Pega 7.1.5 with

Pega Survey 7.1 ML2

HFix-21897

HFix-22017

SA-9451, https://pdn.pega.com/support-articles/abnormal-behaviour-radio-buttons

Pega 7.1.5

HFix-9427

No Support Article
See Example 2. The first radio button or check box gets the interaction focus instead of the control selected

Pega 7.1.5

HFix-9430 followed by HFix-9427

No Support Article
See Example 3. Refresh section not triggered when radio button label is clicked

Pega 7.1.6

HFix-10387

SA-4057,
https://pdn.pega.com/support-articles/button-repeat-layout-refresh-section-has-incorrect-dom-id

Pega 7.1.7

HFix-21289

SA-11855, https://pdn.pega.com/support-articles/button-repeat-layout-refresh-section-has-incorrect-dom-id-1

SA-12889, https://pdn.pega.com/support-articles/toggling-styles-elements-first-row-only

Pega 7.1.8

HFix-22475

SA-11095,
https://pdn.pega.com/support-articles/button-repeat-layout-refresh-section-has-incorrect-dom-id-0

Pega 7.1.9

HFix-25636

SA-18663, https://pdn.pega.com/support-articles/wrong-instance-radio-button-selected-repeat-grid-0

Pega 7.2

Request a hotfix

Support Article will be generated from the resolved SR and linked here.

Pega 7.2.1

Request a hotfix

Support Article will be generated from the resolved SR and linked here.

Pega 7.2.2

Request a hotfix

Support Article will be generated from the resolved SR and linked here.

Pega 7.3

HFix-37606

SA-45063, https://pdn.pega.com/support-articles/radio-button-disabled-dynamic-layout-nested-inline-layout

Pega 7.3.1

HFix-39746

SA-47968, https://pdn.pega.com/support-articles/radio-buttons-disabled-dynamic-layout

Pega 7.4

HFix-43976

SA-58045, https://pdn.pega.com/support-articles/abnormal-behavior-radio-buttons-and-check-boxes-repeat-grid

Hotfix solutions by product and version

Requesting a hotfix

To obtain the hotfix that meets the needs of your issue in your Pega environment, create a Support Request (SR):

  1. Go to My Support Portal, https://pdn.pega.com/support/my-support-portal.
  2. In the Support Requests default view, click +Create to create a new Support Request.
  3. In the Request Type field, select one of the following choices:
    • If you are requesting a new hotfix, select Product Defect.
    • If you are requesting an existing hotfix, select Existing Hotfix.
  4. In your SR Description, describe the problem you are experiencing.
    If applicable, refer to the Support Article or PDN Article by URL if the hotfix you are requesting is one identified in an article or a new hotfix that might be related to the article.
  5. Complete all the other fields of the SR form as required.
  6. When you receive the hotfix, open the Readme file that is included in the hotfix to see the installation instructions. The instructions might include pre- or post-installation steps.

Published May 17, 2018 — Updated May 22, 2018


100% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.