[Portfolio] Grouped Elements and Custom Creation Renderer

Ackerman, Erica ericaack at umich.edu
Thu Jul 15 07:44:45 PDT 2010


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
    for (i = 1; i <= 5; i++) {
        var j = i + 1;
        var option = $("#fieldExpList_" + i + " option:selected").val();
        //alert("option = " + option);
        if (option) {
            //alert("in if option");
            $("label[for=fieldExpReflect_" + i + "]").text(promptList[option].prompt);
            var text = $("#fieldExpReflect_" + i).val();
            //alert("#fieldExpReflect_" + i + " val = " + text);
            //We're getting an &nbsp; here because of the xsl, and we are treating it as empty
            if (text != '' && text != ' ' && text != String.fromCharCode(160) && text != '&lt;br/&gt;' && text != '<br/>') {
                //alert("text is not empty, so setting things active for " + j);
                $("#fieldExpList_" + j + "-node").removeClass("likert-inactive").addClass("likert-active");
                $("#fieldExpTitle_" + j + "-node").removeClass("likert-inactive").addClass("likert-active");
                $("#fieldExpReflect_" + j + "-div").removeClass("likert-inactive").addClass("likert-active");
                //var formPanelId = $("#panelId").text();

            }
        }
    }

    $("#addReflectButton").click(function() {
        for (i = 1; i <= 5; i++) {
            if ($("#fieldExpReflect_" + i + "-div").hasClass('likert-inactive')) {
                //alert("#fieldExpReflect_" + i + " hidden");
                $("#fieldExpTitle_" + i + "-node").removeClass("likert-inactive").addClass("likert-active");
                $("#fieldExpReflect_" + i + "-div").removeClass("likert-inactive").addClass("likert-active");
                $("#fieldExpList_" + i + "-node").removeClass("likert-inactive").addClass("likert-active");
                $("#fieldExpList_" + i + "-prompt").text(promptList["internship"].prompt);
                $("label[for=fieldExpReflect_" + i + "]").text(promptList["internship"].prompt);
                break;
            }
        }
    });


    var expListUpdate = function(i) {
        return function() {
            var option = $("#fieldExpList_" + i + " option:selected").val();
            //alert("prompt = " + promptList[option].prompt);
            $("label[for=fieldExpReflect_" + i + "]").text(promptList[option].prompt);
            //$("#fieldExpList_" + i + "-prompt").text(promptList[option].prompt);
            $("label[for=fieldExpTitle_" + i + "]").text(promptList[option].title);
            //var formPanelId = $("#panelId").text();
            //setMainFrameHeight(formPanelId);
        };
    }
    for (i = 1; i <= 5; i++) {
        $("#fieldExpList_" + i).change(expListUpdate(i));
    }

    $.timer(300, function(timer) {
        setThisFrameHeight();
    });
});

I hope this helps.

Erica


From: portfolio-bounces at collab.sakaiproject.org [mailto:portfolio-bounces at collab.sakaiproject.org] On Behalf Of Christian Aziz
Sent: Thursday, July 15, 2010 9:59 AM
To: Portfolio List
Subject: [Portfolio] Grouped Elements and Custom Creation Renderer

Greetings all,

We're in the process of modifying a resume form for one of our departments and need a little guidance. I'm attempting to get a set of elements grouped so that when a user clicks on an icon, they'll be presented with a duplicate set of those elements. I'm going about this by trying to apply the 'maxOccurs="unbounded"' attribute to the container element in hopes that it would mimic the behavior for individual text fields. For example:

Education (+)
Institution
City/State of Institution
Degree
Date of Degree
Major
Minor
GPA

It doesn't produce the intended results and I'm not sure if this is the right way to go about doing this. I'm familiar with containing elements in <xs:sequence> which would produce a subgroup of elements by clicking 'Add'. However, we want to make it as user-friendly as possible. Has this been done?

Since we're using a custom creation renderer, the second part of this would be to call the element by the following. Would this change depending on the approach taken for the first part?

        <xsl:apply-templates select="formData/artifact/schema/element/children/element[@name='education']">
                            <xsl:with-param name="currentParent" select="formData/artifact/structuredData/*"/>
                            <xsl:with-param name="rootNode" select="'true'"/>
</xsl:apply-templates>
Best regards,
Christian

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


-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://collab.sakaiproject.org/pipermail/portfolio/attachments/20100715/ef50db46/attachment-0001.html 


More information about the portfolio mailing list