Step 9: Create a Distinct Title for Each Instance of the Component

This step explains how to create distinct titles for different instances of your component.

When you drop your component onto the page, you will have noticed the banner for your component reads: A_Local_Component. While this is fine if the user only drops one of your components onto the page, you may want to create distinct titles so the user can distinguish between different instances of your component.

You can use the Sites SDK to update the title for the component. In this step, you will update it based on the "imageBannerText" property.

To update the title, edit the render.js file and add this code to your SampleComponentViewModel object:

self.updateDescription = ko.computed(function () {
  SitesSDK.setProperty('description', self.imageBannerText());
});

This Knockout computation will update the description for your component whenever the imageBannerText observable changes.

Check the Results for Step 9

1. Refresh your page in your site so Site Builder can pick up changes to the component.

2. Take the page into Edit mode.

3. Drop your component onto the page.

4. Bring up the Settings panel against your component.

5. Click the Custom Settings button.

6. Change the Image Banner to Workplace.

7. Close the Settings panel and hover your cursor over your component to show the banner.

   You should now see A_Local_Component Workplace displayed.

Continue to Step 10: Use Nested Components with In-Line Editing.