開啟SAP C4C Cloud Application Studio，
進入Solution Explorer，右鍵選單裡選擇Add -> New Item:
新建一個Business Object，取名CarPark:
原始碼如下：
import AP.FO.BusinessPartner.Global;
import AP.Common.GDT as apCommonGDT;
businessobject CarPark
// *Further Development*
// declare an error message that is called if the BO fails validation
// raises Message_Car_Park_Full
{
// Root node must not be specified, it is created implicitly
//
// Add elements here.
//
// To declare an element as alternative key, use the [AlternativeKey]
// annotation.
//Please note:
// - An alternative key of type UUID exists implicitly for each node, enabling
// the node to be used as an association target.
// - The QueryByElements query is created automatically for each node.
// Code completion is available with CTRL + SPACE.
// *Further Development*
// define an error message to be displayed if the BO fails validation
// message Message_Car_Park_Full text "The car park is full - no spaces available";
// Car Park ID - (the company may have multiple car parks)
// - therefore we use this ID to identify the individual car park
element CarParkID : ID;
// additional information on the car park
element CarParkName : LANGUAGEINDEPENDENT_LONG_Text;
element CarParkDescription : LANGUAGEINDEPENDENT_LONG_Description;
element Number_of_ParkingSpaces : IntegerValue;
// *Further Development*
// add an element to display how many parking spaces are available
// element Number_of_ParkingSpaces_Available : IntegerValue;
// declare an action to calculate the available car spaces
// action Update_AvailableParkingSpaces;
// *Further Development*
// add an element to record location information
// this field is used with a URL mashup to display the location of the car park
// element CarParkLocation : LANGUAGEINDEPENDENT_MEDIUM_Description;
// each car park will have multiple parking spaces
// we create a node with 0 to n parking spaces
node ParkingSpace [0,n] {
// each parking space is assigned a unique identifier
element ParkingSpaceID : ID;
// display the ID of the Employee assigned to the parking space
element ParkingSpace_AssignedEmployeeID : ID;
// a parking space may be designated as a "Disabled Friendly" parking space
element ParkingSpace_Disabled : Indicator;
// is there an electric charging station for this parking space ?
element ParkingSpace_ElectricChargeStation : Indicator;
// display the license plate number of the employee's car
element Vehicle_RegistrationNumber : LANGUAGEINDEPENDENT_MEDIUM_Text;
// for a multi-level car park, we have the possibility to specify a level number
element ParkingSpace_Level : NumberValue;
// we need to create an association to the SAP BO "Employee"
// this allows us to include elements from the Employee BO in our screens
// a parking space may be associated to at most one employee
association ToEmployee [0,1] to Employee;
}
}
啟用該BO，確保Activation Status為Runtime Objects up to date:
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即可：
現在就可以進行測試了：
更多Jerry的原創文章，盡在："汪子熙":
