Skip to main content

 

Documentation & User Guides | FotoWare

Selection Widget Integration

Introduction

The Selection Widget is implemented as an HTML application that is designed to be embedded into other html based systems. It can also be embedded into native applications by using frameworks that support web components embedded into the user interface.

HTML Example

To embed the application, simply create an IFRAME in the DOM structure of the main application (owner), and set the src property to: http://[FOTOWEBHOST]/fotoweb/widgets/selection

<HTML>
    <HEAD>
        <TITLE>The Main application</TITLE>
    </HEAD>
    <BODY>
        <!--code of the main application -->
        <IFRAME src= "http://[FOTOWEBHOST]/fotoweb/widgets/selection" />
    </BODY>
</HTML>

Javascript Example

When you click select on an assets, the Selection Widget sends back an event that contains a data.asset object. This will contain all the information about the asset, including metadata, renditions and the href needed to access the asset through the FotoWeb API's.

function listener(event) {
                               var url = 'http://[FOTOWEBHOST]';
                               if (event.origin != url) {
                                               return;
                               }
                               var data = event.data.asset;
                               if (event.data.event === 'assetSelected') {
                                               alert("An asset was selected: " + data.href);
                               }
                }
               
                if (window.addEventListener) {
                               addEventListener("message", listener, false);
                }
                else {
                               attachEvent("onmessage", listener);
                }
  • Was this article helpful?