Loading Widgets

Every widget has a single JavaScript file as it's entry-point. It should be loaded using a <script> tag by setting the src attribute to the desired widget found here. To load multiple widgets on a page, use multiple <script> tags, one per widget.

<script src="https://content-services.dtn.com/ui-widgets/local-weather-widget/local-weather-widget-1.0-latest.js"></script>

We recommend placing these <script> tags after all other HTML on the page, just before the closing </body> tag.

<body>
  <script src="https://content-services.dtn.com/ui-widgets/local-weather-widget/local-weather-widget-1.0-latest.js"></script>
  <script src="https://content-services.dtn.com/ui-widgets/futures-chart-widget/futures-chart-widget-1.0-latest.js"></script>
  <script>
    // Although this script is not loaded remotely,
    // it's execution will be deferred until the
    // previous scripts have been loaded.
  </script>
</body>

After the script(s) has finished loading the widget(s) is available for use. They will all be available under the window.dtn namespace.

Self-Hosting Widgets

You may wish to host the widget's JavaScript files yourself. That is perfectly acceptable, the widget's make no assumption about where they are hosted. Keep in mind any patches or bug fixes shipped to the -latest release channel would not be pushed to any self-hosted files.

The window.dtn Namespace

Each widget <script> on a page will be available under the window.dtn namespace after it is loaded.

window.dtn.map.createInteractiveMapWidget;
window.dtn.map.createWeatherGraphicsWidget;

Rendering Widgets

Each widget will have a corresponding function, called a "factory function", used to create instances of it. Each widget requires a containing element be defined on the page before you can create it.

<div id="widget-container"></div>

Every widget is created by calling it's factory function with a valid configuration object.

let configuration = {
  container: "#widget-container",
  apiKey: "valid-dtn-api-key",
};
window.dtn.localWeather.createLocalWeatherWidget(configuration);

Responsive Containers

In typical responsive websites the layouts may change when the browser's viewport dimensions change. Because of that, widgets are responsive to their container, not the viewport. In other words the widgets will adjust their layout based on the size of the containing element rather than the browser's viewport.