在 SharePoint 列表中，“标题”列具有特殊的存在意义，这是因为它具有两个明显有别于其他列的重要特征：
第一，它是“默认存在且必填”的列。
无论你是创建空白列表，还是基于模板创建列表，默认都会存在一个必填的“标题”列。
当你创建一个空白列表时，它默认仅包含一个“标题”列；当然，你可以对它重命名，以此来为其赋予在当前列表中特有的意义。
或者，当你基于模板创建一个列表时，也同样会默认包含一个预先已被重命名的“标题”列，例如“资产管理器”模板中的“资产标记”列等。
第二，它能一键“打开当前列表项”。
“标题”列中的每个字段都是一个指向当前列表项的超链接，单击它就会打开一个表单，其中列出了当前列表项所包含的各个字段，你可以在这个表单中查看和编辑当前列表项。
而其他列默认没有这样的能力。正因如此，“标题”列通常用于存放对当前列表具有代表意义的内容类型。
定制标题列的外观
既然“标题”列如此重要，就有必要从外观上让它更醒目一些。这时，就可以借助 JSON 来对“标题”列进行非常个性化的格式设置。
首先，打开“标题”列的“设置列格式”窗格，并切换到列格式设置的“高级模式”，以便显示可以插入 JSON 代码的位置。
然后，将为此列准备好的 JSON 格式设置代码复制和粘贴到此处的代码框内，以替换默认的 JSON 代码。
{
"$schema": ";,
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "#DEEBF7",
"border": "none",
"color": "#06283D",
"padding": "12px",
"text-align": "center",
"display": "inline-block",
"margin": "auto",
"margin-top": "10px",
"border-left": "4px solid",
"border-radius": "4px",
"border-color": "#06283D",
"box-sizing": "border-box",
"font-family": "Segoe UI",
"font-size": "14px",
"font-weight": "bold"
}
}最后，单击“预览”按钮，就可以直接在当前列表上预览效果了。如果你觉得满意，可以单击“保存”按钮。
格式化的连锁反应
当你使用 JSON 对“标题”列的外观进行一番个性化定制后，你会发现，它丢失了默认的行为方式。
具体来说，用于表明这是一个可单击字段的手形指针不见了；而且，单击操作也不起作用。要想打开当前列表项的表单，只能双击它。这一定会给用户造成困扰！
怎样解决这个问题
解决上述问题的关键在于怎样让用户自然而然地找到当前列表项的打开途径。
由于用户打开一个列表项的主要目的是查看或编辑，因此，你可以在当前列表中新增两个“单行文本”类型的列，以此来分别显示“查看列表项”和“编辑列表项”命令。
当然，上述两个新增列中的命令也是通过 JSON 来实现的。
对于“查看”命令所在的列，你可以使用如下 JSON 代码来设置此列的格式：
{
"$schema": ";,
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "View"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "查看"
}
]
}当填入上述的 JSON 代码并保存后，如果单击某个列表项中的“查看”命令，就会在查看模式下打开此列表项的详细信息表单。如需编辑，可以单击要编辑的字段；或者，也可以单击“全部编辑”来将此表单切换到编辑模式。
对于“编辑”命令所在的列，你可以使用如下 JSON 代码来设置此列的格式：
{
"$schema": ";,
"elmType": "button",
"customRowAction": {
"action": "editProps"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"style": {
"border": "none",
"background-color": "transparent",
"cursor": "pointer"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "Edit"
},
"style": {
"padding-right": "6px"
}
},
{
"elmType": "span",
"txtContent": "编辑"
}
]
}当填入上述的 JSON 代码并保存后，如果单击某个列表项中的“编辑”命令，会在编辑模式下打开此列表项的详细信息表单。
有没有更好的办法
上述方法虽然解决了问题，但是，放眼整个列表，刚刚添加的两个命令列似乎在拥有多个数据列的这个列表中显得有些格格不入和挤占空间。
既然 JSON 既能定制列的外观，又能实现列的命令，那么，为什么不让这两种特性整合到同一个列，从而将打开列表项详细信息表单的功能“还给”标题列呢？
另外，在我们使用 JSON 来对“标题”列进行外观定制之前，单击其中字段的默认行为是在“查看”模式下打开当前列表项的详细信息表单。
因此，我们要做的是将实现此默认行为的 JSON 代码语句合并到“标题”列的外观定制 JSON 代码段之中：
{
"$schema": ";,
"elmType": "button",
"txtContent": "@currentField",
"customRowAction": {
"action": "defaultClick"
},
"style": {
"background-color": "#DEEBF7",
"border": "none",
"color": "#06283D",
"padding": "12px",
"text-align": "center",
"display": "inline-block",
"margin": "auto",
"margin-top": "10px",
"border-left": "4px solid",
"border-radius": "4px",
"border-color": "#06283D",
"box-sizing": "border-box",
"font-family": "Segoe UI",
"font-size": "14px",
"font-weight": "bold",
"cursor": "pointer"
}
}当你将鼠标光标指向“标题”列中的字段时，就可以看到手形指针，单击它就可以打开当前列表项的详细信息表单了。
最后，再为你提供一个有关设置列格式的小技巧，因为你在 JSON 中使用 CSS 来定义显示外观，所以，当你发现某个网站上有你喜欢的元素时，可以使用浏览器自带的“检查”工具来查看它的 CSS 代码，并将其利用到你的 JSON 之中。
看完有什么想法快来评论区一起交流吧，原创不易，不要忘记点赞呦！
本文由 BTIC Services 原创发布，可在微信公众号：生产力工坊 查看更多内容。