Build the Basic H1 Component

You can remove most of the contents in seeded files to create an H1 component. It displays the heading text that you seed when you create viewModel. Later you can provide settings and styles for the component.

To review the structure of your local component:

1. Using the Oracle Content Management Desktop Sync App, locate your component and sync it with the file system.

   • In a recent version of the Desktop Sync App, choose the Start Sync or Select Folders to Sync option.

   • If you don't have the Desktop Sync App, you can select the component on the Components tab of Oracle Content Management and then drill down to see the files.

2. If you list the files under the component, you can see these files:

   • The component files in the assets folder:

     • render.mjs

     • settings.html

   • appinfo.json: JSON file with the component description.

     See About Developing Components.

   • folder_icon.jpg: Icon that is displayed in the Component Catalog.

To build an H1 Component:

1. Open the appinfo.json file and replace its contents with the following lines:

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

2. Open the render.mjs file in the assets folder in your favorite text editor.
3. Change the contents of render.mjs to the following lines:

   import CommonUtils from './common.mjs';
    
   // The Custom Component class will be the "default" export from the module
   export default class {
    
       constructor(args) {
           // store the args
           this.mode = args.viewMode;
           this.id = args.id;
    
           // store the path to the <component>/assets folder
           this.assetsPath =
               import.meta.url.replace('/render.mjs', '');
    
           // get the OCM environment resources
           this.sitesSDK = args.SitesSDK;
           this.Mustache = SCSRenderAPI.getMustache();
    
           // add in the event listeners
           this.addEventListeners();
       }
    
       // add in the listeners for whenever the settings values change
       // in this case, we want to re-render the component on the screen
       addEventListeners() {
           // listen for settings update
           this.sitesSDK.subscribe(this.sitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, (props) => {
               if (props.property === 'customSettingsData') {
                   this.renderComponent({
                       customSettingsData: props.value
                   });
               }
           });
       }
    
       // insert the component's HTML into the page
       // after it has added the component, it applies any clickHandlers to elements that were added to the page
       renderComponent(args) {
           Promise.all([SCSRenderAPI.importText(this.assetsPath + '/template.html'),
               SCSRenderAPI.importCSS(this.assetsPath + '/styles/design.css')
           ]).then((componentResources) => {
               const componentTemplate = componentResources[0];
    
               // use the common code to generate the HTML for this component based on the componentLayout and customSettingsData
               const componentHTML = CommonUtils.createHTML({
                   Mustache: this.Mustache,
                   componentLayout: this.sitesSDK.getProperty('componentLayout'),
                   customSettingsData: this.sitesSDK.getProperty('customSettingsData'),
                   id: this.id,
                   template: componentTemplate
               }, args);
    
               // replace the content of the container with the rendered HTML
               this.container.innerHTML = componentHTML;
           });
       }
    
       // the render method is called to render the component dynamically onto the page
       render(container) {
           this.container = container;
           this.renderComponent();
       }
   }

4. In the assets folder, create a new file, render.html, to be the simple HTML template of the component.
5. Use the following contents in the template.html file:

   <h1>{{headingText}}</h1>

6. Also in the assets folder, create a new file called common.mjs and add the following code:

   // Common Utilities Class
   export default class {
       constructor() {}
    
       static createHTML(context, args) {
           // extract all the required dependencies from the context
           const Mustache = context.Mustache,
               customSettingsData = context.customSettingsData,
               id = context.id,
               template = context.template;
    
           // extract the original values (or apply deafult values)
           const customData = (args && args.customSettingsData) || customSettingsData || {};
           customData.nls = customData.nls || {};
    
           // create the model
           const model = {
               headingText: customData.nls.headingText || ''
           };
    
           // render the component
           try {
               return Mustache.render(template, model);
           } catch (e) {
               console.log('Failed to expand Mustache template.', e);
               return '';
           }
       }
   }

   This file is called from the render.mjs file.

   The component assets folder now contains the following files.

   • template.html

   • render.mjs

   • settings.html

   • common.mjs

Add the new H1 component to your page (Checkpoint 2).