1. Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives  We’ll cover Progressive Disclosures and Conditional Refreshes  What are they and how can they be used  Hands-on: Adding a progressive disclosure to the form  Configuration options

2. 2 Lab 4: Progressive Disclosure Progressive Disclosures - What are they? Progressive Disclosures - What are they? Allows fields and groups to be shown or hidden based on some condition (i.e. a different field’s value)

3. 3 Lab 4: Progressive Disclosure Progressive Disclosures - How can they be used? Progressive Disclosures - How can they be used?  Displaying fields and groups only when they are needed  Delay sending of data until it’s needed

4. 4 Lab 4: Progressive Disclosure Progressive Disclosures - How to use them? Progressive Disclosures - How to use them? <bean parent="GenericTextField" p:label="Describe your Diet:" p:progressiveRender="field34 eq 'yes'" p:propertyName="field35" />

5. 5 Lab 4: Progressive Disclosure Component Refreshes - What are they? Component Refreshes - What are they? Allows component to be updated when the form changes

6. 6 Lab 4: Progressive Disclosure Component Refreshes - How can they be used? Component Refreshes - How can they be used?  Change the disabled or read-only state of a component  Change the options for a control  Refresh content for a control when another control changes use simpler refreshWhenChanged

7. 7 Lab 4: Progressive Disclosure Component Refreshes - How to use them? Component Refreshes - How to use them? <bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item" p:optionsFinderClass=“…FoodKeyValuesFinder“ p:conditionalRefresh="field88 eq 'Fruits' or field88 eq 'Vegetables' ">

8. 8 Lab 4: Progressive Disclosure Component Refreshes - How to use them? Component Refreshes - How to use them? <bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item" p:optionsFinderClass=“…FoodKeyValuesFinder“ p:refreshWhenChanged="field88">

9. 9 Lab 4: Progressive Disclosure Instructions Instructions 1)Open up the view definition file TrainingApplicationView-Lab4.xml 2)Locate the bean with the label=“Campus” 3)Add a progressiveRender property so that this field is only rendered when the college is Art or Computer Science

10. 10 Lab 4: Progressive Disclosure Instructions Instructions 1)Open up the view definition file TrainingApplicationView-Lab4.xml 2)Locate the bean with the label=“Campus” 3)Add a progressiveRender property so that this field is only rendered when the college is Art or Computer Science 4)Hint: p:progressiveRender="college eq 'art' or college eq 'csc'"

11. Solution:

12. 12 Lab 4: Progressive Disclosure Solution Solution Your code should look approximately like this: <bean parent="Uif-InputField-LabelTop" p:label="Campus" p:propertyName="campus" p:progressiveRender="college eq 'art' or college eq 'csc'">

13. Advance Features:

14. 14 Lab 4: Progressive Disclosure progressiveRender progressiveRender default (no other flags set) Content is send and rendered as hidden on page load progressiveRenderViaAJAX=“true” Data is retrieved when component is rendered for the first time, then kept for future hide/show operations progressiveRenderAndRefresh=“true” Data is retrieved each time the component is rendered