開啟SAP C4C Cloud Application Studio，

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

![](https://img-blog.csdnimg.cn/img_convert/428635ebe35b80ef7c2c8604457aaa43.png)

新建一個Business Object，取名CarPark:

![](https://img-blog.csdnimg.cn/img_convert/b72f8569f93da06b3d53ba5003164364.png)

![](https://img-blog.csdnimg.cn/img_convert/d46c854012e7838656db09a684d4442b.png)

原始碼如下：

```javascript
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:

![](https://img-blog.csdnimg.cn/img_convert/d1f387b98c7fe84a2eb247684f513a82.png)

BO啟用後，右鍵選單選擇Create Screens：

![](https://img-blog.csdnimg.cn/img_convert/8aa96b556aecb4d715d87b174c046c46.png)

選擇Screen Scenario with Thing-Based navigation：

![](https://img-blog.csdnimg.cn/img_convert/6ff840058df9d873a9c5ac2784ddd6c4.png)

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

![](https://img-blog.csdnimg.cn/img_convert/338b859eda42363b941a68f715c72ef2.png)

雙擊QA開啟自動生成的UI，發現上面已經有一些來自BO抬頭級別的欄位了：

![](https://img-blog.csdnimg.cn/img_convert/a89079deb39039bc82f8dfbf8e23b915.png)

![](https://img-blog.csdnimg.cn/img_convert/46cc2d60f3d8cbc8cea849d791417c1e.png)

點工具欄上這個AddFlexLayoutRow按鈕：

![](https://img-blog.csdnimg.cn/img_convert/01457b2aa12d5f41273526b50fcce2bf.png)

出現一個新的空白行：
![](https://img-blog.csdnimg.cn/img_convert/13ff142713a44f214015e39a4215fce9.png)

將Toolbox裡的控制元件AdvancedListPane拖到新建的FlexLayoutRow裡：

![](https://img-blog.csdnimg.cn/img_convert/32f9b11b35b37540e7e73e646de5e7db.png)

選中某一個column，右鍵選單裡新增一個新的column：

![](https://img-blog.csdnimg.cn/img_convert/4cc25ce2f34756a8f8a82ea7cb819055.png)

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

![](https://img-blog.csdnimg.cn/img_convert/5d573ad44df67afca86f7f9bd987e844.png)

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

![](https://img-blog.csdnimg.cn/img_convert/92f769412b11ab2610403db690a3f98b.png)

把ParkingSpaceID拖拽到第一列上去：

![](https://img-blog.csdnimg.cn/img_convert/7a14f40e196de11c9a43d78ffc2c315c.png)

選擇No：

![](https://img-blog.csdnimg.cn/img_convert/70d3ce4a9e4f4d7f061f99944c8bd521.png)

從而建立了UI欄位和BO 模型欄位的繫結關係：

![](https://img-blog.csdnimg.cn/img_convert/e01d725fedeb5b2d6172ad217fc41bb0.png)

此處檢視繫結關係：

![](https://img-blog.csdnimg.cn/img_convert/c4cda767316401bc43f4e4c2c6825fdd.png)

顯示employee ID的欄位預設是input field，需要將其改成value help：

![](https://img-blog.csdnimg.cn/img_convert/5db1768939167876bce5c800ef9fc2a3.png)

改成Object Value Selector：OVS

![](https://img-blog.csdnimg.cn/img_convert/6a65cf159fc2f93b63b7950b35ebbc05.png)

選擇/SAP_BYD_APPLICATION_UI/publicovs/employeeid/
EmployeeID: 作為OVS Component：

![](https://img-blog.csdnimg.cn/img_convert/4a0b85eddec82c3c9cf258e2b7454756.png)

![](https://img-blog.csdnimg.cn/img_convert/44cd8815636c2939702aab19516db693.png)

把欄位：ToEmployee.CurrentCommon.Person.Name.GivenName拖到第三列：
![](https://img-blog.csdnimg.cn/img_convert/10167388087361febde19c13c77269d0.png)

familyName拖到第四列：

![](https://img-blog.csdnimg.cn/img_convert/eefce4d5b2d7b6568a2cedddd7cd10e6.png)

把GivenName的display type設定為Static Text：

![](https://img-blog.csdnimg.cn/img_convert/53983036fe9c3e5cc8dce299fd91534a.png)

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

![](https://img-blog.csdnimg.cn/img_convert/79089664c492266ab534aac147e19175.png)

useToolbar從false改成true：

![](https://img-blog.csdnimg.cn/img_convert/a5b4e3b525cdc1bf11bf4be5d77aff58.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/bee4b79d58ad1ebdad119d37c8dca985.png)

新建一個operation，型別為List：

![](https://img-blog.csdnimg.cn/img_convert/72218dd66987feadaf4248a569892aa2.png)

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

![](https://img-blog.csdnimg.cn/img_convert/cce03843b589e09a63ce9f3ec2b58d72.png)

給Remove按鈕也新增一個event handler：

![](https://img-blog.csdnimg.cn/img_convert/23b6f9af1f6a2554bcc2740f2e3e3251.png)

![](https://img-blog.csdnimg.cn/img_convert/08f00b14b46be469c2445e49e10792bf.png)

再新增一個save action，確保Row被刪除後自動儲存：

![](https://img-blog.csdnimg.cn/img_convert/1442fb729cb78208e3ee3ec8e41d5b46.png)

選中identificationRegion:

![](https://img-blog.csdnimg.cn/img_convert/7893a1bebdd048a3ee2ab76c07669e9d.png)

點選Advanced：

![](https://img-blog.csdnimg.cn/img_convert/6715b07a8bd10870e553ff0deb79eec3.png)

選擇CarParkID：

![](https://img-blog.csdnimg.cn/img_convert/a079cd01b073cebed3bb2fef70b6083e.png)

最終效果：

![](https://img-blog.csdnimg.cn/img_convert/d9dd70c185f4a781c6b191d4bf1b56c2.png)

![](https://img-blog.csdnimg.cn/img_convert/814960b31b6a0ab8404f6e2fec5708d3.png)

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

![](https://img-blog.csdnimg.cn/img_convert/36ea96639bc88343500e762b1dfa6071.png)

最後把使用者分配到這個新建好的work center即可：

![](https://img-blog.csdnimg.cn/img_convert/23d90e4b194a87c37b74de0819e1fb11.png)

現在就可以進行測試了：

![](https://img-blog.csdnimg.cn/img_convert/7ca74911185ebe215394a6452061fda0.png)

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

相關文章