Uploaded image for project: 'Kuali Rice Development'
  1. Kuali Rice Development
  2. KULRICE-14261

Enable client side validation in dialogs (backport KULRICE-12235)

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Won't Fix
    • Affects Version/s: 2.3.7
    • Fix Version/s: 2.3.8
    • Component/s: Development
    • Security Level: Public (Public: Anyone can view)
    • Labels:
    • Application Requirement:
      OLE
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required
    • Code Review Status:
      Not Required
    • Include in Release Notes?:
      Yes

      Description

      OLE needs client side validations that are supported in 2.5 but not in 2.3. It should be easy to backport this feature.

      Since nobody should be using Rice 2.4 as it isn't supported anymore and hasn't received any updates no other versions of Rice are affected.

        Attachments

          Issue Links

            Activity

            Hide
            shahess Shannon Hess added a comment -

            I wanted to post an update since I thought this would be a quick issue but it's turning out to be more complex. All of the changes made for KULRICE-12235 were brought into rice-2.5 on April 23rd, 2014 when changes from the 2.5 performance branch were merged. As part of those changes, the dialog implementation was changed to use Bootstrap modal instead of lightbox. Also along with the changes made in KULRICE-12235 there were many, many other changes that were brought into Rice-2.5 at the same time. Only a couple of the changes made in KULRICE-12235 can be back ported directly into rice-2.3. I've spent the evening attempting to bring and fix the changes so they will work with lightbox but so far I haven't been completely successful.

            I'm assuming we need to stick with using lightbox rather than switch to using Bootstrap modal? I also just wanted to verify that I'm going in the right direction for this issue.

            Thanks,
            Shannon

            Show
            shahess Shannon Hess added a comment - I wanted to post an update since I thought this would be a quick issue but it's turning out to be more complex. All of the changes made for KULRICE-12235 were brought into rice-2.5 on April 23rd, 2014 when changes from the 2.5 performance branch were merged. As part of those changes, the dialog implementation was changed to use Bootstrap modal instead of lightbox. Also along with the changes made in KULRICE-12235 there were many, many other changes that were brought into Rice-2.5 at the same time. Only a couple of the changes made in KULRICE-12235 can be back ported directly into rice-2.3. I've spent the evening attempting to bring and fix the changes so they will work with lightbox but so far I haven't been completely successful. I'm assuming we need to stick with using lightbox rather than switch to using Bootstrap modal? I also just wanted to verify that I'm going in the right direction for this issue. Thanks, Shannon
            Hide
            shahess Shannon Hess added a comment - - edited

            I wanted to test out how things would look in 2.3 using lightbox vs. how they work in 2.6 using bootstrap modal. I also wanted to show how beans on the Ole side would need to change to accommodate the new dialog beans. These two examples were both written in 2.6, one using the old "showLightboxComponent" and the other using "showDialog". The showLightboxComponent does not validate the required fields. I have attached screenprints for each of these examples.

            This example calls showDialog, uses the Uif-DialogGroup parent, and has a separate footer for any action buttons.

              <bean id="Demo-DialogGroup-Example11" parent="Uif-VerticalBoxSection" p:headerText="Validation in Dialog NEW"
                    p:instructionalText="You can also invoke client-side validation on the dialog's fields. Just set the
                    action property [b]performClientSideValidation[/b] to true for the action that should trigger validation.">
                <property name="items">
                  <list>
                    <bean parent="Uif-ActionLink" p:actionLabel="Show Dialog"
                          p:actionScript="showDialog('Demo-DialogGroup-ShowDialog11');"/>
                    <bean id="Demo-DialogGroup-ShowDialog11" parent="Uif-DialogGroup" p:headerText="Price increase analysis"
                          p:promptText="Please enter the following data:">
                      <property name="items">
                        <list>
                          <bean parent="Uif-InputField" p:propertyName="inputField10" p:required="true" p:label="Previous fiscal year cost"/>
                          <bean parent="Uif-InputField" p:propertyName="inputField11" p:required="true" p:label="Current year price quote"/>
                        </list>
                      </property>
                      <property name="footer">
                        <bean parent="Uif-FooterBase">
                          <property name="items">
                            <list>
                              <bean parent="Uif-DialogConfirmButton" p:actionLabel="Continue" p:performClientSideValidation="true"/>
                            </list>
                          </property>
                        </bean>
                      </property>
                    </bean>
                  </list>
                </property>
              </bean>
            

            This example calls showLightboxComponent and does not have a separate footer:

              <bean id="Demo-DialogGroup-Example11a" parent="Uif-VerticalBoxSection" p:headerText="Dialog using Lightbox"
                    p:instructionalText="You can also invoke client-side validation on the dialog's fields. Just set the
                    action property [b]performClientSideValidation[/b] to true for the action that should trigger validation.">
                <property name="items">
                  <list>
                    <bean parent="Uif-ActionLink" p:actionLabel="Show Lightbox"
                          p:actionScript="showLightboxComponent('Demo-DialogGroup-ShowDialog11a');"/>
                    <bean id="Demo-DialogGroup-ShowDialog11a" parent="Uif-VerticalBoxSection">
                      <property name="headerText" value="Price increase analysis"/>
                      <property name="hidden" value="true"/>
                      <property name="items">
                        <list>
                          <bean parent="Uif-InputField" p:propertyName="inputField12" p:required="true" p:label="Previous fiscal year cost"/>
                          <bean parent="Uif-InputField" p:propertyName="inputField13" p:required="true" p:label="Current year price quote"/>
                          <bean parent="Uif-SecondaryActionButton-Small" p:actionLabel="Continue" p:actionScript="closeLightbox();"
                                p:performClientSideValidation="true"/>
                        </list>
                      </property>
                    </bean>
                  </list>
                </property>
              </bean>
            

            I modified the following bean from OLE to created the examples above:

            <bean id="PriceIncreaseAnalysisButton" parent="Uif-PrimaryActionButton"
                                              p:actionScript="showLightboxComponent('OLEEResourceRecordView-PriceIncreaseAnalysis');"
                                              p:actionLabel="Price increase analysis"
                                              p:render="@{!(document.documentHeader.workflowDocument.initiated or document.documentHeader.workflowDocument.final)}"/>
            
                <bean id="OLEEResourceRecordView-PriceIncreaseAnalysis" parent="Uif-VerticalBoxSection"
                      p:style="width:500px;height:80px;">
                    <property name="headerText" value="Price increase analysis"/>
                    <property name="hidden" value="true"/>
                    <property name="items">
                        <list>
                            <bean parent="Uif-InputField" p:propertyName="fiscalYearCost" p:label="Previous fiscal year cost"
                                  p:style="float:center;margin-left:5em"/>
                            <bean parent="Uif-InputField" p:propertyName="yearPriceQuote" p:label="Current year price quote"
                                  p:style="float:center;margin-left:5em"/>
                            <bean parent="Uif-SecondaryActionButton-Small" p:methodToCall="calculateIncrease"
                                  p:actionLabel="Calculate" p:style="float:center;margin-left:5em"
                                  p:refreshId="OLEEResourceRecordView-PriceIncreaseAnalysis-Increase"/>
                            <ref bean="OLEEResourceRecordView-PriceIncreaseAnalysis-Increase"/>
                            <ref bean="OLEEResourceRecordView-PriceIncreaseAnalysis-EmailInfo"/>
                            <ref bean="OLEEResourceRecordView-PriceIncreaseAnalysis-Button"/>
                        </list>
                    </property>
                </bean>
            
            Show
            shahess Shannon Hess added a comment - - edited I wanted to test out how things would look in 2.3 using lightbox vs. how they work in 2.6 using bootstrap modal. I also wanted to show how beans on the Ole side would need to change to accommodate the new dialog beans. These two examples were both written in 2.6, one using the old "showLightboxComponent" and the other using "showDialog". The showLightboxComponent does not validate the required fields. I have attached screenprints for each of these examples. This example calls showDialog, uses the Uif-DialogGroup parent, and has a separate footer for any action buttons. <bean id= "Demo-DialogGroup-Example11" parent= "Uif-VerticalBoxSection" p:headerText= "Validation in Dialog NEW" p:instructionalText="You can also invoke client-side validation on the dialog's fields. Just set the action property [b]performClientSideValidation[/b] to true for the action that should trigger validation."> <property name= "items" > <list> <bean parent= "Uif-ActionLink" p:actionLabel= "Show Dialog" p:actionScript= "showDialog('Demo-DialogGroup-ShowDialog11');" /> <bean id= "Demo-DialogGroup-ShowDialog11" parent= "Uif-DialogGroup" p:headerText= "Price increase analysis" p:promptText= "Please enter the following data:" > <property name= "items" > <list> <bean parent= "Uif-InputField" p:propertyName= "inputField10" p:required= " true " p:label= "Previous fiscal year cost" /> <bean parent= "Uif-InputField" p:propertyName= "inputField11" p:required= " true " p:label= "Current year price quote" /> </list> </property> <property name= "footer" > <bean parent= "Uif-FooterBase" > <property name= "items" > <list> <bean parent= "Uif-DialogConfirmButton" p:actionLabel= "Continue" p:performClientSideValidation= " true " /> </list> </property> </bean> </property> </bean> </list> </property> </bean> This example calls showLightboxComponent and does not have a separate footer: <bean id= "Demo-DialogGroup-Example11a" parent= "Uif-VerticalBoxSection" p:headerText= "Dialog using Lightbox" p:instructionalText="You can also invoke client-side validation on the dialog's fields. Just set the action property [b]performClientSideValidation[/b] to true for the action that should trigger validation."> <property name= "items" > <list> <bean parent= "Uif-ActionLink" p:actionLabel= "Show Lightbox" p:actionScript= "showLightboxComponent('Demo-DialogGroup-ShowDialog11a');" /> <bean id= "Demo-DialogGroup-ShowDialog11a" parent= "Uif-VerticalBoxSection" > <property name= "headerText" value= "Price increase analysis" /> <property name= "hidden" value= " true " /> <property name= "items" > <list> <bean parent= "Uif-InputField" p:propertyName= "inputField12" p:required= " true " p:label= "Previous fiscal year cost" /> <bean parent= "Uif-InputField" p:propertyName= "inputField13" p:required= " true " p:label= "Current year price quote" /> <bean parent= "Uif-SecondaryActionButton-Small" p:actionLabel= "Continue" p:actionScript= "closeLightbox();" p:performClientSideValidation= " true " /> </list> </property> </bean> </list> </property> </bean> I modified the following bean from OLE to created the examples above: <bean id= "PriceIncreaseAnalysisButton" parent= "Uif-PrimaryActionButton" p:actionScript= "showLightboxComponent('OLEEResourceRecordView-PriceIncreaseAnalysis');" p:actionLabel= "Price increase analysis" p:render= "@{!(document.documentHeader.workflowDocument.initiated or document.documentHeader.workflowDocument. final )}" /> <bean id= "OLEEResourceRecordView-PriceIncreaseAnalysis" parent= "Uif-VerticalBoxSection" p:style= "width:500px;height:80px;" > <property name= "headerText" value= "Price increase analysis" /> <property name= "hidden" value= " true " /> <property name= "items" > <list> <bean parent= "Uif-InputField" p:propertyName= "fiscalYearCost" p:label= "Previous fiscal year cost" p:style= " float :center;margin-left:5em" /> <bean parent= "Uif-InputField" p:propertyName= "yearPriceQuote" p:label= "Current year price quote" p:style= " float :center;margin-left:5em" /> <bean parent= "Uif-SecondaryActionButton-Small" p:methodToCall= "calculateIncrease" p:actionLabel= "Calculate" p:style= " float :center;margin-left:5em" p:refreshId= "OLEEResourceRecordView-PriceIncreaseAnalysis-Increase" /> <ref bean= "OLEEResourceRecordView-PriceIncreaseAnalysis-Increase" /> <ref bean= "OLEEResourceRecordView-PriceIncreaseAnalysis-EmailInfo" /> <ref bean= "OLEEResourceRecordView-PriceIncreaseAnalysis-Button" /> </list> </property> </bean>
            Hide
            shahess Shannon Hess added a comment -

            Added Peri as a watcher

            Show
            shahess Shannon Hess added a comment - Added Peri as a watcher
            Hide
            shahess Shannon Hess added a comment - - edited

            Other items that changed (List not complete):

            • addViaLightBox --> addWithDialog
            • showLightboxComponent --> showDialog
            • Uif-OK-Cancel-DialogGroup --> Uif-DialogGroup-OkCancel

            Jiras and change logs that refer to these changes:

            Show
            shahess Shannon Hess added a comment - - edited Other items that changed (List not complete): addViaLightBox --> addWithDialog showLightboxComponent --> showDialog Uif-OK-Cancel-DialogGroup --> Uif-DialogGroup-OkCancel Jiras and change logs that refer to these changes: https://jira.kuali.org/browse/KULRICE-10443 - Ability to use Dialog's for Confirmation Boxes https://fisheye.kuali.org/changelog/rice?cs=45558 - KULRICE-10443 - Reworked dialogs to use bootstrap modal https://fisheye.kuali.org/changelog/rice?cs=45570 - KULRICE-10443 - Add dialog response as a property for Action component https://jira.kuali.org/browse/KULRICE-12643 - Select box in dialog not posted to server https://jira.kuali.org/browse/KULRICE-12928 - Migrate lookups and inquiries to modal dialogs
            Hide
            shahess Shannon Hess added a comment -

            Attaching what the "Demo-DialogGroupExample11" and "Demo-DialogGroupExample11a" look like.

            Show
            shahess Shannon Hess added a comment - Attaching what the "Demo-DialogGroupExample11" and "Demo-DialogGroupExample11a" look like.
            Hide
            shahess Shannon Hess added a comment -

            Due to the fact that these changes were brought along with many other changes as part of a performance improvement, it was decided that bringing in these changes would be too complicated and cause additional work for OLE as well.

            Show
            shahess Shannon Hess added a comment - Due to the fact that these changes were brought along with many other changes as part of a performance improvement, it was decided that bringing in these changes would be too complicated and cause additional work for OLE as well.

              People

              • Assignee:
                shahess Shannon Hess
                Reporter:
                cniesen Claus Niesen
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: