Step 11: Support Different Layouts

In this step we will review layouts that allow the user to alter how the component displays.

A custom component can support any number of layouts that you want to allow the user to choose. Each of these layouts will alter how the custom component displays. Layouts are another extension to the registration data.

To review the three layouts supported in the sample code, review the "componentLayouts" entry in the appinfo.json file

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

If you bring up the Settings panel against the custom component, you will see an option to switch between layouts. To enable your component to react to the change in selection, the render.js file has code to get the currently selected value and listen for changes to this value.

Edit the render.js file and look at the SampleComponentViewModel object.

There is a layout observable, which is referenced in the template:
```
self.layout = ko.observable();
```

There is an update function to handle whenever this value changes:

    self.updateComponentLayout = $.proxy(function (componentLayout) {
      var layout = componentLayout ? componentLayout : 'default';
      self.layout(layout);
      self.alignImage(layout === 'right' ? 'right' : 'left');
      self.showTopLayout(layout === 'top');
      self.showStoryLayout(layout === 'default' || layout === 'right');

      self.componentLayoutInitialized(true);
    }, self);

The initialization code gets the original value for the layout and calls the update function:

SitesSDK.getProperty('componentLayout', self.updateComponentLayout);

The property change listener checks for any changes to this property and calls the update function:

self.updateSettings = function (settings) {
  if (settings.property === 'componentLayout') {
    self.updateComponentLayout(settings.value);
  } else if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
  }
};

SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

Finally the sampleComponentTemplate template object has code to reflect changes in this value:

'<!-- ko if: alignImage() === \'right\' -->' +

Together, these changes allow you to select your layout in the Settings panel and have the component update.

Check the Results for Step 11

Refresh your page in your site so Site Builder can pick up changes to the component.
Take the page into Edit mode.
Drag and drop your component onto the page.
Bring up the Settings panel against your component.
Select Image Right from the Layout property.

At this point the component will update to show the "<scs-image>" component.

Continue to Step 12: Define Custom Styles.