Embed a widget multiple times with custom options

Embed the cool clock widget multiple times using custom options.

Before you begin

Role required: admin or sp_admin

About this task

Create a widget that embeds multiple instances of the cool clock widget, each with a different time zone and title. Open the cool clock widget in the Widget Editor to see widget options referenced in the HTML template and the Client Script.

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

Procedure

  1. Clone the Cool Clock widget with the name Embedded clock.
  2. 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]));
        }
    })();

Result

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

Figure 2. Sample clock options
Embedded clock with four embedded widgets with four different time zones