[Portfolio] Grouped Elements and Custom Creation Renderer

Ackerman, Erica ericaack at umich.edu
Thu Jul 15 10:30:18 PDT 2010


Sure. It’s a fairly complicated form that also produces some tables that get hidden and displayed based on user selections, so there is a certain amount of stuff that is irrelevant to you. Line 51 is where the Javascript file, likert.js, gets pulled in. I’ve also included the experienceTypePrompts.xml file, in case looking at that makes things clearer.

Erica

From: Christian Aziz [mailto:caziz at oit.rutgers.edu]
Sent: Thursday, July 15, 2010 1:15 PM
To: Ackerman, Erica
Cc: Christian Aziz; Portfolio List
Subject: Re: [Portfolio] Grouped Elements and Custom Creation Renderer

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:

[cid:image001.png at 01CB2420.2DFE1210]

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/f4048bd1/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/f4048bd1/attachment-0001.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: formCreate-competencyReflection.xsl
Type: text/xml
Size: 39237 bytes
Desc: formCreate-competencyReflection.xsl
Url : http://collab.sakaiproject.org/pipermail/portfolio/attachments/20100715/f4048bd1/attachment-0001.xsl 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: experienceTypePrompts.xml
Type: text/xml
Size: 1764 bytes
Desc: experienceTypePrompts.xml
Url : http://collab.sakaiproject.org/pipermail/portfolio/attachments/20100715/f4048bd1/attachment-0001.xml 


More information about the portfolio mailing list