現代化自定製 - 列表和庫部分
部落格地址: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指令碼到這些命令。
後續會進行更具體的介紹。
相關文章
- 最大化地使用現代化列表和庫
- 應用現代化知識庫
- 自定義SpringMVC部分實現SpringMVC
- 通過自動化和現代化實現網路優化優化
- 現代化網站品牌和風格網站
- 現代化 React UI 庫:Material-UI 詳解!ReactUI
- 三維數字沙盤的現代化製作方案解析
- JavaScript之structuredClone現代深複製JavaScriptStruct
- 高路入雲端:從應用現代化,通往中國式現代化
- 現代 CSS 進化史CSS
- 現代CSS進化史CSS
- 應用程式現代化
- 自定義圖示列表
- CustomTkinter:基於Tkinter的現代且可定製的Python UI庫PythonUI
- PHP現代化框架探祕PHP框架
- elasticsearch之ik分詞器和自定義詞庫實現Elasticsearch分詞
- 自定義進度條列表
- Java 列表元素自定義排序Java排序
- 開源和雲原生技術如何使API策略現代化API
- 現代新的簡化”物件“和”物件導向“的定義物件
- 現代化懶載入的方式
- 歷史系統的現代化改造之路
- PHP歷理 列表模板和標籤庫PHP
- [安卓] 16、ListView和GridView結合顯示單元實現自定義列表顯示效果安卓View
- mysqldump備份單庫、部分庫、全庫、及排除部分庫MySql
- 競爭力智庫:2021中國城市基本現代化指數前100
- 自動現代化C++程式碼C++
- 用低程式碼驅動IT現代化
- 一個現代化的webpack工程初建Web
- 什麼是現代化程式設計?程式設計
- 製作CocoaPods公有庫和私有庫
- exe安裝檔案製作(漂亮,現代,簡約)
- Quantcast:現代品牌和AI報告ASTAI
- 實現資料管理現代化的 7 個技巧
- electron+vue製作桌面應用--自定義標題欄最大/小化和關閉Vue
- 複製和資料庫映象資料庫
- [翻譯]現代java開發指南 第一部分Java
- UWP 透過 .NET 9 和Native AOT 的支援實現 UWP 應用的現代化