[KULRICE-8195] add suffix to id from groups id Created: 13/Sep/12  Updated: 24/Sep/14  Resolved: 05/Aug/14

Status: Closed
Project: Kuali Rice Development
Component/s: Development
Affects Version/s: 2.2
Fix Version/s: 2.5
Security Level: Public (Public: Anyone can view)

Type: Improvement Priority: Major
Reporter: Jerry Neal (Inactive) Assignee: Christopher Wade (Inactive)
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Relate
relates to KULRICE-8444 Cleanup id suffixes In Progress
is related to KULRICE-8444 Cleanup id suffixes In Progress
Rice Module:
KRAD
KRAD Feature Area:
UIF Component
Application Requirement:
Rice
Sprint: Core 2.5.0-m5 Sprint 2b, Core 2.5.0-m6 Sprint 1
KAI Review Status: Not Required
KTI Review Status: Not Required
Story Points: 2

 Description   

For parts of a group (header and header groups, help, validation messages, instructional text, constraint message) add suffix to id from groups id



 Comments   
Comment by Claus Niesen [ 01/Jul/14 ]

ToDo (what still needs to be done):

  • the id suffix support for help
  • updating the impacting changes page for all id suffix changes

See InputFieldBase.setupIds(). There the ids for the control, label, instructional text, etc of the input field are set to the input id + suffix.

Same should be done in GroupBase.performFinalize.

Validation messages already are based on the parent id with the _message prefix

Header & Instructional Text Example:
Currently KRAD Libary -> Containers -> Group -> Section Vertical generates the following HTML (view source / relevant source not shown on page):

<section id="Demo-Group-Example1" class="uif-boxSection" data-parent="ComponentLibrary-TabGroup">
  <header id="u1nx8ahf" class="uif-sectionHeader" data-header_for="Demo-Group-Example1">
    <h3 id="u1nx8ahf_header" class="uif-headerText">
      <span class="uif-headerText-span">
      Basic Grid
      </span>
    </h3>
  </header>
  <p id="u17j37g1" class="uif-instructionalMessage">
    Groups can be used to layout fields, elements, and other groups on the screen. This is a GridGroup (backed by GridLayoutManager). 
  </p>
  <div id="u1nya80k" class="uif-gridGroup uif-boxLayoutVerticalItem clearfix" data-parent="Demo-Group-Example1">
    ...
  </div>
</section>

Where "Demo-Group-Example1" is the id of the group. The header id should be "Demo-Group-Example1_headerWrapper" instead "u1nx8ahf".

The id of the instructional message should be "Demo-Group-Example1_instruction" instead of "u1nya80k".

<section id="Demo-Group-Example1" class="uif-boxSection" data-parent="ComponentLibrary-TabGroup">
  <header id="Demo-Group-Example1_headerWrapper" class="uif-sectionHeader" data-header_for="Demo-Group-Example1">
    <h3 id="Demo-Group-Example1_header" class="uif-headerText">
      <span class="uif-headerText-span">
      Basic Grid
      </span>
    </h3>
  </header>
  <p id="Demo-Group-Example1_instruction" class="uif-instructionalMessage">
    Groups can be used to layout fields, elements, and other groups on the screen. This is a GridGroup (backed by GridLayoutManager). 
  </p>
  <div id="u1nya80k" class="uif-gridGroup uif-boxLayoutVerticalItem clearfix" data-parent="Demo-Group-Example1">
    ...
  </div>
</section>

Header Groups & Help Example:
Currently "KRAD Labs -> Lookups -> Lookup Sample with Headings" generates the following HTML:

<div id="LabsLookup-HeadingsView" class="clearfix uif-formView uif-lookupView" data-enter_key="@DEFAULT" data-role="View">
  <!-- VIEW HEADER -->
  <header id="ueqbqhn" class="container-fluid uif-viewHeader-contentWrapper uif-viewHeader" data-header_for="LabsLookup-HeadingsView">
    <div class="uif-header-inner">
      <h1 id="ueqbqhn_header" class="uif-headerText">
        <span class="uif-headerText-span">
        Lookup Sample with Headings
        </span>
        <button id="u1asbpcm" class="uif-iconOnly uif-helpAction icon-question" title="Help for Lookup Sample with Headings" data-onclick="openHelpWindow('http://site.kuali.org/rice/2.5.0-M4-SNAPSHOT/reference/html/Help.html#lookup');" data-role="Action">
        </button>
      </h1>
      <div id="u1uclis3" class="uif-horizontalBoxGroup uif-header-rightGroup" data-parent="LabsLookup-HeadingsView">
        <p id="u130yfrn" class="uif-message uif-boxLayoutVerticalItem clearfix">
          Right Group of headerText
        </p>
        <button id="u1pjs0w3" class="btn btn-default uif-action uif-boxLayoutVerticalItem pull-left clearfix" data-onclick="alert('JavaScript triggered action.');" data-role="Action">
        Custom Button
        </button>
      </div>
    </div>
    <div id="u12k6gem" class="uif-horizontalBoxGroup uif-header-lowerGroup clearfix" data-parent="LabsLookup-HeadingsView">
      <p id="u2an0jc" class="uif-message uif-boxLayoutHorizontalItem">
        Lower Group of headerText
      </p>
    </div>
  </header>
  ...
</div>

Where "LabsLookup-HeadingsView" is the view/group id. The button id of the help should be "LabsLookup-HeadingsView_helpWrapper" instead of "u1asbpcm".

The rightGroup should be "LabsLookup-HeadingsView_headerRightGroup" instead of "u1uclis3" and the lowerGroup should be "LabsLookup-HeadingsView_headerLowerGroup" instead of "u12k6gem". Note that there is also an upperGroup whose id needs to be changed in the same manner but isn't exercised on this page.

<div id="LabsLookup-HeadingsView" class="clearfix uif-formView uif-lookupView" data-enter_key="@DEFAULT" data-role="View">
  <!-- VIEW HEADER -->
  <header id="LabsLookup-HeadingsView_headerWrapper" class="container-fluid uif-viewHeader-contentWrapper uif-viewHeader" data-header_for="LabsLookup-HeadingsView">
    <div class="uif-header-inner">
      <h1 id="LabsLookup-HeadingsView_header" class="uif-headerText">
        <span class="uif-headerText-span">
        Lookup Sample with Headings
        </span>
        <button id="LabsLookup-HeadingsView_help" class="uif-iconOnly uif-helpAction icon-question" title="Help for Lookup Sample with Headings" data-onclick="openHelpWindow('http://site.kuali.org/rice/2.5.0-M4-SNAPSHOT/reference/html/Help.html#lookup');" data-role="Action">
        </button>
      </h1>
      <div id="LabsLookup-HeadingsView_headerRightGroup" class="uif-horizontalBoxGroup uif-header-rightGroup" data-parent="LabsLookup-HeadingsView">
        <p id="u130yfrn" class="uif-message uif-boxLayoutVerticalItem clearfix">
          Right Group of headerText
        </p>
        <button id="u1pjs0w3" class="btn btn-default uif-action uif-boxLayoutVerticalItem pull-left clearfix" data-onclick="alert('JavaScript triggered action.');" data-role="Action">
        Custom Button
        </button>
      </div>
    </div>
    <div id="LabsLookup-HeadingsView_headerLowerGroup" class="uif-horizontalBoxGroup uif-header-lowerGroup clearfix" data-parent="LabsLookup-HeadingsView">
      <p id="u2an0jc" class="uif-message uif-boxLayoutHorizontalItem">
        Lower Group of headerText
      </p>
    </div>
  </header>
  ...
</div>

Note that the help button id needs also use the associated component id with _help suffix. This doesn't happen currently when the help is associated to a field. See KRAD Library-> Widget -> Help -> External Help for samples. If it's no big deal add this functionality under this Jira, otherwise create a new Jira.

Make sure to add the id changes on the impacting changes page.

Comment by Gayathri Athreya [ 29/Jul/14 ]

Is the work for this complete? I tried to get the latest rice into KC but ran into null pointers that may be associated with these changes.

Comment by Matthew Wuertz (Inactive) [ 29/Jul/14 ]

The only work that isn't complete is the help button suffix. Can you post the exception that you ran into?

Comment by Jerry Neal (Inactive) [ 01/Aug/14 ]

Matt,

KC is getting a null pointer exception on this code:

setNestedComponentId(getInstructionalMessage(), this.getId() + UifConstants.IdSuffixes.INSTRUCTIONAL);
setNestedComponentId(getHeader(), this.getId() + UifConstants.IdSuffixes.HEADER_WRAPPER);
setNestedComponentId(getHeader().getUpperGroup(), this.getId() + UifConstants.IdSuffixes.HEADER_UPPER_GROUP);
setNestedComponentId(getHeader().getRightGroup(), this.getId() + UifConstants.IdSuffixes.HEADER_RIGHT_GROUP);
setNestedComponentId(getHeader().getLowerGroup(), this.getId() + UifConstants.IdSuffixes.HEADER_LOWER_GROUP);

The getHeader() is likely null. We need to wrap these lines in a not null check.

Jerry

Comment by Gayathri Athreya [ 01/Aug/14 ]

Yes, that is where I get a null pointer. I have added it locally and am testing right now.

Comment by Gayathri Athreya [ 01/Aug/14 ]

Jerry Neal did anyone commit the fix for this? I am not seeing it in the latest. Do you just want me to commit?

I just made this change

  if (getHeader() != null) {
            setNestedComponentId(getHeader(), this.getId() + UifConstants.IdSuffixes.HEADER_WRAPPER);
            setNestedComponentId(getHeader().getUpperGroup(), this.getId() + UifConstants.IdSuffixes.HEADER_UPPER_GROUP);
            setNestedComponentId(getHeader().getRightGroup(), this.getId() + UifConstants.IdSuffixes.HEADER_RIGHT_GROUP);
            setNestedComponentId(getHeader().getLowerGroup(), this.getId() + UifConstants.IdSuffixes.HEADER_LOWER_GROUP);
        }
Comment by Claus Niesen [ 04/Aug/14 ]

Gayathri committed the null check. The help button suffix needs to be implemented and the impacting changes page needs to be updated with all suffix changes of this jira.

Generated at Sun Jun 20 17:12:38 CDT 2021 using JIRA 7.0.11#70121-sha1:19d24976997c1d95f06f3e327e087be0b71f28d4.