Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 2.2
    • Fix Version/s: 2.5
    • Component/s: Development
    • Security Level: Public (Public: Anyone can view)
    • Labels:
      None
    • 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

        Attachments

          Issue Links

            Activity

            Hide
            cniesen Claus Niesen added a comment - - edited

            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.

            Show
            cniesen Claus Niesen added a comment - - edited 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 .
            Hide
            gathreya Gayathri Athreya added a comment -

            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.

            Show
            gathreya Gayathri Athreya added a comment - 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.
            Hide
            matthew.wuertz Matthew Wuertz (Inactive) added a comment -

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

            Show
            matthew.wuertz Matthew Wuertz (Inactive) added a comment - The only work that isn't complete is the help button suffix. Can you post the exception that you ran into?
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            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

            Show
            jkneal Jerry Neal (Inactive) added a comment - 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
            Hide
            gathreya Gayathri Athreya added a comment -

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

            Show
            gathreya Gayathri Athreya added a comment - Yes, that is where I get a null pointer. I have added it locally and am testing right now.
            Hide
            gathreya Gayathri Athreya added a comment -

            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);
                    }
            
            Show
            gathreya Gayathri Athreya added a comment - 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); }
            Hide
            cniesen Claus Niesen added a comment -

            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.

            Show
            cniesen Claus Niesen added a comment - 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.

              People

              • Assignee:
                cwade Christopher Wade (Inactive)
                Reporter:
                jkneal Jerry Neal (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: