Create a component for a Web Form
Describes how to create components for web forms in Optimizely, using the IFrameComponent attribute to embed web forms into the new user interface without the need to write client code.
Note
This legacy content applies to Optimizely Content Management System (CMS) versions 10 and 11.
IFrameComponent
To create an IFrameComponent
, add the IFrameComponent
attribute to the class as follows:
[IFrameComponent(Url="MyWebForm.aspx")]
public class MyWebForm : SystemPageBase {
...
}
The IFrameComponent
attribute is extendable so that you can add additional functionality if needed.
The IFrameComponent
has some required and optional parameters as follows:
Url
(required) – The URL to the source, which is the original URL that loads into theiFrame
when it initializes.ReloadOnContextChange
(optional) – Default value is true. When set to true, theiFrame
is reloaded when the context is changed. The component will add context-specific query parameters to theSourceUrl
attribute (see above). The parameters added areuri
andid
.KeepUrlOnContextChange
(optional) – Default value is false. When set to true, the component keeps the currently loaded URL when reloading theiFrame
otherwise, it reloads the original URL every time the context is changed.MinHeight
(optional) – Default value is 100. The minimum height of theiFrame
.MaxHeight
(optional) – Default value is 500. The maximum height of theiFrame
.
Context awareness
The component keeps track of context changes for times that you need to know when the user has changed the page in the page tree. The component reloads the iFrame
(when ReloadOnContextChange
is set to true) and sets query parameters with information about the context. The following parameters are set:
uri
– The key uniquely identifying the entity in context, for example,epi.cms.pagedata:///3_177
.id
– The ID of the page in the context to be used by thePageBase
class to load the current page.
Change the IFrameComponent properties in the client code
Sometimes, the requirements of a web form change after initialization (such as a reload on context changes). The following example shows how the properties of the IFrameComponent
 are changed from within the iFrame
:
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);
Updated 5 months ago