反復的なコントロールをInfoPathなしでSharePointフォームに追加する回避策

Question

繰り返しフォームを使用してSharePointフォームを作成しようとしています.SharePoint Onlineユーザー（Office 365）です。

InfoPathやNintexなどのサードパーティ製のソフトウェアを使用しないと、これを行うための回避策があります。 JavaScriptソリューションが理想的です。

どのような提案も高く評価されています。

Answer 1

JavaScriptをフォームに挿入する方法を理解しているので、繰り返しデータを複数行のテキストフィールドに保存することができます。

JSONなどの構造化された形式でデータを複数行のテキストフィールドに格納し、JavaScriptを使用してそのフィールドの値を読み取り、適切な繰り返しコントロール（ラベル、テキスト入力、ドロップダウン）をレンダリングします。

（あなたが繰り返しデータを格納する複数行のテキストフィールドの表示名を持つ単語「複数行のテキスト列を」交換してください）以下の私の醜いが、機能の例をチェックアウト：

(function(){ 
 
    // define the data you want captured in the repeating field 
 
    var fields = [{type:"text",label:"Employee Name"}, 
 
       {type:"text",label:"ID Number"}, 
 
       {type:"choice",label:"Status",choices:["Full Time","Part Time","Intern","Consultant"]} 
 
      ]; 
 
    // find and hide the text area 
 
    var textarea = document.querySelector("[title=\"Multiline Text Column\"]"); 
 
    // textarea.style.display = "none"; // uncomment this line to hide the text area 
 
    // create a new container for your repeating field 
 
    var repeatingData = []; 
 
    var container = document.createElement("div"); 
 
    textarea.parentNode.appendChild(container); 
 
    // add a button for adding new rows 
 
    var addButton = document.createElement("input"); 
 
    addButton.setAttribute("type","button"); 
 
    addButton.value = "Add row"; 
 
    addButton.addEventListener("click",function(){addRow();}); 
 
    textarea.parentNode.appendChild(addButton); 
 
    // get the existing data, if any 
 
    var existing = JSON.parse(textarea.value); 
 
    for(var i = 0; i < existing.length; i++){ 
 
    addRow(existing[i]); 
 
    } 
 
    function addRow(data){ 
 
    if(typeof data === "undefined"){ 
 
     data = {}; 
 
    } 
 
    repeatingData.push(data); 
 
    var last = repeatingData.length-1; 
 
    var index = last; 
 
    if(last > 0){index = repeatingData[index-1]["data-id"] + 1;} 
 
    repeatingData[last]["data-id"] = index; 
 
    var row = document.createElement("div"); 
 
    row.setAttribute("data-id",index); 
 
    row.style.border = "1px solid black"; 
 
    row.style.margin = "2px"; row.style.padding = "2px"; 
 
    for(var i = 0; i < fields.length; i++){ 
 
     var field = fields[i]; 
 
     var lbl = document.createElement("span"); 
 
     lbl.insertAdjacentHTML("beforeend",field.label+": "); 
 
     row.appendChild(lbl); 
 
     switch(field.type){ 
 
      case "text":  
 
      var txt = document.createElement("input"); 
 
      txt.setAttribute("type","text"); 
 
      if(data[field.label]){ 
 
       txt.value = data[field.label]; 
 
      } 
 
      (function(label){ 
 
       txt.addEventListener("keyup",function(){ 
 
       getRecord(index)[label]=this.value; 
 
       updateTextArea();}); 
 
      })(field.label); 
 
      row.appendChild(txt); 
 
      break; 
 
      case "choice": 
 
      var sel = document.createElement("select"); 
 
      for(var j = 0; j < field.choices.length; j++){ 
 
       var option = document.createElement("option"); 
 
       option.value = field.choices[j]; 
 
       option.appendChild(document.createTextNode(field.choices[j])); 
 
       sel.appendChild(option); 
 
      } 
 
      if(data[field.label]){ 
 
       sel.value = data[field.label]; 
 
      } 
 
      (function(label){ 
 
       sel.addEventListener("change",function(){ 
 
       getRecord(index)[label]=this.value; 
 
       updateTextArea();}); 
 
      })(field.label); 
 
      row.appendChild(sel); 
 
      break; 
 
     } 
 
     row.appendChild(document.createElement("br")); 
 
    } 
 
    var remove = document.createElement("a"); 
 
    remove.href = "return false;"; 
 
    row.appendChild(remove); 
 
    remove.innerHTML = "remove";  
 
    remove.addEventListener("click",function(event){ 
 
     event.preventDefault(); 
 
     repeatingData.splice(getRecordIndex(index),1); 
 
     container.removeChild(row); 
 
     updateTextArea(); 
 
     return false;}); 
 
    container.appendChild(row); 
 
    updateTextArea(); 
 
    } 
 
    function getRecord(i){ 
 
    return repeatingData[getRecordIndex(i)]; 
 
    } 
 
    function getRecordIndex(i){ 
 
    for(var j = 0; j < repeatingData.length; j++){ 
 
     if(repeatingData[j]["data-id"] == i){ 
 
     return j; 
 
     } 
 
    } 
 
    return -1; 
 
    } 
 
    function updateTextArea(){ 
 
    textarea.value = JSON.stringify(repeatingData); 
 
    } 
 
})();

.ms-formtable{ 
 
    font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; 
 
    font-size:13px; 
 
    font-weight:400; 
 
} 
 
.ms-formlabel{ 
 
    padding-right:5px; 
 
} 
 
.ms-long{ border:1px solid rgb(186,186,186); padding-left:5px; padding-right:5px; padding-bottom:2px; padding-top:2px;

<table class="ms-formtable"> 
 
<tr> 
 
    <td width="113" class="ms-formlabel" valign="top"> 
 
    <span class="ms-h3 ms-standardheader"><nobr>Multiline Text Column</nobr></span> 
 
    </td> 
 
    <td width="350" class="ms-formbody" valign="top"> 
 
    <span dir="none"><textarea class="ms-long" title="Multiline Text Column" cols="20">[{"Employee Name":"Joe Blow","ID Number":"123","Status":"Full Time"},{"Employee Name":"Jane Doe","ID Number":"321","Status":"Consultant"}]</textarea></span> 
 
    </td> 
 
</tr> 
 
</table>

行コントロールで値が変更されるたびに、テキストエリアの基礎となる値が変更されることに注意してください。フォームを保存すると、テキストエリアの値がSharePointに保存されます。

表示フォームと編集フォームでこの機能を使用するには、少し異なる（より簡単な）コードが必要です。