เพิ่มข้อมูลที่ผู้ใช้ระบุในองค์ประกอบ HTML

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

ในการเพิ่มข้อมูลที่ผู้ใช้ระบุในองค์ประกอบ HTML ให้ทำดังนี้

อัปเดตเทมเพลท HTML ในไฟล์ render.html เพื่อรวมอีลิเมนต์ข้อมูลที่คุณต้องการ ตัวอย่างต่อไปนี้จะใช้ภาษาเทมเพลท JS ของ Mustache จึงต้องเพิ่มอีลิเมนต์ข้อมูลโดยใช้รูปแบบคำสั่ง {{ and }} ดังนี้
```
<ul class="wrapper"> 
  <li class="box"> 
     <h1 class="title">{{title1}}</h1> 
     <p class="text">{{text1}}</p> 
  </li> 
  <li class="box"> 
     <h1 class="title">{{title2}}</h1> 
     <p class="text">{{text2}}</p> 
  </li> 
  <li class="box"> 
     <h1 class="title">{{title3}}</h1> 
     <p class="text">{{text3}}</p> 
  </li> 
  <li class="box"> 
     <h1 class="title">{{title4}}</h1> 
     <p class="text">{{text4}}</p> 
  </li> 
</ul>
```

ระบุค่าดีฟอลต์สำหรับฟิลด์ข้อมูลต่อไปนี้ โดยแก้ไขเนื้อหาของไฟล์ appinfo.json ในองค์ประกอบ HTML ของคุณ:

{
  "id": "html-component-id",

  "settingsData": {
    "settingsHeight":600,
    "settingsWidth": 300,
    "settingsRenderOption": "dialog",
    "componentLayouts": [],
    "triggers": [],
    "actions": []
  },
  "initialData": {
    "styleClassName": "html-component",
    "customSettingsData": {
      "title1":"One",
      "title2":"Two",
      "title3":"Three",
      "title4":"Four",
      "text1":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "text2":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "text3":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "text4":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    "nestedComponents": []
  }
}

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

<!DOCTYPE html> 
<html lang="en"> 
<head>
   <!-- only allow embedding of this iFrame in SCS --> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

   <title>H1 Mustache Component</title> 

  <!-- include sample apps styling --> 
  <link href="/_sitescloud/renderer/app/sdk/css/app-styles.css" rel="stylesheet"> 

   <!-- include supporting files --> 
  <script type="text/javascript" src="/_sitescloud/renderer/app/apps/js/knockout.min.js"></script> 
  <script type="text/javascript" src="/_sitescloud/renderer/app/apps/js/jquery.min.js"></script> 

  <!-- include the Sites SDK --> 
  <script type="text/javascript" src="/_sitescloud/renderer/app/sdk/js/sites.min.js"></script> 
</head> 
<body data-bind="visible: true" style="display:none; margin:0px; padding:0px;background:transparent;background-
image:none;"> 
   <!-- ko if: initialized() --> 
   <div class="scs-component-settings"> 
             <div> 
                      <!-- Width --> 
                      <label id="headingTextLabel" for="headingText" class="settings-heading" data-bind="text: 
'Heading Text'"></label> 
                      <input id="headingText" data-bind="value: headingText" placeholder="Heading" class="settings-
text-box"> 
             </div> 
    </div>
    <div data-bind="setSettingsHeight: true"></div> 
    <!-- /ko --> 
    <!-- ko ifnot: initialized() --> 
    <div data-bind="text: 'waiting for initialization to complete'"></div> 
    <!-- /ko --> 
    <script type="text/javascript"> 

               // set the iFrame height when we've fully rendered 
               ko.bindingHandlers.scsCompComponentImpl = { 
                        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
                                   var body = document.body, 
                                            html = document.documentElement; 

                                   SitesSDK.setHeight(Math.max( 
                                            body.scrollHeight, 
                                            body.offsetHeight, 
                                            html.clientHeight, 
                                            html.scrollHeight, 
                                            html.offsetHeight)); 
                        }
               };
 
               // define the viewModel object 
               var SettingsViewModel = function () { 
                        var self = this;
 
                        // create the observables for passing data 
                        self.headingText = ko.observable('Heading 1'); 

                        // create rest of viewModel 
                        self.initialized = ko.observable(false); 
                        self.saveData = false; 

                        // Get custom settings 
                        SitesSDK.getProperty('customSettingsData', function (data) { 
                                 //update observable 
                                 self.headingText(data.headingText); 

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

                        // save whenever any updates occur 
                        self.save = ko.computed(function () { 
                                  var saveconfig = { 
                                           'headingText': self.headingText() 
                                  }; 

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


            // apply the bindings 
            ko.applyBindings(new SettingsViewModel()); 
   </script> 
</body>

หมายเหตุ:

เนื่องจากคุณได้แก้ไขไฟล์ appinfo.json คุณต้องรีเฟรชเบราเซอร์ และเพิ่มองค์ประกอบของคุณอีกครั้งในเพจเพื่อให้การเปลี่ยนแปลงมีผล

ในการตรวจสอบว่าขณะนี้องค์ประกอบของคุณจะใช้ค่าดีฟอลต์จากไฟล์ appinfo.json และคุณสามารถแก้ไขค่าในแผงข้อมูล การตั้งค่าที่กำหนดเอง (จุดตรวจสอบ 2) ให้ทำดังนี้

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

คำอธิบายภาพ GUID-1E8B54B1-CA2D-463D-A424-E6F3E08A4934-default.png
ตรวจสอบว่าองค์ประกอบ Oracle Content Management ของคุณใช้ HTML และ CSS กับเทมเพลท JS ของ Mustache เพื่อแสดงผลเนื้อหาตามข้อมูลที่คุณป้อนในแผงข้อมูล การตั้งค่าที่กำหนดเอง