Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive...
-
Upload
basil-boyd -
Category
Documents
-
view
215 -
download
0
Transcript of Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive...
![Page 1: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/1.jpg)
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
![Page 2: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/2.jpg)
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)
![Page 3: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/3.jpg)
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
![Page 4: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/4.jpg)
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" />
![Page 5: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/5.jpg)
5
Lab 4: Progressive Disclosure
Component Refreshes - What are they?
Allows component to be updated when the form changes
![Page 6: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/6.jpg)
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
![Page 7: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/7.jpg)
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>
![Page 8: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/8.jpg)
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>
![Page 9: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/9.jpg)
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
![Page 10: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/10.jpg)
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'"
![Page 11: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/11.jpg)
Solution:
![Page 12: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/12.jpg)
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">
![Page 13: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/13.jpg)
Advance Features:
![Page 14: Making things appear and disappear like a magician Kuali University: Apply Now Lab 4: Progressive Disclosure Lab Objectives We’ll cover Progressive Disclosures.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e7e5503460f94b81980/html5/thumbnails/14.jpg)
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