ขั้นตอนที่ 3: ตรวจสอบโครงสร้างของการตั้งค่าองค์ประกอบในระบบ

ในขั้นตอนนี้ เราตรวจดูโครงสร้างของการตั้งค่าที่ระบุไว้สำหรับองค์ประกอบในระบบ

เช่นเดียวกับไฟล์ render.js ในไดเรคทอรี /assets จะมีไฟล์ settings.html ที่สร้างขึ้นล่วงหน้าอยู่ในไดเรคทอรีเดียวกัน ไฟล์ settings.html จะแสดงข้อมูลการตั้งค่าที่กำหนดเองสำหรับองค์ประกอบของคุณ ในการใช้งานดีฟอลต์ จะมีคุณสมบัติ imageWidth หนึ่งรายการในข้อมูลการตั้งค่าที่กำหนดเอง

ในการตรวจสอบโครงสร้างขององค์ประกอบในระบบ ให้ทำดังนี้

ค้นหาองค์ประกอบของคุณและซิงโครไนซ์กับระบบไฟล์ โดยใช้ไคลเอนต์การซิงโครไนซ์บนเดสก์ท็อปของ Oracle Content Management

ถ้าคุณไม่มีไคลเอนต์การซิงโครไนซ์เดสก์ท็อป คุณสามารถเลือกองค์ประกอบบนแท็บ องค์ประกอบ ของเว็บอินเตอร์เฟซของ Oracle Content Management จากนั้นดริลล์ดาวน์เพื่อดูไฟล์ต่างๆ
ถ้าคุณแสดงรายการไฟล์ภายในองค์ประกอบ คุณจะเห็นไฟล์เหล่านี้
```
assets
    render.js
    settings.html
appinfo.json
_folder_icon.jpg
```

เปิดไฟล์ settings.html ภายใต้ไดเรคทอรี /assets และตรวจดูเนื้อหา ซึ่งแตกต่างจากไฟล์ render.js ไฟล์ settings.html จะใช้เฟรมแบบอินไลน์ในแผงข้อมูลการตั้งค่าในตัวสร้างไซต์ ซึ่งเป็นสาเหตุที่จำเป็นต้องเข้าใช้ไฟล์ที่รองรับเพื่อการแสดงผลอย่างถูกต้องภายในเฟรมแบบอินไลน์ คุณต้องใช้ตัวสร้างไซต์เพื่อจัดการไซต์ของคุณ จึงจะสามารถแยกข้อผิดพลาดต่างๆ ในรหัส JavaScript ของคุณออกจากตัวสร้างไซต์ได้ ซึ่งเป็นสาเหตุที่ไฟล์ settings.html ใช้เฟรมแบบอินไลน์

พื้นที่เหล่านี้คือ พื้นที่หลักของไฟล์ settings.html

เทมเพลท Knockout ที่จะแสดงแผงข้อมูลการตั้งค่า

<!-- ko if: initialized() -->
<div class="scs-component-settings">
  <div>
    <!-- Width -->
    <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
    <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
  </div>
</div>
<div data-bind="setSettingsHeight: true"></div>
<!-- /ko -->

แฮนด์เลอร์การเชื่อมโยงที่กำหนดเองในการปรับปรุงความสูงของเฟรมแบบอินไลน์ เมื่อแสดงแผงข้อมูลการตั้งค่า
```
ko.bindingHandlers.scsCompComponentImpl
```
Knockout ViewModel ที่จะใช้กับเทมเพลท Knockout
```
SettingsViewModel
```

อีลิเมนต์เหล่านี้คือ อีลิเมนต์หลักของ SettingsViewModel

การสมัครในรอบการใช้งานขององค์ประกอบ
การเริ่มต้นองค์ประกอบ ให้ทำดังนี้
- ตรวจสอบให้แน่ใจว่าองค์ประกอบไม่ได้แสดง จนกว่าจะดึงข้อมูลทั้งหมดแล้ว การดำเนินการนี้จะได้รับการจัดการผ่านรายการที่สังเกตเห็นได้ของ Knockout
```
self.initialized = ko.observable(false);
```
- ตรวจสอบให้แน่ใจว่าเราไม่ได้พยายามอัปเดตข้อมูลจนกว่าเราจะพร้อม
```
self.saveData = false;
```
- เรียกค่าเริ่มต้นสำหรับคุณสมบัติที่จำเป็นใดๆ การทำงานนี้จัดการโดยการเรียกกลับเพื่อดึงข้อมูล
```
    SitesSDK.getProperty('customSettingsData', function (data) {
      //update observable
      self.width(data.width);

      // note that viewModel is initialized and can start saving data
      self.initialized(true);
      self.saveData = true;
    });
```

บันทึกการเปลี่ยนแปลงคุณสมบัติของข้อมูลการตั้งค่าที่กำหนดเอง

    self.save = ko.computed(function () {
      var saveconfig = {
        'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
      };

      // save data in page
      if (self.saveData) {
        SitesSDK.setProperty('customSettingsData', saveconfig);
      }
    }, self);

ในการเพิ่มคุณสมบัติที่คุณต้องการบันทึก ต้องดำเนินการตามขั้นตอนต่างๆ ต่อไปนี้

อัปเดตอินเตอร์เฟซผู้ใช้เพื่อแสดงค่าใหม่
เริ่มต้นค่าเป็นค่าปัจจุบันที่จัดเก็บกับองค์ประกอบ
บันทึกการเปลี่ยนแปลงของค่าและกลับไปยังองค์ประกอบ

ในการเพิ่มคุณสมบัติอื่นในองค์ประกอบที่กำหนดเองของคุณ ให้ดำเนินการเปลี่ยนแปลงต่างๆ เหล่านี้ในไฟล์ settings.html

เพิ่มรายการที่สังเกตเห็นได้อื่นเพื่อจัดการคุณสมบัติใหม่ เปลี่ยนรหัสนี้:
```
self.width = ko.observable();
```
ใช้รหัสนี้แทน:
```
self.width = ko.observable();
self.imageBannerText = ko.observable();
```
เรียกค่าปัจจุบันสำหรับคุณสมบัติใหม่ เมื่อแผงข้อมูลการตั้งค่าปรากฏขึ้นเป็นครั้งแรก เปลี่ยนรหัสนี้:
```
self.width(data.width);
```
ใช้รหัสนี้แทน:
```
self.width(data.width);
self.imageBannerText(data.imageBannerText);
```
บันทึกการเปลี่ยนแปลงในคุณสมบัติใหม่นี้ เปลี่ยนรหัสนี้:
```
    'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
```
ใช้รหัสนี้แทน:
```
'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
'imageBannerText': self.imageBannerText()
```

เพิ่มอินเตอร์เฟซผู้ใช้เพื่อแสดงฟิลด์ใหม่ เปลี่ยนรหัสนี้:

<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
<input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

ใช้รหัสนี้แทน:

<label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
<input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

<label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
<input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

ซิงโครไนซ์หรืออัปโหลดไฟล์ settings.html

หากคุณต้องรันในทันที ฟิลด์จะปรากฏขึ้น อย่างไรก็ตาม ขนาดของแผงข้อมูลการตั้งค่าจะไม่เปลี่ยนแปลงไปโดยอัตโนมัติ นอกจากนี้ คุณยังต้องอัปเดตรายการการรีจิสเตอร์ components.json เป็นขนาดใหม่ด้วย เนื่องจากคุณได้เพิ่มขนาดของแผงข้อมูลแล้ว

ดาวน์โหลดไฟล์ appinfo.json ซึ่งอยู่ในระดับเดียวกับไดเรคทอรี assets/ สำหรับองค์ประกอบของคุณ และอัปเดตขนาดของแผงข้อมูลการตั้งค่า เปลี่ยนรหัสนี้:
```
"settingsHeight": 90,
```
ใช้รหัสนี้แทน:
```
"settingsHeight": 160,
```
ซิงโครไนซ์หรืออัปโหลดไฟล์ appinfo.json

ตรวจสอบผลลัพธ์สำหรับขั้นตอนที่ 3

ตอนนี้ คุณจะสามารถมองเห็นและป้อนคุณสมบัติใหม่ที่คุณเพิ่มในแผงข้อมูลการตั้งค่าได้

รีเฟรชเพจของคุณในไซต์ของคุณเพื่อให้ตัวสร้างไซต์สามารถนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบได้
กำหนดให้เพจอยู่ในโหมดแก้ไข
ลากและวางองค์ประกอบของคุณลงในเพจ
เปิดแผงการตั้งค่ากับองค์ประกอบของคุณ
คลิกปุ่ม การตั้งค่าที่กำหนดเอง

คุณจะเห็นฟิลด์สองฟิลด์ปรากฏขึ้นสำหรับคุณสมบัติแต่ละรายการที่คุณมีอยู่ในไฟล์ settings.html ของคุณ

ดำเนินการต่อไปยัง ขั้นตอนที่ 4: แสดงคุณสมบัติใหม่ในองค์ประกอบ