ขั้นตอนที่ 16: การจัดการข้อมูล

โฟลเดอร์เนื้อหา Oracle Content Management

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

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

สำหรับองค์ประกอบที่กำหนดเองที่มีส่วนร่วมในรอบการใช้งานของข้อมูลนี้ องค์ประกอบที่กำหนดเองจะต้องแจ้งให้ Oracle Content Management ทราบเกี่ยวกับข้อมูลต่างๆ ที่องค์ประกอบต้องการมอบหมายให้บริการจัดการแทน นอกจากนี้ องค์ประกอบที่กำหนดเองจะต้องใช้ API ของ Oracle Content Management ในการเลือกข้อมูลอีกด้วย เพื่อให้เราทราบถึงวิธีการจัดการ เนื่องจากการดำเนินการนี้มีการสร้างสำเนาข้อมูลด้วย

จัดการ URL ต่างๆ

URL ไปยังข้อมูลจะเปลี่ยนแปลงไปตามจำนวนเกณฑ์

• URL ของรันไทม์ไปยังองค์ประกอบแตกต่างจาก URL ของตัวสร้างไซต์ไปยังองค์ประกอบ

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

• การวาง componentGroup ลงบนเพจจะเป็นการสร้างสำเนาใหม่ให้กับข้อมูลที่อ้างอิงโดยองค์ประกอบใน componentGroup

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

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

จัดการข้อมูล

SDK API ของไซต์เหล่านี้สามารถใช้สำหรับการจัดการข้อมูลต่างๆ ได้

SitesSDK.getProperty('componentAssets', callback);

• เรียกอาเรย์ของข้อมูลปัจจุบัน

• รายการข้อมูลแต่ละรายการประกอบด้วย:

  • id: ID ที่ไม่ซ้ำกันสำหรับข้อมูล

  • title: เมตะดาต้าชื่อของ Oracle Content Management

  • description: เมตะดาต้าคำอธิบายของ Oracle Content Management

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

  • source: URL ที่ใช้งานมาโครกับข้อมูล ค่าที่จะเปลี่ยนไปตลอดเวลา และไม่ควรอ้างอิงกับองค์ประกอบของคุณ แต่ต้องได้รับการบันทึกเป็นส่วนของข้อมูล

  • url: URL แบบเต็มไปยังข้อมูลตามคอนเท็กซ์ที่มีการเรียก getPropert()

SitesSDK.setProperty('componentAssets', [assets]);

• เรียกค่านี้เพื่อบันทึกข้อมูลทั้งหมดที่คุณต้องการให้ Oracle Content Management จัดการแทน

• หากคุณไม่เรียกค่านี้ ระบบจะไม่บันทึกข้อมูลใดๆ

• ระบบจะลบข้อมูลต่างๆ ที่ไม่อยู่ในอาเรย์นี้เมื่อเผยแพร่ไซต์

• พารามิเตอร์ assets เป็นอาเรย์ของข้อมูลในรูปแบบเดียวกับที่คุณได้รับคืนจาก getProperty และยังได้รับคืนจาก filePicker อีกด้วย

  หมายเหตุ:

  ไม่ได้จัดเก็บค่า url ระบบจะสร้างค่าดังกล่าวขึ้นแบบไดนามิคเมื่อคุณขอข้อมูล

SitesSDK.filePicker(options, callback);

• API ที่ใช้เปิดตัวเลือกไฟล์เพื่อเลือกลิสต์ข้อมูล

• API นี้จะเรียกการเรียกกลับเมื่อการเลือกข้อมูลที่ส่งผ่านในอาเรย์ข้อมูลที่เลือกไว้สำเร็จแล้ว

• ระบบจะไม่บันทึกข้อมูลใดๆ ในขั้นตอนนี้ และขึ้นอยู่กับองค์ประกอบในการเรียก setProperty('componentAssets', [assets]); เพื่อบันทึกรายการต่างๆ จากการเลือกนี้รวมกับข้อมูลอื่นๆที่จะบันทึก

ตัวอย่างของข้อมูลที่เลือก

ส่วนนี้จะแสดงวิธีการเลือกข้อมูล, จัดเก็บ ID ของข้อมูล และดึงข้อมูลค่าตามจริงอีกครั้งจากข้อมูลที่จัดเก็บ

1. แก้ไขไฟล์ settings.html

2. เปลี่ยนออบเจกต์เทมเพลทให้รวม การเลือกรูปภาพ

   <div>
       <!-- Image selection -->
       <label id="imageLabel" for="imageAsset" class="settings-heading" data-bind="text: 'Image'"></label>
       <input id="imageAsset" data-bind="value: imageName" readonly class="settings-text-box">
       <button id="imageSelect" type="button" class="selectbutton" data-bind="click: showFilePicker">Select Image</button>
   </div>

3. เปลี่ยน viewModel เพื่อเพิ่มรายการที่สังเกตเห็นได้เพื่อจัดเก็บ ID ของข้อมูลที่เลือก

   self.imageID = ko.observable();

4. เปลี่ยน viewModel เพื่อจัดการการเลือกข้อมูลโดยการเปิดตัวเลือกไฟล์และแสดงชื่อของข้อมูลที่เลือก

   //
   // handle component assets
   //
   self.assets = []
    
   // bring up a file picker to select the assets
   self.showFilePicker = function () {
       // select an image
       SitesSDK.filePicker({
           'multiSelect': false,
           'supportedFileExtensions': ['jpg', 'png']
       }, function (result) {
           if (result.length === 1) {
               // update the array of assets
               self.assets = result;
    
               // update the image in customSettingsData
               self.imageID(result[0].id);
           }
       });
   };
    
   // update the display name based on the assets
   self.imageName = ko.computed(function () {
       var imageName = '',
           imageID = self.imageID();
       for (var i = 0; i < self.assets.length; i++) {
           if (self.assets[i].id === imageID) {
               imageName = self.assets[i].fileName;
               break;
           }
       }
    
       return imageName
   }, self); 

5. อัปเดต viewModel เพื่อให้เรียกข้อมูลเป็นอันดับแรกก่อนการเรียก customSettingsData รหัสนี้จะทำให้มีการเรียกใช้ self.imageName เมื่อรายการที่สังเกตเห็นได้ self.ImageID() เปลี่ยนแปลงไปอีกด้วย

   SitesSDK.getProperty('componentAssets', function (assets) {
       self.assets = assets;
       SitesSDK.getProperty('customSettingsData', function (data) {
           //update observable
           self.imageWidth(data.imageWidth);
           self.imageID(data.imageID);
           self.titleText(data.titleText);
           self.userText(data.userText);
    
           // note that viewModel is initialized and can start saving data
           self.initialized(true);
           self.saveData = true;
       });
   });

6. สุดท้าย อัปเดตฟังก์ชัน save เพื่อบันทึก imageID และช่วยให้แน่ใจว่ามีการอัปเดต componentAssets ด้วยลิสต์ข้อมูลอ้างอิงของคุณ

   self.save = ko.computed(function () {
       var saveconfig = {
           'imageWidth': isNaN(self.imageWidth()) ? self.imageWidth() : self.imageWidth() + 'px',
           'imageID': self.imageID(),
           'titleText': self.titleText(),
           'userText': self.userText()
       };
    
       // store the selected asset and update custom settings
       if (self.saveData) {
           SitesSDK.setProperty('componentAssets', self.assets);
           SitesSDK.setProperty('customSettingsData', saveconfig);
       }
   }, self);

ตรวจสอบผลลัพธ์สำหรับข้อมูลที่เลือก

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

2. กำหนดให้เพจอยู่ในโหมดแก้ไข

3. ลากและวางองค์ประกอบของคุณบนเพจ

4. เปิดแผงข้อมูลการตั้งค่า

5. คลิกปุ่ม เลือกรูปภาพ

6. เบราส์ (หรืออัปโหลด) แล้วเลือกรูปภาพ

   โปรดทราบว่าชื่อของรูปภาพจะได้รับการจัดเก็บโดยแสดงรูปภาพที่เลือกไว้

7. ปิดแผงข้อมูลการตั้งค่า

8. เปิดแผงข้อมูลการตั้งค่าอีกครั้ง

   โปรดทราบว่าชื่อของรูปภาพจะแสดงขึ้นอีกครั้ง

ตัวอย่างของข้อมูลที่แสดง

ส่วนนี้จะแสดงวิธีการเรียกข้อมูลและแสดงข้อมูลดังกล่าวในองค์ประกอบของคุณ นอกจากนี้ ยังมีการอัปเดตองค์ประกอบแบบไดนามิค เมื่อค่าในแผงข้อมูลการตั้งค่าของคุณเปลี่ยนแปลงไป

1. แก้ไขไฟล์ render.html

2. อัปเดตเทมเพลทเพื่อรวมข้อมูลของคุณ

   <!-- ko if: imageURL -->
   <div style="flex-shrink:0;">
       <img data-bind="attr: {style: imageStyle, id: 'imageId', src: imageURL, alt: '', title: ''}, click: imageClicked" />
   </div>
   <!-- /ko -->

3. ใน viewModel ให้สร้างรายการที่สังเกตเห็นได้สองรายการเพื่อเรียก imageID จาก customSetttingsData และจัดเก็บ imageURL ที่เรียกข้อมูลจากลิสต์ข้อมูลที่จัดเก็บไว้

   self.imageID = ko.observable();
   self.imageURL = ko.observable();

4. อัปเดต viewModel เพื่อที่เมื่อใดก็ตามที่ imageID เปลี่ยนไป ระบบจะเรียก URL ข้อมูลรูปภาพที่สอดคล้องกัน

   self.imageID.subscribe(function (imageID) {
       // whenever the image changes get the updated referenced asset
       SitesSDK.getProperty('componentAssets', function (assets) {
           for (var i = 0; i < assets.length; i++) {
               if (assets[i].id === imageID) {
                   self.imageURL(assets[i].url);
                   break;
               }
           }
       });
   });

5. อัปเดต viewModel เพื่อให้เรียกข้อมูล ID จาก customSettingsData

ตรวจสอบผลลัพธ์สำหรับข้อมูลที่แสดง

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

2. กำหนดให้เพจอยู่ในโหมดแก้ไข

3. ลากและวางองค์ประกอบของคุณบนเพจ

4. เปิดแผงข้อมูลการตั้งค่า

5. คลิกปุ่ม เลือกรูปภาพ

6. เบราส์ (หรืออัปโหลด) แล้วเลือกรูปภาพ

   โปรดทราบว่าชื่อของรูปภาพจะได้รับการจัดเก็บโดยแสดงรูปภาพที่เลือกไว้

7. ปิดแผงข้อมูลการตั้งค่า

   ในขั้นตอนนี้ คุณจะเห็นรูปภาพที่เลือกไว้ของคุณที่แสดงอยู่ในองค์ประกอบ

ดำเนินการต่อไปยัง ทบทวนบทแนะนำ