使用字段格式化来自定义SharePoint(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/FoxDave/article/details/81448509

博客地址:http://blog.csdn.net/FoxDave

我们可以使用字段格式化来自定义SharePoint列表和库中的字段如何显示。实现这个,我们需要构建一个JSON对象来描述包含在视图中的字段要显示的元素和元素的样式。字段格式化不会改变列表项或文件的数据,它只为浏览列表的用户变更显示的样式。可以在列表中创建和管理视图的用户就可以使用字段格式化来配置视图里的字段如何显示。
例如,一个具有标题、工作量、指派给和状态的列表,在没有应用自定义时的样子如下图:
这里写图片描述
而应用了自定义的样子可能就如下图:
这里写图片描述

字段格式化跟字段自定义的区别

字段格式化和SharePoint Framework字段自定义扩展都可以让我们能够自定义字段如何在SharePoint列表中显示。字段自定义器更强大一些,因为我们可以通过编写代码来控制字段如何显示。
字段格式化更简单和应用广泛一些。但是相对来说它不允许任何自定义的代码,灵活性低一些。下面提供一个表用来对比字段格式化和字段自定义器。

自定义的字段类型 字段格式化 字段自定义器
基于列表项的值或值范围的条件性格式化 支持 支持
操作链接 支持不运行脚本的静态超链接 支持任何类型的超链接,包括执行自定义脚本
数据可视化 支持简单的能够被HTML和CSS表达的可视化 支持任意的数据可视化

如果我们能够使用字段格式化完成我们的方案,相对于字段自定义器,它往往是更快捷和简单的。任何具有创建和管理列表中视图权限的用户都可以使用字段格式化来创建和发布自定制。通常在更复杂的字段格式化无法支持的场景下才使用字段自定义器。

开始使用字段格式化

我们可以通过打开字段下的菜单的方式打开字段格式化面板。在列设置下,选择格式化此列
这里写图片描述
如果没有人对该字段进行过格式化,打开的面板会如下图所示:
这里写图片描述
一个没有指定格式化的字段会使用默认的渲染。格式化一个字段,在输入框中输入字段格式化的JSON即可。
预览格式化点击预览按钮即可。如果要提交我们修改的内容,点击保存按钮即可。保存之后访问该视图页面的用户就会看到我们应用自定制后的效果。
使用字段格式化最简单的方式是从一个示例开始,基于示例进行修改并应用到我们指定的字段。接下来和之后的文章我们会介绍一些示例,以后如果有类似的需求我们可以直接基于某个示例进行修改以适应我们自己的需求。我们也可以访问GitHub去查看更多示例,链接为https://github.com/SharePoint/sp-dev-list-formatting

显示字段值 (基本)

由于篇幅有限,本篇先介绍最简单的一种字段格式化,即将字段值放到一个div元素中。本例对数字、文本、选项和日期类型的字段有效:

{
   "elmType": "div",
   "txtContent": "@currentField"
}

一些字段类型需要一点额外的工作来获取它们的值。用户字段在系统中展示为对象 (object),一个用户的显示名称被包含在该对象的标题属性中,因此对于用户字段,示例进行稍微的修改:

{
   "elmType": "div",
   "txtContent": "@currentField.title"
}

查阅项字段也以对象的形式展示;显示文本被存储在lookupValue属性中,示例如下:

{
   "elmType": "div",
   "txtContent": "@currentField.lookupValue"
}

猜你喜欢

转载自blog.csdn.net/FoxDave/article/details/81448509
今日推荐