每次有人說“前端操作”很簡單我都想把這套系統(tǒng)拉出來聊聊很多同行拿到一套商業(yè)客戶關(guān)系管理平臺(tái)第一反應(yīng)是“不就是增刪改查頁面嗎改改列、挪挪按鈕誰不會(huì)”。真上手你會(huì)發(fā)現(xiàn)這套體系的前端操作指的是圍繞模型驅(qū)動(dòng)應(yīng)用的一整套可視化定制實(shí)體窗體、視圖、自動(dòng)化流程、業(yè)務(wù)規(guī)則、按鈕命令再加一層腳本擴(kuò)展。你不需要寫多少代碼但得懂它的數(shù)據(jù)模型和頁面編排邏輯。這套體系平時(shí)被大家簡稱為“某365”下面我就直接叫它“客戶關(guān)系管理云平臺(tái)”。這篇文章適合誰看三種人。第一種是剛被分配去維護(hù)這套系統(tǒng)的開發(fā)前端調(diào)整全落在你頭上但你沒受過專門培訓(xùn)。第二種是實(shí)施顧問需要給客戶搭出能用的業(yè)務(wù)頁面又不想動(dòng)不動(dòng)就寫一堆腳本。第三種是業(yè)務(wù)線里的關(guān)鍵用戶想自己調(diào)整列表、加上下拉選項(xiàng)不求人。文章不會(huì)講得很玄重點(diǎn)放在“打開界面之后到底點(diǎn)哪里、為什么這么點(diǎn)、點(diǎn)了之后可能會(huì)踩什么坑”。1. 前端操作在這套體系里的真實(shí)分量1.1 它不叫“頁面開發(fā)”叫“配置驅(qū)動(dòng)”這套平臺(tái)和其他管理系統(tǒng)最大的區(qū)別在于大部分“前端”不是代碼寫出來的而是配置出來的。你拖一個(gè)字段進(jìn)窗體、加一個(gè)篩選條件到視圖、設(shè)一條狀態(tài)流轉(zhuǎn)規(guī)則這些操作最終都會(huì)落成一條條配置記錄存在平臺(tái)的解決方案里。保存完還不算生效得“發(fā)布”一下系統(tǒng)才會(huì)把新的配置推給所有用戶。所以我把前端操作拆成四件事窗體布局、視圖查詢、業(yè)務(wù)規(guī)則、命令按鈕。窗體管的是“用戶打開一條數(shù)據(jù)時(shí)看到什么”視圖管的是“列表頁默認(rèn)顯示哪些數(shù)據(jù)、按什么條件過濾”業(yè)務(wù)規(guī)則管的是“字段之間的聯(lián)動(dòng)和校驗(yàn)”命令按鈕管的是“用戶點(diǎn)了之后觸發(fā)什么動(dòng)作”。這四件事覆蓋了日常百分之八十的定制需求。1.2 前端操作要解決的業(yè)務(wù)問題不是技術(shù)問題有一次某公司提了個(gè)需求說銷售在列表里看不到“本月商機(jī)”我第一反應(yīng)不是幫他寫視圖而是先問你是想默認(rèn)只顯示本月還是希望有一個(gè)切換按鈕這兩個(gè)需求前端操作路徑完全不同。前者只需要改默認(rèn)視圖的篩選條件后者要新建一個(gè)視圖并把它設(shè)為團(tuán)隊(duì)默認(rèn)視圖。這個(gè)例子想說明一點(diǎn)在這個(gè)平臺(tái)上任何前端操作背后都對應(yīng)著一個(gè)業(yè)務(wù)語義。你拖一個(gè)列進(jìn)視圖不只是“多顯示一列”而是在回答“業(yè)務(wù)人員現(xiàn)在需要一眼比對這些數(shù)據(jù)”。你做窗體的時(shí)候把某個(gè)字段設(shè)為只讀也不是出于排版好看而是在控制“這個(gè)環(huán)節(jié)不該由錄入員修改”。搞懂需求再動(dòng)手前端操作的正確率能高一半。2. 窗體、視圖、自動(dòng)化這三樣必須拆開講2.1 窗體設(shè)計(jì)不僅僅是拖字段打開任意一個(gè)實(shí)體的窗體編輯器你會(huì)看到左側(cè)字段列表、中間畫布、右側(cè)屬性面板很像低代碼工具。但有個(gè)關(guān)鍵差異這個(gè)平臺(tái)的窗體由“選項(xiàng)卡”“節(jié)”“字段”三級結(jié)構(gòu)組成。選項(xiàng)卡用來分頁節(jié)用來控制一行放幾個(gè)字段字段才落到實(shí)際數(shù)據(jù)映射。我在實(shí)操中常用的第一件事是先把窗體改成“單列 頂部摘要”。為什么因?yàn)殇N售顧問在用手機(jī)看客戶詳情時(shí)多列布局在窄屏上會(huì)擠成一團(tuán)。平臺(tái)的窗體編輯器支持預(yù)覽不同設(shè)備寬度保存的配置是同一套響應(yīng)式自動(dòng)處理你不需要寫媒體查詢。2.1.1 窗體組件類型的選型邏輯窗體上能放的不只是字段還有子網(wǎng)格、快速視圖、計(jì)時(shí)器、知識(shí)搜索甚至嵌一個(gè)網(wǎng)頁資源。子網(wǎng)格最常見用在主窗體上展示關(guān)聯(lián)數(shù)據(jù)比如客戶主窗體里嵌入“該客戶名下的所有合同”。但子網(wǎng)格放多了窗體加載會(huì)明顯變慢數(shù)據(jù)多的時(shí)候尤其明顯。我的經(jīng)驗(yàn)是一個(gè)窗體最多保留三到四個(gè)子網(wǎng)格超過這個(gè)數(shù)就改成“合同”這樣的選項(xiàng)卡并在該選項(xiàng)卡內(nèi)放一個(gè)“ 新建”按鈕讓用戶按需查看。這樣既保證了快捷訪問又不至于打開一張客戶卡片就把所有歷史訂單全部拉出來白白消耗數(shù)據(jù)傳輸量。2.1.2 快速創(chuàng)建窗體千萬別忽略很多實(shí)施團(tuán)隊(duì)把精力集中在主窗體上忘了還有一種“快速創(chuàng)建窗體”——它出現(xiàn)在用戶點(diǎn)擊網(wǎng)格上的“”號(hào)、或是在搜索框里按下回車時(shí)彈出的輕量錄入窗口?？焖賱?chuàng)建窗體如果沒設(shè)計(jì)好用戶就會(huì)覺得“沒地方填關(guān)鍵字段”然后被迫保存草稿回頭再打開主窗體補(bǔ)充。我給每個(gè)關(guān)鍵實(shí)體配置快速創(chuàng)建窗體時(shí)只放業(yè)務(wù)上必須立即錄入的字段比如客戶名稱、負(fù)責(zé)人、手機(jī)號(hào)、來源。其他諸如描述、地址、標(biāo)簽一類留到主窗體再說。原因很簡單快速創(chuàng)建窗體彈出來時(shí)是模態(tài)框太長用戶會(huì)煩躁。2.2 視圖設(shè)計(jì)決定數(shù)據(jù)入口的體驗(yàn)視圖就是列表頁但它的設(shè)計(jì)思路和普通數(shù)據(jù)表格不太一樣。平臺(tái)里的視圖由三要素構(gòu)成列、篩選器、排序。列決定看哪些字段篩選器決定數(shù)據(jù)范圍排序決定默認(rèn)順序。三者缺一個(gè)視圖體驗(yàn)都不完整。新建視圖時(shí)我會(huì)先把篩選條件想透再選列。比如“我的進(jìn)行中商機(jī)”這個(gè)視圖篩選條件本質(zhì)上是 statecode 等于“進(jìn)行中”并且 owner 等于當(dāng)前登錄用戶。這看起來簡單但平臺(tái)有個(gè)邏輯坑如果你用“當(dāng)前用戶”作為條件視圖在用戶打開時(shí)會(huì)實(shí)時(shí)解析用戶身份性能沒有問題但如果你導(dǎo)入了共享視圖并復(fù)制一份復(fù)制后條件里的“當(dāng)前用戶”還是寫死的不會(huì)自動(dòng)變成新視圖所有者的身份發(fā)布前要逐條檢查。2.2.1 公共視圖與自定義視圖的權(quán)限差異公共視圖是團(tuán)隊(duì)共享的所有人打開列表頁時(shí)都能看到也都能把它設(shè)為個(gè)人默認(rèn)視圖。自定義視圖是個(gè)人私有的只有創(chuàng)建者可見。聽起來清楚但很多新手會(huì)犯一個(gè)錯(cuò)把公共視圖從解決方案里刪了結(jié)果所有人列表頁都空了。刪除公共視圖前一定要確認(rèn)沒有人在用或者先改默認(rèn)視圖再刪舊視圖。2.2.2 視圖性能的三個(gè)常見指標(biāo)視圖用起來卡不是錯(cuò)覺是數(shù)據(jù)量太大或篩選太寬泛。第一個(gè)指標(biāo)是“返回行數(shù)”超過單頁限制時(shí)平臺(tái)會(huì)分頁但分頁本身又增加交互成本第二個(gè)指標(biāo)是“列數(shù)”每多一列就多一次數(shù)據(jù)拼接第三個(gè)指標(biāo)是“相關(guān)實(shí)體條件”如果你給視圖加了跨實(shí)體的過濾條件比如“合同視圖篩選客戶所在區(qū)域”生成查詢時(shí)要做關(guān)聯(lián)查詢會(huì)有額外的性能成本。真正合理的視圖默認(rèn)排序控制在兩個(gè)字段以內(nèi)篩選條件不要跨兩跳以上。什么叫兩跳以上視圖基表是實(shí)體關(guān)聯(lián)到上級客戶的上級客戶那就是第二跳能避免就避免。2.3 自動(dòng)化規(guī)則不是后端的事平臺(tái)里的自動(dòng)化分為三種工作流、業(yè)務(wù)流程、業(yè)務(wù)規(guī)則。工作流通常用于后臺(tái)任務(wù)這里不展開業(yè)務(wù)流程是一組階段條串在窗體頂部引導(dǎo)用戶按步驟操作業(yè)務(wù)規(guī)則則是一個(gè)純前端的能力不用寫代碼可以實(shí)現(xiàn)在窗體上實(shí)時(shí)聯(lián)動(dòng)。業(yè)務(wù)規(guī)則的典型場景當(dāng)客戶類型等于“企業(yè)”時(shí)顯示“企業(yè)規(guī)模”字段且“聯(lián)系人”字段必填等于“個(gè)人”時(shí)隱藏“企業(yè)規(guī)?！薄奥?lián)系人”不必填。這種規(guī)則我用得最多因?yàn)樗痛绑w布局的交互是即時(shí)的——用戶還沒保存規(guī)則就已經(jīng)生效了。配置入口在解決方案里找到實(shí)體再進(jìn)“業(yè)務(wù)規(guī)則”界面是條件編輯器類似于 Excel 的條件格式。3. 實(shí)操過程從零到一搭出一個(gè)能用的前端頁面3.1 建解決方案并理解發(fā)布流程我不會(huì)直接在默認(rèn)解決方案里改東西官方也建議所有定制都放進(jìn)自己的解決方案。原因是默認(rèn)解決方案里改完后期遷移、備份、還原都不方便。正確路徑是進(jìn)“解決方案”模塊新建一個(gè)解決方案顯示名稱寫成“某公司銷售場景定制”發(fā)布者前綴選默認(rèn)即可。建好后添加現(xiàn)有實(shí)體。添加時(shí)注意一個(gè)細(xì)節(jié)如果只對“商機(jī)”實(shí)體做修改那就只添加“商機(jī)”實(shí)體同時(shí)勾選“包含所有資產(chǎn)”。這樣會(huì)把窗體、視圖、業(yè)務(wù)規(guī)則都帶到解決方案里后續(xù)發(fā)布遷移是一整包。只添加實(shí)體而不勾資產(chǎn)改完字段后發(fā)現(xiàn)窗體沒跟過來是新手最容易翻車的地方。3.2 定制視圖的完整操作路徑我把實(shí)操分成五步這里每一步都有具體動(dòng)作。第一步打開解決方案里已導(dǎo)入的商機(jī)實(shí)體切到“視圖”標(biāo)簽頁點(diǎn)“新建”取名叫“本周即將關(guān)閉的商機(jī)”。第二步設(shè)置篩選器條件寫“預(yù)計(jì)關(guān)閉日期 在此周”和“狀態(tài) 等于 進(jìn)行中”?！霸诖酥堋边@個(gè)操作符在日期條件里很實(shí)用平臺(tái)會(huì)自動(dòng)算當(dāng)前自然周用戶每天打開視圖看到的范圍會(huì)自動(dòng)滾動(dòng)。第三步選擇要顯示的列。我選商機(jī)名稱、客戶、預(yù)計(jì)關(guān)閉日期、預(yù)估金額、負(fù)責(zé)人這五列。列不是越多越好視圖寬度有限列太多反而要橫向滾動(dòng)用戶不愛看。第四步排序選“預(yù)計(jì)關(guān)閉日期 升序”讓最早到期的排最上面。如果你在排序里選了一個(gè)沒顯示在視圖里的字段平臺(tái)是允許的但這個(gè)操作會(huì)讓用戶困惑所以盡量排序字段和顯示列保持關(guān)聯(lián)。第五步保存并發(fā)布。發(fā)布是獨(dú)立動(dòng)作在視圖編輯器的工具欄上點(diǎn)“發(fā)布”或者用左上角“發(fā)布所有自定義項(xiàng)”。我習(xí)慣只發(fā)當(dāng)前視圖“發(fā)布所有自定義項(xiàng)”會(huì)觸發(fā)全租戶級的重新編譯耗時(shí)較長如果正在改的東西很多沒必要一鍵全發(fā)。3.3 窗體調(diào)整與業(yè)務(wù)規(guī)則下沉窗體實(shí)操里我常用“顯示/隱藏 日期校驗(yàn)”來做一個(gè)簡單示例。比如在“客戶”主窗體上我想讓“首次聯(lián)系日期”必須早于“最近聯(lián)系日期”。配置路徑窗體編輯器中選中“最近聯(lián)系日期”字段在“字段屬性”里找到“事件”頁簽插入一條業(yè)務(wù)規(guī)則的 JavaScript 替代方案。實(shí)際上平臺(tái)有現(xiàn)成的“業(yè)務(wù)規(guī)則”編輯器更快。具體步驟在解決方案的客戶實(shí)體下點(diǎn)“業(yè)務(wù)規(guī)則”新建條件設(shè)為“最近聯(lián)系日期 晚于 首次聯(lián)系日期”動(dòng)作設(shè)為顯示錯(cuò)誤消息“最近聯(lián)系日期不能晚于首次聯(lián)系日期”同時(shí)阻止保存。保存發(fā)布后只要用戶填寫的日期不滿足條件界面上會(huì)直接飄紅保存按鈕也會(huì)被限制。這個(gè)規(guī)則不依賴腳本比寫代碼維護(hù)起來省心得多。3.4 用腳本做前端擴(kuò)展的正確姿勢有些需求規(guī)則做不了比如要根據(jù)某字段的值動(dòng)態(tài)改按鈕顏色或者要判斷多個(gè)字段組合后再彈確認(rèn)提示。這種時(shí)候才考慮引入腳本平臺(tái)在前端提供了一個(gè)全局對象叫 formContext能訪問窗體級上下文。一個(gè)小例子在商機(jī)窗體上當(dāng)載入時(shí)判斷“是否需要審批”字段如果是就自動(dòng)把“關(guān)閉為已贏得”按鈕隱藏。腳本寫在“解決方案 - 新建 Web 資源javascript”函數(shù)簽名固定為function onLoad(executionContext)里面通過executionContext.getFormContext()拿到窗體上下文再操作控件。核心代碼如下你可以直接復(fù)制進(jìn)一個(gè) JS 資源里function onLoad(executionContext) { var formContext executionContext.getFormContext(); var needApprove formContext.getAttribute(new_needapprove).getValue(); if (needApprove true) { formContext.getControl(closeopportunity).setDisabled(true); } }保存后回窗體編輯器在“窗體屬性 - 事件”里把onLoad注冊進(jìn)去事件庫選擇你上傳的 Web 資源。這一步經(jīng)常有人漏掉腳本寫了但不注冊保存發(fā)布后一點(diǎn)反應(yīng)都沒有。注冊時(shí)注意事件觸發(fā)順序OnLoad不要勾“第一個(gè)”之外的選項(xiàng)以免被其他腳本覆蓋。4. 常見問題與排查技巧實(shí)錄4.1 視圖和窗體改了為什么別人看不到遇到最多的場景就是改完了、發(fā)布也點(diǎn)了但同事刷新頁面還是老樣子。先別懷疑沒保存十有八九是“發(fā)布范圍”的問題。平臺(tái)里的配置改動(dòng)默認(rèn)只影響“你所在解決方案的上下文”。如果你是在默認(rèn)解決方案里改的視圖而別人用的是你建的解決方案里的視圖那默認(rèn)的那份沒有你的改動(dòng)。正確做法是統(tǒng)一在一個(gè)解決方案里操作發(fā)布時(shí)選擇“發(fā)布所有自定義項(xiàng)”再讓目標(biāo)用戶清理瀏覽器緩存或者用平臺(tái)的無痕窗口驗(yàn)證。4.2 窗體字段明明在列表中但用戶說看不到這個(gè)問題的本質(zhì)更常見字段在主窗體上沒被拖進(jìn)去只在視圖中添加了。視圖和窗體是兩套獨(dú)立配置——視圖新增列并不會(huì)自動(dòng)出現(xiàn)在窗體上窗體拖入字段也不會(huì)自動(dòng)進(jìn)視圖。所以看到數(shù)據(jù)的時(shí)候列表有、詳情無或者詳情有、列表無都是正常的你需要兩處分別維護(hù)。另一種隱蔽情況是“窗體被多個(gè)類型共用”。平臺(tái)支持同一個(gè)實(shí)體的多個(gè)窗體比如“主窗體銷售”和“主窗體客服”它們會(huì)按用戶角色分配。如果你的客戶角色綁定的是另一個(gè)窗體不管你怎么改默認(rèn)窗體他都看不到。在窗體列表里看“分配給的角色”列就能定位問題。4.3 業(yè)務(wù)規(guī)則不生效先看字段是否在窗體上業(yè)務(wù)規(guī)則的觸發(fā)有一個(gè)隱藏前提被控制的字段必須出現(xiàn)在當(dāng)前窗體上。如果“企業(yè)規(guī)模”字段根本沒被拖進(jìn)窗體即使規(guī)則里寫了“顯示”或“隱藏”也不會(huì)生效因?yàn)槠脚_(tái)不會(huì)為了規(guī)則自動(dòng)渲染控件。第二個(gè)常見坑是字段類型。業(yè)務(wù)規(guī)則只支持部分類型的條件判斷比如選項(xiàng)集之間可以做等于比較但復(fù)合字段姓名、地址這種就不支持。遇到這種情況要么改用腳本要么調(diào)整字段設(shè)計(jì)——比如把“地址”拆成多行文本。4.4 保存時(shí)提示“字段必填”但界面沒標(biāo)星如果一個(gè)必填字段在窗體上沒有可見的輸入控件表單提交時(shí)依然會(huì)校驗(yàn)但用戶根本不知道哪里沒填。典型場景是某個(gè)字段被安全角色設(shè)為“必填”有人把它從窗體上拖掉了保存時(shí)只能看到提示卻不知道如何找到該字段。排查方法檢查字段的安全角色必填級別再確認(rèn)窗體是否有該字段。如果你希望它在特定業(yè)務(wù)流程中點(diǎn)才必填就別用字段級別必填用業(yè)務(wù)規(guī)則的“設(shè)置必填”動(dòng)作這樣能控制生效時(shí)機(jī)不會(huì)被全局卡住。5. 前端操作里的工具選型與性能體驗(yàn)優(yōu)化5.1 數(shù)據(jù)加載慢先別怪平臺(tái)有次客戶反饋視圖打開要三四秒我看了一眼配置視圖有十列其中三列是查找列還有一個(gè)跨實(shí)體的過濾條件。這種配置下每次打開列表平臺(tái)要生成關(guān)聯(lián)查詢加上字段拼接自然慢。前端優(yōu)化最有效的三件事減少列數(shù)到六列以內(nèi)、去掉跨實(shí)體篩選、把排序從“相關(guān)字段”改成基表字段。做完這三項(xiàng)很多視圖的加載時(shí)間能從秒級降到毫秒級。如果還慢就要看是不是實(shí)體本身啟用了太多插件或同步回調(diào)那條鏈路過長問題就更多了。5.2 用全局搜索替代自定義查詢很多團(tuán)隊(duì)為了“方便”在窗體頂部塞了很多自定義按鈕去調(diào)各自寫好的高級查詢視圖。其實(shí)平臺(tái)自帶全局搜索支持跨實(shí)體的關(guān)鍵詞匹配而且底層有索引比自定義列表查詢高效得多。我會(huì)建議用戶把高頻查詢沉淀成“個(gè)人視圖”再置為默認(rèn)視圖而不是增加按鈕。按鈕一多前端操作界面會(huì)被稀釋用戶找核心功能的時(shí)間反而變長。5.3 體驗(yàn)優(yōu)化的幾個(gè)小習(xí)慣窗體加載時(shí)腳本的注冊數(shù)量越少越好。如果實(shí)體上有五六個(gè)腳本每個(gè)腳本都做 DOM 操作加載速度會(huì)肉眼可見地下降。合并腳本不是難事但很多團(tuán)隊(duì)一開始就注冊了許多片段最后想清理就得逐個(gè)確認(rèn)。還要養(yǎng)成的習(xí)慣是發(fā)布前用系統(tǒng)管理員身份開一次“模擬器”在平臺(tái)上模擬不同角色看到的界面。角色不同窗體布局和可見字段會(huì)不同你以管理員身份改好的視圖用戶可能根本看不到因?yàn)榻巧踩O(shè)置把字段權(quán)限限制掉了。6. 實(shí)操心得前端操作里最容易被低估的幾件事第一發(fā)布不是終點(diǎn)驗(yàn)證才是。我在很多項(xiàng)目里見過改完視圖直接告訴用戶“好了”但用戶一打開還是舊版。原因可能是瀏覽器緩存、權(quán)限緩存、或者平臺(tái)的消息隊(duì)列還沒刷新完畢。我現(xiàn)在養(yǎng)成的習(xí)慣是發(fā)布后等一兩分鐘再開一個(gè)無痕窗口用測試賬號(hào)走一遍保存、刷新、切換視圖的流程。第二不要輕易刪除視圖里的公共視圖。即使你已經(jīng)在“視圖列表”里把它刪除如果用戶瀏覽器端還殘留著舊的視圖配置他們依然會(huì)在下拉菜單里看到它但點(diǎn)進(jìn)去可能報(bào)錯(cuò)。最好的處理是先把默認(rèn)視圖切換掉然后再刪隔一天再回來看有沒有人報(bào)異常。第三腳本出問題時(shí)先禁用后排查。前端腳本報(bào)錯(cuò)會(huì)影響整個(gè)窗體加載導(dǎo)致頁面白屏或字段不可見。如果你要改動(dòng)腳本別在原資源上直接改完就發(fā)布先復(fù)制一份新資源注冊到測試窗體上跑通再替換正式窗體的注冊。實(shí)在急著救線上直接把事件注冊移除界面恢復(fù)原樣再回頭調(diào)腳本。最后再說一個(gè)更實(shí)用的前臺(tái)操作和后臺(tái)插件之間經(jīng)常有配合問題。比如你用前端業(yè)務(wù)規(guī)則隱藏了一個(gè)字段但某條后臺(tái)流程在運(yùn)行時(shí)又嘗試往這個(gè)字段寫值字段被隱藏時(shí)寫入并不會(huì)報(bào)錯(cuò)但會(huì)因?yàn)椤爸蛔x”等原因被丟棄。這種問題很難查所以我每次設(shè)計(jì)隱藏字段時(shí)都會(huì)同步檢查后臺(tái)流程是否用到了它如果用到就讓它始終可見但標(biāo)記為只讀避免兩邊打架。前端操作這條路越往后走越會(huì)發(fā)現(xiàn)真正的門檻不在點(diǎn)鼠標(biāo)而在于你能不能理解配置背后的數(shù)據(jù)語義和權(quán)限模型。把這套邏輯理順了你會(huì)發(fā)現(xiàn)自己開發(fā)效率提升的不止一點(diǎn)點(diǎn)。