Loading...
Area: Optimizely CMS
ARCHIVED This content is retired and no longer maintained. See the latest version here.

Recommended reading 

Table of contents

Introduction

This document describes how to create components for web forms using the IFrameComponent attribute. The purpose is making it easy to embed web forms into the new user interface without the need to write client code.

Using the IFrameComponent attribute

To create an IFrameComponent, add the IFrameComponent attribute to the class as follows:

C#
[IFrameComponent(Url="MyWebForm.aspx")]
public class MyWebForm : SystemPageBase
{
...
}

The IFrameComponent attribute is extendable so that additional functionality can be added if needed.

The IFrameComponent has some required and optional parameters as follows:

Url (required)The URL to the source. This is the original URL that is loaded into the iFrame when it is initialized.
ReloadOnContextChange (optional)Default value is true. When set to true, the iFrame is reloaded when the context is changed. The component will add context-specific query parameters to the SourceUrl attribute (see above). The parameters added are uri and id.
KeepUrlOnContextChange (optional)Default value is false. When set to true, the component keeps the currently loaded URL when reloading the iFrame, otherwise it will reload the original URL every time the context is changed.
MinHeight (optional)Default value is 100. The minimum height of the iFrame.
MaxHeight (optional)Default value is 500. The maximum height of the iFrame.

Context awareness

The component keeps track of context changes. This can come in handy when there is a need to know when the user has changed the page in the page tree. The component will reload the iFrame (when ReloadOnContextChange is set to true) and set query parameters with information about the context. The following parameters are set:

uriThe key uniquely identifying the entity in context, for example, epi.cms.pagedata:///3_177.
idThe id of the page in the context to be used by the PageBase class to load the current page.

Changing the IFrameComponent properties in client code

Sometimes the requirements of a web form can change after initialization (for example the need to reload on context changes). See the following example how the properties of the IFrameComponent can be changed from within the iFrame:

JavaScript
var reloadOnContextChange = function (value) {
    // Check that there is a parent available and it got dijit loaded
    if(parent && parent.dijit) {
        // Get all iFrames in the document
        var iframes = parent.document.getElementsByTagName(""IFRAME"");
        for(var i = 0; i < iframes.length; i++) {
            if(iframes[i].contentWindow === window) {
                // Get the dijit widget
                var component = window.parent.dijit.byId(iframes[i].id);
                if(component) {
                    component.reloadOnContextChange = value;
                }
            }
        }
    }
};

reloadOnContextChange(false);
Do you find this information helpful? Please log in to provide feedback.

Last updated: Feb 23, 2015

Recommended reading