Временное решение для добавления повторяющихся элементов управления в форму SharePoint без InfoPath

Question

Я пытаюсь создать форму SharePoint с повторяющимися элементами управления. Я пользователь SharePoint Online (Office 365).

Я ищу обходное решение для этого, не используя InfoPath или любое стороннее программное обеспечение, такое как Nintex. Идеальное решение для JavaScript.

Любое предложение высоко ценится.

Answer 1

Поскольку вы знаете, как вставить JavaScript в форму, вы можете хранить повторяющиеся данные в многострочном текстовом поле.

Храните данные в структурированном формате, таком как JSON, в многострочном текстовом поле, затем используйте JavaScript, чтобы прочитать значение этого поля и отобразить на экране соответствующие повторяющиеся элементы управления (метки, текстовые входы, выпадающие списки).

Проверьте мой некрасивый, но функциональный пример ниже (заменить слова «Multiline Text Column» с отображаемым именем многострочного текстового поля, в котором вы хотите хранить повторяющиеся данные):

(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.

Обратите внимание, что вам понадобится немного другой (более простой) код, чтобы сделать эту работу для форм отображения, а также для редактирования форм.