2015年1月29日 星期四

用Awesome Table快速做出最新消息列表

上午11:14 Posted by Envisioning U-Commerce Lab

跟著下列步驟,幾分鐘就能做出一個「最新消息列表」。

首先,將TEMPLATE GALLERY展開:



準備套用Announcements List這個版型: 



點擊右上角的USE TEMPLATE按鈕,就會開始將該版型後端所需要的Google Sheet檔案建立到你自己的雲端硬碟裡面。





然後,我們就可以開始編輯自己的這個View,右上角標示了DATA SOURCE是你雲端硬碟裡的Google Sheet檔案(資料來自Articles Sheet之範圍A1:H),點擊之可開啟做編輯。





在還沒搞懂這個Data Sheet各欄各列意義前,先記得將其設定與他人共用可以檢視(Share your Google Sheet):




再回到Awesome Table編輯這個View的畫面,右邊的VIEW CONFIGURATION設定中的Layout預設是"Filters, chart",這個意思是左邊看到的版面安排上面先呈現可以做篩選查詢的一些元件(稱為Filters),下面才是呈現依據資料所顯示的列表內容(稱為Chart)。在最新消息列表有這些Filters的設計會對使用者很方便,可以輸入文字或挑選項目來做篩選查詢,可以加快找尋需要的消息。




這個最新消息列表的Chart設計,就藏在Template Sheet的A2格裡面的HTML碼(Configuring the template sheet)。如果你對HTML不陌生,一看就大概能懂為什麼News部分每一筆都是在左邊有個圖片(標示紫色底線的那四行HTML語法為每一則最新消息都呈現其分類圖示),而文字內容就是依日期、標題、內文這三個欄位由上而下排列。

  



Articles Sheet的E欄(Apps)、F欄(Category)、G欄(Article date),從第二列(Second row :  the data filters & parameters)的內容csvFilterCategoryFilterDateFilter可以知道這三欄會呈現在Filters用以做篩選查詢但第一列(First Row : the column headers)標題如果不改成中文,就不夠直覺讓人使用Filters做篩選查詢,所以我們先把這三欄的第一列名稱都改成中文: 類別、色彩標示、公告日期。但是,在Template Sheet的A2格裡面的HTML碼所對應的欄名也要改成相同的中文名稱(Configuring the template sheet),才能讓本來的Chart設計仍然正常呈現




另外,Articles Sheet的E欄、F欄設計成儲存格資料限定用下拉式清單擇定值,這可以從[資料]>[驗證清單]裡面的設定看到F欄的範圍是"List!D2:D20",也就是以List Sheet裡的D2至D20格當作清單選擇項目。所以,F欄儲存格下拉清單內容就是那三個項目。





為了要改成適合我們使用的,將List Sheet的D欄內容做些改變。同時,還要將Template Sheet的B2格最後面的三個CSS設定也改掉。

 



然後回到Article Sheet把前三筆資料的F欄改選成新的Red、Yellow、Green等值,就能看到最新消息列表的Chart前三筆還是能正常呈現紅、黃、綠標示。(至於第四筆之後的F欄若仍維持舊值,當然色彩標示就會出問題。)




至於Articles Sheet的E欄的[資料]>[驗證清單]裡面的設定範圍是"List!A:A",也就是以List Sheet裡的A欄當作清單選擇項目,讓儲存格資料限定用下拉式清單擇定值。於是,我們將List Sheet裡的A重新定義適合的分類項目名稱,包含: 一般公告演講公告競賽公告徵才公告教師成就學生表現計畫成果等六個項目,而且也在B欄記錄了對應這六項的圖示網址。(附帶一提,如果你打算將圖檔放在Google雲端硬碟,可以參考Displaying images from Google Drive來取得圖檔網址。)




於是將Articles Sheet每一筆資料的A、B、E欄換上自己的內容,重點是在C2格有設定一個以VLOOKUP公式為主而能將E欄選擇分類後就自動從List Sheet找出對應圖示網址存於C欄。( ={"Hidden";ArrayFormula(VLOOKUP(E3:E;List!$A$2:$B;2; false))} )



再回到Awesome Table重新整理這個View的畫面,可以看到每一筆最新消息都有標示正確的類別圖示,而且在上方的Filters也可以看到可篩選查詢特定某些類別(csvFilter)或某些色彩標示(CategoryFilter)的消息。


最後,我們查看上述Awesome Table這個View的畫面,右邊的ADVANCED PARAMETERS設定中的Query語法是" SELECT * where A is not null ORDER BY G DESC",這樣的語法相信不用多說了(詳見What is a query ?),目前也不需要做任何修正。




搞定上述步驟,以我們修改過的Google Sheet為後端資料來源所呈現的最新消息列表」就完成了,然後就將Awesome Table平台提供的Embed碼複製起來,嵌入自己網頁的HTML即可呈現(如此範例呈現於jsfiddlejsbin)。注意,若你只是先嵌入自己電腦上的HTML檔而直接以Chrome開啟,將會因為新版Chrome對於安全控制而阻擋其程式的正確執行,但若使用Firefox開啟自己電腦上的HTML檔則能看到正確執行。