文章分享了關於利用Axure RP8中繼器實現表單的增刪改的具體操作過程,一起來學習下。
原型演示:
使用場景:適用於模塊內增加擴展同名稱欄位
交互需求:
欄位可以輸入並記錄內容(欄位輸入長度不超過20字);單擊添加,增加一個欄位;單擊欄位後面的×,刪除對應欄位;增刪欄位,項目序號自動增減;
01 準備工作
矩形元件一個,中繼器一個。
剛從Default元件庫拖出中繼器內默認有一些默認的元件和設置,我們需要對中繼器做一些處理,點擊中繼器,右側它的屬性頁,刪除第一、二行,保留第三行(為什麼保留第三行呢,因為需要頁面載入時有一個初始的欄位)。
然後雙擊中繼器進入中繼器編輯頁面,把矩形框刪掉,在中繼器內放入我們需要的元件,做好元件命名。
最後返回原頁面,準備製作交互了。
02 製作交互
2.1 中繼器加載數據集到元件
點擊中繼器,中繼器屬性面板選擇每項載入時,當打開網頁或者添加數據時候,為中繼器加載數據集到元件。
為了實現編號自增,項目編號的動作設置為[[item.index]],[[item.index]]需要手動輸入,而內容輸入框的動作可直接進入函數選框選擇[[item.EditText]](EditText在元件準備時已經命名好了,有疑問的同學們可以翻翻上面圖片)。
2.2 內容輸入框設置
剛剛在準備基礎元件的時候已經拖出了文本框,此時為了更直觀地向用戶表達欄位可輸入我們需要設置一個提示語和設置元件最大輸入文字數為20,如下圖。
2.3 添加行
在元件準備的時候,我們已經準備了一個添加按鈕,也在中繼器屬性面板為中繼器數據集添加命名了EditText列,現在我們就要為添加按鈕配置點擊動作,為中繼器「添加行」。
新增行-選中中繼器-點擊新增行-選中中繼器數據集-點擊新增行-點擊確定。
2.4 刪除行
單擊欄位後面的×,刪除對應欄位,我們這個案例不需要用到標記行這個功能,直接為刪除按鈕配置點擊動作就可以了。
到了這一步我們以為已經基本完成了,預覽一下,咦,我們發現,每次添加行或者刪除行,都會清空我們已輸入的內容,這個怎麼呢?為了讓中繼器的數據集記錄下我們已輸入的內容,我們還需要做「更新行」的操作。
2.5 更新行
欄位編輯後需要記錄編輯內容就是需將用戶輸入內容記錄到中繼器中,此時我們只需要把用戶輸入的內容獲取到並通過某個交互動作傳給「EditText」列就可以了。下面我用到的是「失去焦點時」這個交互,選擇的動作是「更新行」。
到這裡就真的完成了,大家可以預覽一下!
回顧:
(1)增刪行,序號是如何實現自增的呢?
回答:項目編號的動作設置為[[item.index]]。
(2)增刪行後,清空已輸入內容怎麼辦?
回答:需要更新行。
本文由 @茗一 原創發布於人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基於CC0協議。