Paso 3: Revisar la estructura de la configuración del componente local

En este paso revisamos la estructura de la configuración especificada para un componente local.

Parecido al archivo render.js en el directorio /assets, hay un archivo settings.html creado previamente en el mismo directorio. El archivo settings.html representa los datos de configuración personalizada para su componente. En la implantación por defecto, hay una propiedad imageWidth única en los datos de configuración personalizada.

Para revisar la estructura del componente local:

1. Mediante el cliente de sincronización de escritorio de Oracle Content Management, localice el componente y sincronícelo con el sistema de archivos.

   Si no tiene el cliente de sincronización de escritorio, puede seleccionar el componente en el separador Componentes de la interfaz web de Oracle Content Management y aumentar detalle para ver los archivos.

2. Si muestra los archivos del componente, verá los siguientes archivos:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

Abra el archivo settings.html en el directorio /assets y revise el contenido. A diferencia del archivo render.js, el archivo settings.html emplea un marco en línea en el panel de configuración en el creador de sitios; esa es la razón por la que necesita acceso a los archivos de soporte para representar correctamente en el marco en línea. El creador de sitios en necesario para gestionar el sitio con objeto de poder aislar los errores en el código de JavaScript del creador de sitios, razón por la que el archivo settings.html usa un marco en línea.

Estas son las áreas principales del archivo settings.html:

• Plantilla Knockout para representar el panel de configuración.

  <!-- 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 -->

• Manejador de enlace personalizado para ajustar la altura del marco en línea una vez se haya representado el panel de configuración.

  ko.bindingHandlers.scsCompComponentImpl

• Un ViewModel de Knockout para aplicarlo a la plantilla de Knockout.

  SettingsViewModel

Estos son los elementos principales de SettingsViewModel:

• Suscripciones al ciclo de vida del componente.

• Inicialización del componente:

  • Asegúrese de que el componente no se representa hasta que todos los datos se hayan recuperado. Esto se maneja con observables de Knockout.

    self.initialized = ko.observable(false);

  • Asegúrese de que no intentamos actualizar los datos hasta que estemos preparados.

    self.saveData = false;

  • Obtenga los valores iniciales para cualquier propiedad necesaria. Esto se maneja con devoluciones de llamada para recuperar los datos.

        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;
        });

• Guarde los cambios de propiedad de los datos de configuración personalizada.

      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);

Para agregar otra propiedad que desee capturar, son necesarios los siguientes pasos:

1. Actualice la interfaz de usuario para mostrar el valor nuevo.

2. Inicialice el valor al valor actual almacenado en el componente.

3. Guarde cualquier cambio del valor de nuevo en el componente.

Para agregar otra propiedad al componente personalizado, realice los siguientes cambios en el archivo settings.html:

1. Agregue otro observable para manejar la nueva propiedad. Cambie este código:

   self.width = ko.observable();

   Use este código en su lugar:

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Obtenga cualquier valor actual para la nueva propiedad cuando el panel de configuración se muestre por primera vez. Cambie este código:

   self.width(data.width);

   Use este código en su lugar:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Guarde los cambios de esta nueva propiedad. Cambie este código:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Use este código en su lugar:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Agregue una interfaz de usuario para mostrar el nuevo campo. Cambie este código:

   <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">

   Use este código en su lugar:

   <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">

5. Sincronice o actualice el archivo settings.html.

Si lo ejecutara ahora, aparecería el campo. Sin embargo, el tamaño del panel de configuración no cambia de manera automática. Al aumentar el tamaño del panel, debe actualizar la entrada de registro components.json al nuevo tamaño.

1. Descargue el archivo appinfo.json, que está en el mismo nivel que el directorioassets/ de su componente, y actualice el tamaño del panel de configuración. Cambie este código:

   "settingsHeight": 90,

   Use este código en su lugar:

   "settingsHeight": 160,

2. Sincronice o actualice el archivo appinfo.json.