Embed a widget multiple times with custom options

Use the steps in this example to embed the cool clock widget multiple times using different custom options.

Each instance of the cool clock widget has a different time zone and title. Open the cool clock widget in the Widget Editor to see an example of how widget options are used in the HTML template and the Client Script. For more information on widget options, see Widget instance options.

Cool Clock widget with c.options.title, c.options.c_color, and c.options.zone highlighted — Figure 1. Cool Clock widget with Options highlighted

Clone the Cool Clock widget with the name Embedded clock

Replace the code blocks with the following:

HTML Template

<div class="panel panel-default">
  <div class="panel-heading">Time across the US</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-3" ng-repeat="myClock in c.data.clocks">
        <sp-widget widget="myClock"></sp-widget>
      </div>
    </div>
  </div>
</div>

CSS

.panel {
    margin-top: 10px;
}

Client Script

function() {
    // nothing to do here...
}

Server Script

(function() {
    var options = [
        {zone: "America/Los_Angeles", title: "San Diego"},
        {zone: "America/Denver", title: "Denver"},
        {zone: "America/Chicago", title: "Chicago"},
        {zone: "America/New_York", title: "New York"}
    ];

    data.clocks = [];
    for (var i in options) {
        data.clocks.push($sp.getWidget("widget-cool-clock", options[i]));
    }
})();

Each instance of the clock in the embedded clock widget appears with a different time zone.

Versions

Contents