Blob Field or a form with lots of questions

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

Tagged: 

Viewing 5 reply threads
  • 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 3 years, 4 months ago by Phil Meacham.
    • #18532
      Alexander Bautz
      Keymaster

      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

Viewing 5 reply threads
  • You must be logged in to reply to this topic.