SharePonit online 列表表單定製

1）在O365管理中心，確保啓用了站點腳本定製，不然，網站不容許將頁面切換到編輯模式。

2）Ribbon上，列表-》表單web部件-》編輯窗體

若是沒有Ribbon，則到列表高級設置，啓用經典UI

3）編輯表單webpart，設置其表單模板名稱爲CSRListForm, 默認的ListForm，只能支持定製某個字段，不支持定製整個Layout

4）增長腳本編輯器Web部件，裏面寫腳本，不少文章都講了CSR機制.

ref:https://code.msdn.microsoft.com/office/CSR-code-samples-11-Fully-54ebcaa6

 

<script>


// List Forms – User CSRListForm Server Tempalte 
// Muawiyah Shannak , @MuShannak  
  
(function () {  
  
    // Create object that have the context information about the field that we want to change it's output render   
    var formTemplate = {}; 
    formTemplate.Templates = {}; 
    formTemplate.Templates.Item= viewTemplate; 
  
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate); 
  
})();  
  
// This function provides the rendering logic for the Custom Form 
function viewTemplate(ctx) { 
     
    var formTable = "".concat("<table width='100%' cellpadding='5'>", 
                                    "<tr>", 
                                        "<td><div>Title</div></td>", 
                                        "<td><div>{{TitleCtrl}}</div></td>", 
                                        "<td><div>CompanyCtrl</div></td>", 
                                        "<td><div>{{CompanyCtrl}}</div></td>", 
                                    "</tr>", 
                                    "<tr>", 
                                        "<td><div>Category</div></td>", 
                                            "<td><div>{{CategoryCtrl}}</div></td>", 
                                        "<td><div>Active</div></td>", 
                                        "<td><div>{{ActiveCtrl}}</div></td>", 
                                    "</tr>", 
                                    "<tr>", 
                                        "<td></td>", 
                                        "<td><input type='button' value='Save' onclick=\"SPClientForms.ClientFormManager.SubmitClientForm('{{FormId}}')\" style='margin-left:0' ></td>", 
                                    "</tr>", 
                              "</table>"); 
 
     
    //Replace the tokens with the default sharepoint controls 
    formTable = formTable.replace("{{TitleCtrl}}", getSPFieldRender(ctx, "Title")); 
  formTable = formTable.replace("{{CompanyCtrl}}", getSPFieldRender(ctx, "Company")); 
  //  formTable = formTable.replace("{{CategoryCtrl}}", getSPFieldRender(ctx, "Category")); 
   // formTable = formTable.replace("{{ActiveCtrl}}", getSPFieldRender(ctx, "Active")); 
    formTable = formTable.replace("{{FormId}}", ctx.FormUniqueId); 
 
    return formTable; 
} 
 
//This function code set the required properties and call the OOTB (default) function that use to render Sharepoint Fields  
function getSPFieldRender(ctx, fieldName) 
{ 
    var fieldContext = ctx; 
 
    //Get the filed Schema 
    var result = ctx.ListSchema.Field.filter(function( obj ) { 
        return obj.Name == fieldName; 
    }); 
 
    //Set the field Schema  & default value 
    fieldContext.CurrentFieldSchema = result[0]; 
    fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName]; 

if(ctx.Templates.Fields[fieldName]==null)
return "";
 
    //Call  OOTB field render function  
    return ctx.Templates.Fields[fieldName](fieldContext); 
} 

</script>