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>

  

上一篇:glctx.ClearColor 参数说明


下一篇:struts2中的使用BaseAction获取Session