Zoho Creator推出全新的Canvas布局設(shè)計器功能
自2021年Zoho CRM的UI設(shè)計工具——Canvas畫布功能發(fā)布以來，受到了廣泛好評，它的出現(xiàn)為CRM的頁面布局形式提供了更多選擇和可能，讓CRM用戶徹底告別了“單調(diào)、死板、機(jī)械”的交互頁面。
8月1日，Zoho Creator也推出了全新的Canvas畫布構(gòu)建器，用戶在報表的詳細(xì)視圖中創(chuàng)建自定義布局的頁面。
畫布構(gòu)建器是一款功能強(qiáng)大的工具，能夠根據(jù)您的業(yè)務(wù)需求定制和個性化記錄中的信息，為您的用戶提供美觀且視覺吸引的布局。
接下來，小Z帶您詳細(xì)了解一下Zoho Creator的Canvas畫布構(gòu)建器，也非常歡迎您注冊體驗，開啟不一樣的低代碼之旅！
1.功能概述
首先，我們對“布局”進(jìn)行簡單解釋：
布局指的是在設(shè)計構(gòu)成中，對于諸如文本、圖像和其他組件等視覺元素的結(jié)構(gòu)性排列。布局構(gòu)建器將使您能夠創(chuàng)建定制的布局，您可以在其中決定所需元素在頁面上的位置和組織方式。由此，您可以為用戶打造一個外觀美觀、井然有序且易于使用的交互界面。
Zoho Creator中的Canvas功能
在Zoho Createor中，布局為報表所定制的顯示結(jié)構(gòu)，目的在于使用戶界面更加直觀且易于閱讀。Zoho Creator中提供了一些預(yù)置的布局模板可以直接使用，當(dāng)然，也可以完全以自定義的方式來構(gòu)建，這意味著，它改變了傳統(tǒng)的數(shù)據(jù)呈現(xiàn)規(guī)則，您可以通過拖拉拽的方式來創(chuàng)建布局、更改它們的設(shè)計和尺寸，只為創(chuàng)建一個符合獨特需求的詳細(xì)數(shù)據(jù)視圖布局。
tips：Zoho Creator提供多種預(yù)置的布局模板，當(dāng)您從模板庫中選擇預(yù)先設(shè)計的模板時，您應(yīng)用中的數(shù)據(jù)會自動填充進(jìn)去，并突出顯示例如電話號碼、電子郵件等重要文本。
畫布還可以對數(shù)據(jù)使用條件格式進(jìn)行篩選，方便快速找到所需要的數(shù)據(jù)。在顯示方面，畫布還能夠?qū)⒂脩粼u論、藍(lán)圖階段和其他自定義的操作拖放到畫布布局構(gòu)建器中，并對它們的主題顏色、屬性等自定義。
使用畫布構(gòu)建器的好處
根據(jù)您的需求自定義和重新組織記錄中的數(shù)據(jù)，為您的用戶提供更好的可見性。
將您的專業(yè)詳細(xì)視圖布局轉(zhuǎn)變?yōu)樗囆g(shù)性十足且具有視覺吸引力的布局。
僅添加與之相關(guān)的數(shù)據(jù)組件和元素。這樣，您可以確保用戶可以一目了然地查看所需信息。
選擇合適的圖標(biāo)來將內(nèi)容更加高效地呈現(xiàn)出來，詳細(xì)布局視圖也可重新設(shè)計。
豐富的數(shù)據(jù)和元素模塊，讓布局設(shè)計更加靈動。
自定義布局可動態(tài)調(diào)整，使其顯示更加美觀。
將您的定制布局以JSON格式導(dǎo)出，并在您賬戶中的應(yīng)用程序之間導(dǎo)入相同的布局。
tips：確保提前準(zhǔn)備好您在記錄的詳細(xì)視圖中所需的所有字段清單，以便在設(shè)計自定義布局時不會遺漏任何相關(guān)字段。
2.Canvas中的模塊
畫布布局設(shè)計器的操作并不復(fù)雜，以布局詳細(xì)視圖設(shè)計為例，會涉及到數(shù)據(jù)（Data）、元素（Elements）和風(fēng)格（Style）三個模塊。
在布局設(shè)計器中常見的操作有哪些呢？
數(shù)據(jù)模塊下，左上方的搜索欄可以快速檢索數(shù)據(jù)記錄。
頂部的撤回、重做按鈕，讓每一個操作記錄都有跡可循，無需擔(dān)心操作失誤。
點擊下載圖標(biāo)以 .json 格式導(dǎo)出您的布局。
點擊頂部的全屏按鈕，可以使布局構(gòu)建器全屏顯示，更加便于操作。
自定義布局名稱。
點擊“保存”按鈕以保存您在布局中所做的更改（布局更改不會自動保存）。
數(shù)據(jù)模塊
該模塊的主要作用在于，幫助您可視化和重新組織記錄中的數(shù)據(jù)，例如在庫存管理系統(tǒng)中，公司名稱、倉庫名稱、地址、產(chǎn)品編號等等，通過拖拽相關(guān)字段到畫布中重新排列，讓重要的、關(guān)注的信息能夠顯示在用戶界面上。
（從左側(cè)拖拽字段到右側(cè)的畫布中，如果應(yīng)用中本身不含任何數(shù)據(jù)和記錄，相應(yīng)的字段值會顯示為“NA”，否則會自動對應(yīng)相關(guān)數(shù)據(jù)。）
除此之外，您還可以在數(shù)據(jù)模塊下執(zhí)行以下操作：
自定義操作：
如果您已經(jīng)在報表中配置了自定義操作，可以將所需的自定義操作塊拖放到其中。否則，您可以點擊“添加新操作”并進(jìn)行配置。
自定義功能：
評論：將記錄評論塊拖放到構(gòu)建器中。畫布構(gòu)建器還允許您通過在懸停在列邊界上時拖放調(diào)整圖標(biāo)，來設(shè)置列寬度。
藍(lán)圖：將藍(lán)圖塊拖放到構(gòu)建器中。當(dāng)前階段將被顯示。
相關(guān)塊：
從相關(guān)塊：已有的子表單和查找字段可以被拖放到構(gòu)建器中，這些查找字段會查找數(shù)據(jù)。
至相關(guān)塊：當(dāng)前（選擇的）表單中的查找字段，該字段會在其他表單中查找數(shù)據(jù)，將會在此處列出。
元素模塊
該模塊包含了用于表示與特定記錄相關(guān)的各類元素，包括：
區(qū)塊：區(qū)塊元素使您能夠創(chuàng)建獨立的區(qū)塊，并將相關(guān)內(nèi)容（如字段、記錄評論和藍(lán)圖）分組在一起。
選項卡：使您能夠?qū)?shù)據(jù)重新組織到不同的、可切換的選項卡中，好處在于可以給用戶提供一個更加清爽、井然有序的顯示界面。例如在下圖中，在名為“產(chǎn)品管理”的模塊內(nèi)，插入包含設(shè)計、開發(fā)和測試的三個選項卡。
表格：可用于以表格格式顯示記錄的值。這種格式通過以行和列組成的表格結(jié)構(gòu)來在詳細(xì)視圖中顯示數(shù)據(jù)，從而節(jié)省空間。例如，在下面的圖像中，產(chǎn)品名稱、描述和產(chǎn)品ID是存在的表單字段，它們以行和列的形式顯示。
文本：您可以插入文本框元素，在詳細(xì)視圖中輸入所需的內(nèi)容。例如，您可以使用文本元素在開始部分之前顯示標(biāo)題，或添加注釋或免責(zé)聲明。
圖標(biāo)：您可以使用圖標(biāo)元素代替常規(guī)文本標(biāo)簽，以表示字段。
線條：線條元素可用于插入水平線，以分隔內(nèi)容或定義內(nèi)容的變化。換句話說，它用于表示內(nèi)容之間的主題性分隔。例如，您可以在布局中的兩個區(qū)塊之間插入線條元素。
tips：每個元素（區(qū)塊、選項卡、文本、表格）都可以設(shè)置為固定或自適應(yīng)組件。選擇固定組件選項可以限制元素的大小不會隨用戶屏幕的變化而改變。另一方面，選擇自適應(yīng)組件將允許元素根據(jù)用戶屏幕大小自動調(diào)整大小。
例如，如果您認(rèn)為為某個區(qū)塊插入的背景圖像可能會超出某個屏幕尺寸，那么最好將其設(shè)置為自適應(yīng)組件，以便它根據(jù)用戶的屏幕大小調(diào)整尺寸。
風(fēng)格模塊
在風(fēng)格模塊下，您可以對整個界面的字體、字號、背景顏色、邊框、陰影、圓角、內(nèi)外邊距進(jìn)行調(diào)整。
3.應(yīng)用場景舉例
員工原理
假設(shè)您使用Zoho Creator創(chuàng)建了一個員工管理應(yīng)用程序，需要在詳細(xì)視圖中來顯示關(guān)于員工的一些基本信息，例如崗位、職級、入職時間等等，以及突出顯示每個員工的緊急聯(lián)系信息。通過Canvas來編輯詳細(xì)視圖界面，可以輕松實現(xiàn)上述需求，甚至實現(xiàn)更多功能。
學(xué)校管理
通過Zoho Creator，您可以創(chuàng)建一個面向老師、學(xué)生的教育管理應(yīng)用程序，但是，老師和學(xué)生作為兩個不同的人群，需要在應(yīng)用內(nèi)分開進(jìn)行管理。您可以通過Canvas創(chuàng)建不同的詳情頁，針對老師，可以將上課時間、教室安排、職務(wù)信息等展現(xiàn)在詳情頁內(nèi)；針對學(xué)生，則可以將姓名、性別、年齡、班級等信息進(jìn)行集中展示。
房屋租賃管理
在物業(yè)管理應(yīng)用中，可能涉及到房屋租賃管理需求，例如，需要在用戶界面中清晰地展示房屋信息：小區(qū)、樓層、面積、朝向等等。同時，還能夠在界面中向用戶提供篩選功能，來幫助用戶快速找到自己心儀的房子。
以上便是Zoho Creator新增的Canvas畫布功能，可以幫助您更加高效、便捷、隨心所欲的搭建管理應(yīng)用程序。
