[Portfolio] Grouped Elements and Custom Creation Renderer
Christian Aziz
caziz at oit.rutgers.edu
Thu Jul 15 10:14:39 PDT 2010
Thanks for the samples Erica! We're going to try this out. I'm assuming the JS code is not placed in the XSD. Could you share your custom XSL if possible?
Christian V. Aziz - Senior Instructional Designer
Office of Instructional and Research Technology
Rutgers, The State University of New Jersey
101K Administrative Services Building Annex 1
56 Bevier Road, Piscataway, NJ 08854
Tel: 732-445- 8732 | Fax: 732-445-5539
From: "Erica Ackerman" <ericaack at umich.edu>
To: "Erica Ackerman" <ericaack at umich.edu>, "Christian Aziz" <caziz at rutgers.edu>, "Portfolio List" <portfolio at collab.sakaiproject.org>
Sent: Thursday, July 15, 2010 11:20:33 AM
Subject: RE: [Portfolio] Grouped Elements and Custom Creation Renderer
Christian,
Here is a screenshot of the relevant portion of our form. The code I sent is a little complicated, because the user can choose one of several different experience types, and different prompts appear, depending on what type of experience is chosen:
From: portfolio-bounces at collab.sakaiproject.org [mailto:portfolio-bounces at collab.sakaiproject.org] On Behalf Of Ackerman, Erica
Sent: Thursday, July 15, 2010 10:45 AM
To: Christian Aziz; Portfolio List
Subject: Re: [Portfolio] Grouped Elements and Custom Creation Renderer
Christian,
We had a similar issue and didn’t want to use subforms, so we use Javascript in one of our forms to get that effect. The technique as we use it wouldn’t allow your users to add an unlimited number of new field sets. We decided that no one would want to add more than 5 our field sets, so we included all five in the XSD, then used Javascript to hide all but the first set. Then there is a button that displays the next set in sequence each time it is clicked. I’ll show the relevant XSD and the Javascript below. The XSD has entries like this:
<xs:element name = "fieldExpList_1" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Select a type of experience to reflect on. </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "xs:string" >
<xs:enumeration value = "" >
<xs:annotation>
<xs:documentation> Select a type of experience </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "internship" >
<xs:annotation>
<xs:documentation> Internship </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "workExp" >
<xs:annotation>
<xs:documentation> Work Experience </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "extraCurr" >
<xs:annotation>
<xs:documentation> Extra-Curricular Involvement (Committees, etc.) </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "events" >
<xs:annotation>
<xs:documentation> Events (Conferences, Trainings, Workshops, Speakers) </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "priorSkills" >
<xs:annotation>
<xs:documentation> Skills Gained Prior to Entering HBHE </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "other" >
<xs:annotation>
<xs:documentation> Other </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
</xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name = "fieldExpTitle_1" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Name of Organization/Title of Internship position </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "xs:string" >
<xs:maxLength value = "99" />
</xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name = "fieldExpReflect_1" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Describe the influence this experience had on you. </xs:documentation>
<xs:documentation source = "ospi.isRichText" > true </xs:documentation>
<xs:documentation source = "sakai.clonable" > </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "ospi:richText" > </xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name = "fieldExpList_2" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Select a type of experience to reflect on. </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "xs:string" >
<xs:enumeration value = "" >
<xs:annotation>
<xs:documentation> Select a type of experience </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "internship" >
<xs:annotation>
<xs:documentation> Internship </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "workExp" >
<xs:annotation>
<xs:documentation> Work Experience </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "extraCurr" >
<xs:annotation>
<xs:documentation> Extra-Curricular Involvement (Committees, etc.) </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "events" >
<xs:annotation>
<xs:documentation> Events (Conferences, Trainings, Workshops, Speakers) </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "priorSkills" >
<xs:annotation>
<xs:documentation> Skills Gained Prior to Entering HBHE </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "other" >
<xs:annotation>
<xs:documentation> Other </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
</xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name = "fieldExpTitle_2" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Name of Organization/Title of Internship position </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "xs:string" >
<xs:maxLength value = "99" />
</xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name = "fieldExpReflect_2" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Describe the influence this experience had on you. </xs:documentation>
<xs:documentation source = "ospi.isRichText" > true </xs:documentation>
<xs:documentation source = "sakai.clonable" > </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "ospi:richText" > </xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name = "fieldExpList_3" minOccurs = "0" maxOccurs = "1" >
<xs:annotation>
<xs:documentation source = "ospi.label" > Select a type of experience to reflect on. </xs:documentation>
</xs:annotation>
<xs:simpleType>
<xs:restriction base = "xs:string" >
<xs:enumeration value = "" >
<xs:annotation>
<xs:documentation> Select a type of experience </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "internship" >
<xs:annotation>
<xs:documentation> Internship </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "workExp" >
<xs:annotation>
<xs:documentation> Work Experience </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "extraCurr" >
<xs:annotation>
<xs:documentation> Extra-Curricular Involvement (Committees, etc.) </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "events" >
<xs:annotation>
<xs:documentation> Events (Conferences, Trainings, Workshops, Speakers) </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "priorSkills" >
<xs:annotation>
<xs:documentation> Skills Gained Prior to Entering HBHE </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
<xs:enumeration value = "other" >
<xs:annotation>
<xs:documentation> Other </xs:documentation>
<xs:documentation source = "sakai.prompt" > Note: prompt comes from experienceTypePrompts.xml </xs:documentation>
</xs:annotation>
</xs:enumeration>
</xs:restriction>
</xs:simpleType>
</xs:element>
The Javascript/jQuery looks like this:
$ ( document ). ready ( function () {
$ ( "#fieldExpList_1-node" ). before ( "<h3>Additional Experiences</h3>" );
$ ( "#comments-div" ). before ( "<div id='addReflect'><input style='margin-left: 15px;' type='button' value='Add Another Experience' id='addReflectButton'/></div>" );
//The comments text field might or might not have a -1 at the end of its name
if ( $ ( "label[for='comments']" ). length != 0 ) {
$ ( "label[for='comments']" ). wrap ( "<h3 style='margin-left: -15px;'></h3>" );
$ ( "label[for='comments']" ). removeClass ( "block" );
} else {
$ ( "label[for='comments-1']" ). wrap ( "<h3 style='margin-left: -15px;'></h3>" );
$ ( "label[for='comments-1']" ). removeClass ( "block" );
}
//Hide all field experience-related fields
for ( i = 2 ; i <= 5 ; i ++) {
$ ( "#fieldExpReflect_" + i + "-div" ). addClass ( "likert-inactive" );
$ ( "#fieldExpTitle_" + i + "-node" ). addClass ( "likert-inactive" );
$ ( "#fieldExpList_" + i + "-node" ). addClass ( "likert-inactive" );
//if ($("#fieldExpReflect_" + i +"-div").is(":hidden")) {alert("fieldExpReflect_" + i + " is hidden");}
//setMainFrameHeight(formPanelId);
}
for ( i = 1 ; i <= 5 ; i ++) {
var option = $ ( "#fieldExpList_" + i + " option:selected" ). val ();
if ( option == "" ) {
option = "other" ;
}
$ ( "label[for=fieldExpReflect_" + i + "]" ). text ( promptList [ option ]. prompt );
//$("#fieldExpList_" + i + "-prompt").text(promptList[option].prompt);
if ( $ ( "label[for='fieldExpTitle_" + i + "']" ). length != 0 ) {
//alert("there was a label for fieldExpTitle_" + i);
$ ( "label[for='fieldExpTitle_" + i + "']" ). text ( promptList [ option ]. title );
} else {
$ ( "label[for='fieldExpTitle_" + i + "-1']" ). text ( promptList [ option ]. title );
}
}
//For each of the 5 field experience-related fields, get the currently selected
//value of the fieldExpList (the one that says whether it's an internship or whatever,
//and set the correct prompts for that option. If the fieldExpReflect field is not empty,
//display the next set of experience-related fields
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://collab.sakaiproject.org/pipermail/portfolio/attachments/20100715/0d04ac32/attachment-0001.html
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image001.png
Type: image/png
Size: 23441 bytes
Desc: image001.png
Url : http://collab.sakaiproject.org/pipermail/portfolio/attachments/20100715/0d04ac32/attachment-0001.png
More information about the portfolio
mailing list