一步步使用SAP C4C Cloud Application Studio建立一個BO和對應的螢幕

打開SAP C4C Cloud Application Studio，

進入Solution Explorer，右鍵菜單裡選擇Add -> New Item:

建立一個Business Object，取名CarPark:

源代碼如下：

BO激活後，右鍵菜單選擇Create Screens：

選擇Screen Scenario with Thing-Based navigation：

會自動生成很多SAP Cloud for Customer 螢幕：

輕按兩下QA打開自動生成的UI，發現上面已經有一些來自BO擡頭級别的字段了：

點工具欄上這個AddFlexLayoutRow按鈕：

出現一個新的空白行：

将Toolbox裡的控件AdvancedListPane拖到建立的FlexLayoutRow裡：

選中某一個column，右鍵菜單裡添加一個新的column：

現在我們有了一個表格，包含四列：

View菜單裡打開：BO Browser / Data Model，使其顯示在螢幕右邊：

把ParkingSpaceID拖拽到第一列上去：

選擇No：

進而建立了UI字段和BO 模型字段的綁定關系：

此處檢視綁定關系：

顯示employee ID的字段預設是input field，需要将其改成value help：

改成Object Value Selector：OVS

選擇/SAP_BYD_APPLICATION_UI/publicovs/employeeid/

EmployeeID: 作為OVS Component：

把字段：ToEmployee.CurrentCommon.Person.Name.GivenName拖到第三列：

familyName拖到第四列：

把GivenName的display type設定為Static Text：

右邊properties下拉菜單裡，選擇AdvancedListPaneVariant: ListPaneVariant：

useToolbar從false改成true：

設定成true之後，多了兩個按鈕：Add Row和Remove.

選中Add Row按鈕，建立一個Event handler：

建立一個operation，類型為List：

Target List裡，從下拉菜單選擇/Root/DataList：

給Remove按鈕也添加一個event handler：

再添加一個save action，確定Row被删除後自動儲存：

選中identificationRegion:

點選Advanced：

選擇CarParkID：

最終效果：

選中SectionGroup，可以對裡面的字段進行位置順序調整：

最後把使用者配置設定到這個建立好的work center即可：

現在就可以進行測試了：