Embed Size (px)
Citation preview
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
Progressive Disclosures - How to use them?
<bean parent="Uif-InputField" p:label="Are you on a diet " p:propertyName="field34"> <property name="control"> <bean parent="Uif-HorizontalRadioControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="yes " p:value="Yes" /> <bean parent="Uif-KeyLabelPair" p:key="no " p:value="No" /> </list> </property> </bean> </property></bean>
<bean parent="GenericTextField" p:label="Describe your Diet:"p:progressiveRender="field34 eq 'yes'" p:propertyName="field35" />
5
Lab 4: Progressive Disclosure
Component Refreshes - What are they?
Allows component to be updated when the form changes
6
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
Component Refreshes - How to use them?<bean parent="GenericTextField" p:propertyName="field88" p:label="Food Type">
<property name="control"> <bean parent="Uif-DropdownControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="Fruits" p:value="Fruits"/> <bean parent="Uif-KeyLabelPair" p:key="Vegetables" p:value="Vegetables"/> </list> </property> </bean> </property></bean>
<bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item"p:optionsFinderClass=“…FoodKeyValuesFinder“p:conditionalRefresh="field88 eq 'Fruits' or field88 eq 'Vegetables' "> <property name="control"> <bean parent="Uif-DropdownControl"/> </property></bean>
8
Lab 4: Progressive Disclosure
Component Refreshes - How to use them?<bean parent="GenericTextField" p:propertyName="field88" p:label="Food Type">
<property name="control"> <bean parent="Uif-DropdownControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="Fruits" p:value="Fruits"/> <bean parent="Uif-KeyLabelPair" p:key="Vegetables" p:value="Vegetables"/> </list> </property> </bean> </property></bean>
<bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item"p:optionsFinderClass=“…FoodKeyValuesFinder“ p:refreshWhenChanged="field88"> <property name="control"> <bean parent="Uif-DropdownControl"/> </property></bean>
9
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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'"
Solution:
12
Lab 4: Progressive Disclosure
Solution
Your code should look approximately like this: <bean parent="Uif-InputField-LabelTop" p:label="College" p:propertyName="college" p:required="true"> <property name="control"> <bean parent="Uif-DropdownControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="" p:value=""/> <bean parent="Uif-KeyLabelPair" p:key="art" p:value="Art"/> <bean parent="Uif-KeyLabelPair" p:key="bus" p:value="Business"/> <bean parent="Uif-KeyLabelPair" p:key="csc" p:value="Computer Science"/> <bean parent="Uif-KeyLabelPair" p:key="hist" p:value="History"/> <bean parent="Uif-KeyLabelPair" p:key="math" p:value="Math"/> </list> </property> </bean> </property> </bean>
<bean parent="Uif-InputField-LabelTop" p:label="Campus" p:propertyName="campus" p:progressiveRender="college eq 'art' or college eq 'csc'"> <property name="control">
Advance Features:
14
Lab 4: Progressive Disclosure
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
