Contents Now Platform Capabilities Previous Topic Next Topic Embed a widget multiple times with custom options Subscribe Log in to subscribe to topics and get notified when content changes. ... SAVE AS PDF Selected Topic Topic & Subtopics All Topics in Contents Share 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. 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 Scriptfunction() { // 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. Figure 2. Sample clock options On this page Send Feedback Previous Topic Next Topic
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. 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 Scriptfunction() { // 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. Figure 2. Sample clock options
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. 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 Scriptfunction() { // 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. Figure 2. Sample clock options