現代化自定製 - 列表和庫部分
部落格地址: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
- CustomTkinter:基於Tkinter的現代且可定製的Python UI庫PythonUI
- 三維數字沙盤的現代化製作方案解析
- elasticsearch之ik分詞器和自定義詞庫實現Elasticsearch分詞
- 列表的複製
- PHP歷理 列表模板和標籤庫PHP
- Java 列表元素自定義排序Java排序
- mysqldump備份單庫、部分庫、全庫、及排除部分庫MySql
- JavaScript之structuredClone現代深複製JavaScriptStruct
- 製作CocoaPods公有庫和私有庫
- 五個舉措:現代化Jenkins 和終結“Jenkinsteins”Jenkins
- 現代CSS進化史CSS
- AI如何推動退休和養老系統現代化AI
- 高路入雲端:從應用現代化,通往中國式現代化
- 開源和雲原生技術如何使API策略現代化API
- PHP現代化框架探祕PHP框架
- 【Redis系列3】Redis列表物件之linkedlist(雙端列表)和ziplist(壓縮列表)及quicklick(快速列表)實現原理分析Redis物件UI
- Python:將列表隨機切分成若干部分Python隨機
- Android自定義View之Paint繪製文字和線AndroidViewAI
- ItemTouchHelper實現可拖拽和側滑的列表
- 【數字化】重新思考數字化時代的製造業
- 競爭力智庫:2021中國城市基本現代化指數前100
- 單據列表呼叫自定義SQL函式SQL函式
- Flutter 自定義列表以及本地圖片引用Flutter地圖
- 現代化辦公:高效節能
- 現代化SharePoint經典網站網站
- Python列表的深淺複製Python
- python 複製以及更改列表操作Python
- 如何製作專案管理列表專案管理
- MySQL 8 複製(三)——延遲複製與部分複製MySql
- Python 列表切片陷阱:引用、複製與深複製Python
- vue實現li列表的新增刪除和修改Vue
- UWP 透過 .NET 9 和Native AOT 的支援實現 UWP 應用的現代化