Blob Field or a form with lots of questions

[Phil Meacham]

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

[Alexander Bautz]

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

[Phil Meacham]

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?

[Alexander Bautz]

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

[Phil Meacham]

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 7 years, 2 months ago by Phil Meacham.

Attachments:

1. 

   Blob-with-options.png
   

2. 

   nothing-in-the-field.png
   

[Alexander Bautz]

Hi,
You can use this snippet 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

[Author]

Posts