Blob Field or a form with lots of questions

Forums Dynamic Forms for SharePoint Blob Field or a form with lots of questions

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Alexander Bautz 2 days, 10 hours ago.

  • Author
    Posts
  • #18374

    Phil Meacham
    Participant

    I’m building a form that will have 69 questions on. Each question has a drop down (Yes / No / Partial) a score out of 4 and then a comments field.

    Ideally I don’t want to have 207 different fields. I was wondering if there was a way I could do it through a kind of blob field and then json??

    If anyone has any thoughts or experience, that would be greatly appreciated.

    I’m running SP2010.

    Thanks,

    Phil

  • #18398

    Alexander Bautz
    Keymaster

    You could do it trough a JSON blob and code to parse the JSON and create the form fields on the fly. The problem with this approach is that you cannot present the data in a list view without also creating a custom list view “engine” to parse the JSON blob for all the items in the list, and then present it in a custom list view.

    Alexander

  • #18412

    Phil Meacham
    Participant

    Thanks Alex, I don’t suppose there’s any guides or helpful links you might have or know of that will show me how to do this?

  • #18473

    Alexander Bautz
    Keymaster

    I’m sorry it took so long – here is an example that might get you started.

    Add a field of type multiple lines of text – plain text named “blob” in your form. Then enter DFFS backend and add one tab with one HTML section with this code:

    <div id="jsonFormTablePlaceholder"></div>

    Then add this to the Custom JS:

    setFieldValue("Title","JSON form example");
    
    var jsonFormConfig = [
        {
            "label":"The first text field",
            "type": "text",
            "id": "firstTextField",
            "placeholder":"Type something here..."
        },
        {
            "label":"The first dropdown select",
            "type": "select",
            "id": "firstSelect",
            "options": [
                {
                    "value": "Red",
                    "text": "Red option display text",
                    "selected":false
                },
                {
                    "value": "Green",
                    "text": "Green option display text",
                    "selected":true
                },
                {
                    "value": "Blue",
                    "text": "Blue option display text",
                    "selected":false
                }
            ]
        }
    ];
    
    function buildFormFromJSON(){
        var b = [];
        b.push("<table id='jsonFormTable' cellpadding='2' cellspacing='2'>");
        jQuery.each(jsonFormConfig,function(i,o){
            switch(o.type){
                case "text":
                    b.push("<tr>");
                        b.push("<td class='jsonFormLabel' valign='top'>");
                            b.push("<span class='jsonFormLabelText'>"+o.label+"</span>");
                        b.push("</td>");
                        b.push("<td class='jsonFormBody' valign='top'>");
                            b.push("<input type='text' placeholder='"+o.placeholder+"' id='"+o.id+"' style='width:400px;'>");
                        b.push("</td>");
                    b.push("</tr>");
                break;
                case "select":
                    b.push("<tr>");
                        b.push("<td class='jsonFormLabel' valign='top'>");
                            b.push("<span class='jsonFormLabelText'>"+o.label+"</span>");
                        b.push("</td>");
                        b.push("<td class='jsonFormBody' valign='top'>");
                            b.push("<select id='"+o.id+"'>");
                                jQuery.each(o.options,function(j,opt){
                                    b.push("<option value='"+opt.value+"'"+(opt.selected ? " selected" : "")+">"+opt.text+"</value>");
                                });
                            b.push("</select>");
                        b.push("</td>");
                    b.push("</tr>");
                break;
            }
        });
        b.push("</table>");
        jQuery("#jsonFormTablePlaceholder").html(b.join(""));
    }
    
    buildFormFromJSON();
    
    function PreSaveAction(){
        var b = [];
        jQuery.each(jsonFormConfig,function(i,o){
            b.push({"id":o.id,"val":jQuery("#"+o.id).val()});
        });
        setFieldValue("blob",JSON.stringify(b));
        return true;
    }

    And this to the Custom CSS:

    .jsonFormLabel{
        padding:2px;
    }
    .jsonFormLabelText{
        font-size:1.2em;
    }
    .jsonFormBody{
        padding:2px;
    }

    This will save the values from the generated form to the “blob” field. I’m not sure how you plan to use the data collected as the “blob” needs to be parsed by a function to give you the data in a readable form.

    Alexander

You must be logged in to reply to this topic.