Using the widgets

Handling Cancel events in the Selection Widget

The Cancel button is not handled directly by the selection widget, because the selection widget cannot know what should happen if the user cancels selection. The application that embeds the selection widget can react to the user pressing cancel using the following JavaScript code:

window.addEventListener('message', function(event) {
  if (event.data.event === 'selectionWidgetCancel') {
    // Do something when the user clicks "Cancel"
  }
});

Enabling selection of multiple assets

To enable selection of multiple assets in the Selection Widget, add ms=true to the query string when calling up the widget. 

When using this query string parameter to enable the selection of multiple assets, instead of sending a single json object, the data is sent in an array of assets - see Event Payload below. This is the case even if only one asset is selected when multi-select is enabled.

function listener(event) {
    if (event.origin != tenantURL)
        return;
    if (event.data.event === 'assetSelected') {
        if (Array.isArray(event.data.asset)) {
            // here you work with event.data.asset as an array of assets:
            var assets = event.data.asset;
            for (var i = 0, l = assets.length; i < l; i++) {
                var asset = assets[i];
                alert("This asset was selected: " + asset.href);
            }
        } else {
            // single selection is in place
            alert("An asset was selected: " + event.data.asset.href);
        }
    }
}
addEventListener("message", listener, false);

event.data === {
  event: 'assetSelected',
  asset: [
    {
      href: 'assetHref1',
      ...
    },
    {
      href: 'assetHref2',
      ...
    },
    {
      href: 'assetHref3',
      ...
    },
    ...
  ]
} 

Controlling user access to feature tabs in the widget

After choosing an image with the selection widget, FotoWeb displays the Export widget to let the user adjust the image size as well as crop and style the exported image. The options available here can be managed in two ways:

• ​By enabling/disabling features in the FotoWeb site configuration in the Site Configuration. 
• By sending parameters to the export widget in the URL. This can only be used to hide tabs. These parameters cannot be used to show tabs that are disabled in the site configuration settings described above.

http://fwserver/fotoweb/widgets/publish?i=%2Ffotoweb%2Farchives%2F5003-Trip%2520pictures%2FPrivate%2FDSC00697jpg.info&crop=false

HTTPS

If FotoWeb widgets are to be embedded into web applications using HTTPS, then content security policy may require FotoWeb to use HTTPS as well. Otherwise, loading the widget may be blocked and only a blank page, dialog, or iFrame may be shown.

Note: It is generally strongly recommended to run FotoWeb, as well as any other web application, web service, or web page, on HTTPS only.

iFrames

Generally, FotoWeb cannot be embedded into iFrames on domains that are not of the same origin. However, the embeddable widgets (Selection Widgets and Export Widget) are exempt from this rule. These widgets work in an iFrame because they are designed to be embedded into other applications as part of integrations.

The following rules apply:  

1. Internal iframes (Fotoweb pages embedding other FotoWeb pages) are allowed.

2. Same origin iframes (third-party page on the same host embeds FotoWeb) are allowed.

3. Cross-origin iframes (third-party page on a different host embeds FotoWeb) are blocked.

4. Cross-origin iframes embedding the widgets are allowed.

You can embed an application using the FotoWeb widgets into an HTML <iframe> on some other web page or web application. For security reasons, the FotoWeb login form cannot be loaded into an iFrame. Therefore, some extra work is required in such scenarios.

As an example, consider the following setup:

• A FotoWeb site, e.g., acme.fotoware.cloud.
• A CMS system, e.g., blog.coyote.com.
• A CMS plugin from a third party, apps.acme.com.

In this example, the CMS system embeds the plugin in an iFrame, and the plugin is an application using embeddable FotoWeb widgets which connect to the FotoWeb site.

When the user authorizes the plugin to connect to FotoWeb, the iFrame displays a blank page instead of a FotoWeb login form because of a content security policy. The following approach can be used to work around this limitation:

1. Instead of navigating to the authorization URL (https://acme.fotoware.cloud/fotoweb/oauth2/authorize/...) directly, open it in a new browser tab or window (authorization tab).
2. Use browser local storage and storage events for communication between the main application (in the iFrame) and the authorization tab.

This authorization flow SHOULD be triggered by a user action (the user selecting  Log in, for example), so the browser will not block the authorization tab as a potentially unwanted popup.