Object Picker (5.4)

# How to Configure the Object Picker as an Iframe

After installation, and to use the Object Picker as an iframe, you need to do the following four steps. You may have done some of them already.

# Step 1: Security Settings (Cookies, CORS, CSP)

In order for the iframe to work in modern browsers, the 4ALLPORTAL must allow it to be installed on a third-party platform.

  1. Go to admin snap-in General system configurations/System settings/Security
  2. Set field Cookie SameSite to none
  3. Allow (add) the target origin (your third party domain) in field CORS allowed origins
  4. Scroll to field Content Security Policy (CSP) and set parameter frame-ancestors to the target origin (your third party domain)

For details on security settings, check our security documentation (opens new window).

# Step 2: Layout Configuration

At page startup, the Object Selection receives a layout of the target module, e.g. the DAM. By default, this is the object_selection layout, which you should use as a basis.

With version 4.1 comes an additional layout specified for iframe usage (object_selection/iframe). You can customize this layout to your own needs via layout change.

Please note: It's important for the functionality that the actionButton is connected to the iframeProcessor.

The loaded Object Picker layout can be configured freely, like all layouts. However, this is not necessary for standard use cases. The displayed search renderer is search/object_selection, the simple renderer in the list view is simple/object_selection/list and the special layout object_selection/iframe already contains the necessary adjustments for use as an iframe.

For details on layouts and layout changes, check our layouts documentation (opens new window).

# Step 3: Installation in the Third-party Application

The Object Picker is called via URL e.g. https://my.4allportal.com/4allportal-object_selection/object_selection.html?module=file&view=object_selection%2Fiframe.

In order to embed the iframe into another application, you have three options:

  1. Let the user log in within the iframe with their own credentials (recommended).
  2. Create a session beforehand, which is then embedded into the URL ...&session=00000000-0000-0000-0000-000000000000.
  3. Write the user's credentials directly into the URL ...&username=object_picker_user&password=top_secret (not recommended).

# Step 4: Get User Input

After the Object Picker has been correctly implemented and can be used by the user, the result must also be processed accordingly. For an iframe, the PostMessage API (opens new window) of the browser is used. An array with the IDs of the selected objects is passed via this communication channel, which can then be used for your own needs.

Example:

const myIframe = document.getElementById('my_iframe');
window.addEventListener('message', (e) => {
    if(e.source !== myIframe.contentWindow) {
        return;
    }

    e.data.forEach((id) => {
        // do something with that id
    });
});

# Troubleshooting

  • If the page does not load (the 4ALLPORTAL loader does not disappear), please check the CORS, CSP and Cookie settings of your 4ALLPORTAL. The Object Picker feature only works with HTTPS and the above settings.
  • If something does not work as desired, the browser console should be checked for errors.

Installation →

Request missing documentation