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 5 replies, has 2 voices, and was last updated by  Alexander Bautz 1 month, 2 weeks 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

  • #18516

    Phil Meacham
    Participant

    Thanks for this Alex. This looks to work on the New form, but I don’t think it’s saving the data as there’s noting in the field. Also, I can’t view the data in the edit or display forms.

    Is it possible to do this?

    Note: I change the field name to Q1. I also changed the JS to save this. Also, how would I go about adding multiple fields like this?

    Thanks,

    Phil

    • This reply was modified 1 month, 2 weeks ago by  Phil Meacham.
  • #18532

    Alexander Bautz
    Keymaster

    Hi,
    You can use this shippet in DispForm:

    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
                }
            ]
        }
    ];
    
    // Get current set values
    var currValObj = {};
    var currItem = spjs.utility.getItemByID({"listName":_spPageContextInfo.pageListId,"id":spjs.dffs.data.thisItemID,"viewFields":["blob"]});
    jQuery.each(JSON.parse(currItem.blob),function(i,o){
        currValObj[o.id] = o.val;  
    });
    
    function buildFormFromJSON(){
        var b = [];
        b.push("<table id='jsonFormTable' cellpadding='2' cellspacing='2'>");
        jQuery.each(jsonFormConfig,function(i,o){
            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("<span id='"+o.id+"' style='font-size:1.2em;'>"+(currValObj[o.id] !== undefined ? currValObj[o.id] : "")+"</span>");
                b.push("</td>");
            b.push("</tr>");
        });
        b.push("</table>");
        jQuery("#jsonFormTablePlaceholder").html(b.join(""));
    }
    
    buildFormFromJSON();

    and this in EditForm:

    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
                }
            ]
        }
    ];
    
    // Get current set values
    var currValObj = {};
    jQuery.each(JSON.parse(getFieldValue("blob")),function(i,o){
        currValObj[o.id] = o.val;  
    });
    
    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;' value='"+(currValObj[o.id] !== undefined ? currValObj[o.id] : "")+"'>");
                        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){
                                    if(currValObj[o.id] !== undefined){
                                        b.push("<option value='"+opt.value+"'"+(currValObj[o.id] === opt.value ? "selected" : "")+">"+opt.text+"</value>");
                                    }else{
                                        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;
    }

    Please note that this is only a “proof or concept” and I haven’t used this approach earlier. If you need to export the data out, I guess an export to a CSV file might be the best approach as a SharePoint list view will not be able to “open” the blob-field and show the data as a list view.

    If you don’t get any ouput in the “blob” field, you must look at the function “PreSaveAction” to see if it picks up the values.

    Alexander

You must be logged in to reply to this topic.