- 低代碼時(shí)代的呼叫中心(一)
- 低代碼時(shí)代的呼叫中心(二)
- 低代碼時(shí)代的呼叫中心(三)
- 低代碼時(shí)代的呼叫中心(四)
- 低代碼時(shí)代的呼叫中心(五)
- 低代碼時(shí)代的呼叫中心(六)
- 低代碼時(shí)代的呼叫中心(七)
- 低代碼時(shí)代的呼叫中心(八)
1、大致的印象
U-Agent低代碼平臺是一款基于Web的快速業(yè)務(wù)實(shí)現(xiàn)平臺。使用U-Agent低代碼平臺配合U-Agent強(qiáng)大的平臺基礎(chǔ)能力,可以快速實(shí)現(xiàn)客戶的業(yè)務(wù)頁面。在U-Agent低代碼平臺的后端,有完整的組織結(jié)構(gòu)、權(quán)限、工作流、數(shù)據(jù)管理、ES集成等功能支撐。使得U-Agent低代碼平臺能夠發(fā)揮強(qiáng)大的界面編輯能力,快速實(shí)現(xiàn)和調(diào)整業(yè)務(wù),縮短項(xiàng)目周期。
直接上頁面!
1)登錄

2)菜單進(jìn)入
系統(tǒng)運(yùn)行環(huán)境和低代碼開發(fā)環(huán)境一體化。

3)頁面編輯

4)頁面導(dǎo)航區(qū)
頁面導(dǎo)航區(qū)分為4部分:標(biāo)題欄、頂部工具欄、頁面導(dǎo)航樹、底部工具欄。

5)頁面編輯區(qū)
頁面編輯區(qū)主要分為兩大部分:頁面標(biāo)簽和頁面編輯器。頁面標(biāo)簽用于切換正在編輯的頁面。頁面編輯器用于編輯頁面。

2、頁面編輯
頁面編輯器分為兩個區(qū)域:工具欄、操作區(qū)。

1) 工具欄
工具欄分為左右兩個區(qū)域。左側(cè)排列著多個功能按鈕包括保存、預(yù)覽等。右側(cè)用于不同編輯視圖的切換,包括:界面、腳本和數(shù)據(jù)服務(wù)。功能按鈕:
- 保存。用于保存頁面。保存的同時(shí),會在歷史版本庫中生成臨時(shí)的歷史版本。
- 標(biāo)簽并保存。保存頁面的同時(shí),設(shè)置版本標(biāo)簽。一旦設(shè)置標(biāo)簽并保存了頁面,在歷史版本庫中的臨時(shí)歷史版本將被清理。只保留設(shè)置了標(biāo)簽的歷史版本。
- 撤銷和重做。撤銷按鈕和重做按鈕,用于對界面編輯操作進(jìn)行撤銷和重做。
- 預(yù)覽。點(diǎn)擊預(yù)覽按鈕,會在新的瀏覽器窗口中預(yù)覽當(dāng)前頁面。預(yù)覽前必須保存。
- 接口配置。如果需要把當(dāng)前頁面作為組件提供給其他頁面,并且需要對外暴露方法和事件,可以在接口配置中進(jìn)行設(shè)置。
- 引入JS。當(dāng)頁面中需要用到第三方的js文件時(shí),可以在這里設(shè)置應(yīng)用js的URL。頁面加載時(shí)會將JS同時(shí)加載。
- 一鍵綁定。當(dāng)頁面中存在未綁定數(shù)據(jù)項(xiàng)的表單控件時(shí),使用一鍵綁定功能,將自動為未綁定的控件生成數(shù)據(jù)項(xiàng),并做綁定數(shù)據(jù)項(xiàng)的操作。
- 重新加載。用于刷新當(dāng)前編輯的頁面。所有未保存的修改將作廢。
- 歷史版本。瀏覽歷史版本庫中的版本,可以打開指定的歷史版本。
2) 界面視圖
用于編輯頁面的界面。分為三個區(qū)域:編輯區(qū)、左側(cè)邊欄和右側(cè)邊欄。

3、控件和布局
1)創(chuàng)建
用鼠標(biāo)從控件箱拖拽控件到頁面,可以將控件添加到頁面上。頁面中已經(jīng)存在的控件,也可以拖拽調(diào)整位置。
拖拽的結(jié)果分為三種:放到某個容器內(nèi)、放到某個控件之前、放到某個控件之后。
A、拖放到容器內(nèi)
控件拖放到容器內(nèi)時(shí),容器會高亮顯示。如下圖。

B、拖放到某個控件前
拖放到某個控件之前時(shí),會在該控件前面的位置顯示藍(lán)色的位置標(biāo)識。如下圖:

C、拖放到某個控件后
拖放到某個控件之后時(shí),會在該控件后面的位置顯示藍(lán)色的位置標(biāo)識。如下圖:

2)編輯控件內(nèi)元素
對于某些控件,控件內(nèi)的一些元素是可以編輯的。比如文本框的標(biāo)題、面板的標(biāo)題等。根據(jù)控件內(nèi)元素的不同,可以有兩種編輯操作:編輯內(nèi)容、編輯樣式。
所有控件內(nèi)元素,都可以單獨(dú)編輯樣式。但是只有某些有文本內(nèi)容的控件內(nèi)元素才可以編輯內(nèi)容。
如果要編輯控件內(nèi)元素,首先要選中控件(參考控件選中模式)。在控件選中狀態(tài)下,在控件上移動鼠標(biāo)。如果鼠標(biāo)當(dāng)前位置不可編輯,會顯示““鼠標(biāo)指針。如果可編輯,會顯示”“鼠標(biāo)指針。如下圖所示。

當(dāng)鼠標(biāo)移動到可編輯的元素上時(shí),點(diǎn)擊鼠標(biāo),會選中這個元素。選中的元素會顯示虛線邊框。元素選中后,可以做內(nèi)容編輯和樣式編輯操作。如下圖。

- 內(nèi)容編輯:
元素被選中后,再次點(diǎn)擊元素,會出現(xiàn)內(nèi)容輸入框,可以編輯內(nèi)容。編輯完成后按回車鍵,或者點(diǎn)擊其他區(qū)域,可以使內(nèi)容生效。

- 樣式編輯:
元素被選中后,在樣式面板中可以編輯元素的樣式。此時(shí)樣式面板上方會顯示正在編輯的元素的名稱。

3)調(diào)整控件尺寸
在低代碼平臺中可以通過兩種方式調(diào)整控件尺寸:可視化方式、屬性方式。不同的控件支持的方式不同,調(diào)整的維度也不同。
A、可視化方式
低代碼平臺提供了可視化調(diào)整尺寸的方式。在控件選中并且顯示”位置標(biāo)識線“狀態(tài)下(參考控件選中模式),可以通過拖動“位置標(biāo)識線”來調(diào)整尺寸。紅色“位置標(biāo)識線”標(biāo)識禁止調(diào)整尺寸,藍(lán)色“位置標(biāo)識線”標(biāo)識允許調(diào)整尺寸。

當(dāng)拖動位置標(biāo)識線時(shí),如果拖動中的位置標(biāo)識線顯示綠色,表示尺寸合法。如果拖動中的位置標(biāo)識線顯示紅色,表示尺寸非法。

不同的控件對可視化尺寸調(diào)整方式支持程度不同。例如支持柵格數(shù)屬性的控件,可以使用可視化方式調(diào)整柵格。

支持寬高屬性的,一般可以用可視化方式調(diào)整寬高。

但是,并不是所有控件都開放可視化尺寸調(diào)整。某些控件,根據(jù)條件開放可視化尺寸調(diào)整。例如超級面板控件,父面板的模式不同,子面板支持的調(diào)整維度也不同。當(dāng)父面板處于縱向維度(頂部欄、上-中-下、底部欄)模式下時(shí),可以調(diào)整頂部欄和底部欄的高度。當(dāng)父面板處于橫向維度(左側(cè)欄、左-中-右、右側(cè)欄)模式下時(shí),可以調(diào)整左側(cè)欄和右側(cè)欄的寬度。
B、屬性方式
可以通過設(shè)置控件提供的屬性來改變控件的尺寸。不同控件提供不同的屬性。
以超級面板控件為例。提供了高度、寬度屬性,可以以像素或百分百為單位,設(shè)置寬高。而當(dāng)一個超級面板放入流布局模式的面板中時(shí),這個面板也支持柵格數(shù)屬性,可以設(shè)置面板支持的柵格數(shù)。

表單類控件(如文本框、下拉框等)提供柵格數(shù)屬性。這些控件需要放入流布局模式的超級面板。


郵箱:huanghe@utry.cn
電話:18600895885
電話:18600895885