现代化自定制 - 列表和库部分

简介:

博客地址:http://blog.csdn.net/FoxDave
在现代化网站时一个重要方面就是要去了解在网站上使用的自定制都有哪些,因为不是所有已存在的自定制还能正常工作。一个我们常常会遇到的典型例子就是网站中的用来展示一些如法律声明等公司信息的横幅展示。
这一般会通过在页面中嵌入JavaScript代码来实现用户自定义操作,这种内容将不会显示在现代化页面上。绕个弯解决这个问题,我们可以将展示条通过SharePoint Framework应用自定义扩展来实现并部署到租户或网站上。
本文主要介绍一些对于列表和库的现代化用户接口不兼容的自定义并概要阐述如何修复它们。

列表和库中的自定义

这部分我们主要专注于列表和库的自定义,当SharePoint检测到某个列表或库具有不兼容的自定义内容的时候,它会自动退回到经典用户界面。因此如果我们想获得完全的现代化用户接口,就需要解决这些自定义设置。

JSLink
SharePoint中一个非常普遍的控制字段如何展示的模型就是使用JSLink。基本上,JSLink允许我们插入JavaScript脚本去渲染字段。在现代化用户接口中,类似的自定制可以在列表视图页面实现,编辑页暂不支持。
如果我们想要替换JSLink,我们可以考虑两个选项,哪个更好取决于现有解决方案的复杂程度:

  • 如果只是关于如何显示数据,用字段格式化通常是最好的选择。
  • 如果需要更多操作,使用SharePoint Framework字段自定制扩展通常是最好的选择。

使用字段格式化
我们可以使用字段格式化来自定制字段在SharePoint列表和库中如何显示。我们需要构建一个JSON对象来描述如何展示字段。格式化并不改变数据而只更改数据的逻辑显示样式。具有创建和管理列表视图权限的用户都可以使用它。
例如,一个有标题、工作量、指派给和状态字段的列表,并没有自定制,看起来是如下图的样子:
这里写图片描述
而通过字段格式化给工作量、指派给和状态字段加了自定制之后看起来可能是下图的样子:
这里写图片描述
之后我们会再具体介绍它的用法。

使用SharePoint Framework字段自定制扩展
SharePoint Framework扩展使我们能够通过使用熟悉的SharePoint Framework客户端开发工具和库,在现代化页面和列表库扩展用户体验。具体来说,字段自定制使我们能够完全控制字段数据要如何在我们的列表或库中展示。下图使一个例子:
这里写图片描述
同样地,之后也会进行更具体的介绍。

列表范围的用户自定义操作(添加自定义菜单或者嵌入JavaScript)
使用列表范围内的用户自定义操作如添加自定义菜单选项到列表的ribbon菜单或上下文菜单,或嵌入JavaScript是传统意义上常见的自定制模式,但是对于现代化列表和库来说并不可用了。幸运的是,使用SharePoint Framework扩展我们可以实现类似的自定制,特别是通过命令集扩展可以让我们添加自定义的上下文菜单项或自定义按钮到列表和库上。我们可以关联任意的JavaScript或TypeScript脚本到这些命令。
这里写图片描述
后续会进行更具体的介绍。

相关文章
|
7月前
|
前端开发 JavaScript API
构建可重用用户界面:深入了解组件库的价值与实践
在现代应用程序开发中,组件库已经成为加速开发和提高代码质量的利器。它们是可重用的UI构建块,可以帮助开发者创建一致、漂亮和功能强大的用户界面。本博客将深入研究组件库的核心概念、最佳实践以及为什么它们对于现代开发至关重要。
33 0
|
9月前
|
移动开发 JavaScript 小程序
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(一)(下)
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(一)
|
测试技术 API 网络架构
FastAPI(40)- 大型应用程序的项目拆分
FastAPI(40)- 大型应用程序的项目拆分
977 1
FastAPI(40)- 大型应用程序的项目拆分
|
3天前
|
数据处理 数据库 开发者
Django中的自定义管理命令:扩展管理功能的途径
【4月更文挑战第15天】Django教程:介绍如何创建和使用自定义管理命令以扩展框架功能。在应用的`management/commands`目录下创建Python文件,继承`BaseCommand`,实现`handle`方法。示例代码展示了如何定义参数和执行逻辑。自定义命令适用于批量数据处理、定期任务、项目初始化和自定义迁移操作。注意文件位置、命令安全性和稳定性。自定义管理命令能提升开发和维护效率。
|
7天前
|
JavaScript 前端开发 关系型数据库
旅游规划助手:结合Vue的交云性设计和Python的强大后端功能
【4月更文挑战第11天】本文探讨了如何使用Vue.js和Python(Flask或Django)构建旅游规划助手应用,简化旅行规划。首先,确保安装了Python、Node.js、数据库系统和Git。接着,介绍如何用Python搭建后端API,分别展示了Flask和Django的例子。然后,利用Vue.js初始化前端项目,结合Vuex和Vue Router构建用户界面。最后,通过Axios实现前端与后端的数据通信。这样的架构有利于团队协作和代码维护,便于扩展应用功能。
|
2月前
|
小程序 开发者
社区每周丨交易组件新增扩展组件介绍文档及开发成员管理能力优化
社区每周丨交易组件新增扩展组件介绍文档及开发成员管理能力优化
30 0
|
3月前
|
测试技术 Apache 项目管理
软件测试|探索Flask接口路由技术:构建灵活可拓展的Python应用
软件测试|探索Flask接口路由技术:构建灵活可拓展的Python应用
28 1
|
9月前
|
开发框架 JavaScript 小程序
扩展应用功能的无限可能——UniApp生态系统中的组件库与插件探索
扩展应用功能的无限可能——UniApp生态系统中的组件库与插件探索
|
9月前
|
开发框架 JavaScript API
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(二)(下)
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(二)
|
9月前
|
移动开发 JavaScript 小程序
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(一)(上)
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(一)