Area:
This topic describes how to create a component in the Optimizely user interface.
How it works
You can use the CMS-extended Framework IFrameComponent attribute to create a component for a web form or user control.
To create an IFrameComponent, add the IFrameComponent attribute to the class as follows:
[IFrameComponent(UrlFromUi="Edit/MyUserControl.ascx")]
public class MyUserControl
{
...
}The CMS extension of the IFrameComponent has the following additional parameters:
| UrlFromUtil | Optional. The URL to the source, relative the Utils folder. Used instead of Url property. |
| UrlFromUi | Optional. The URL to the source, relative the UI folder. Used instead of Url property. |
User controls
If you use a control with ascx file name ending in any of the Url properties, it is automatically wrapped in an EPiServer.PageBase page.
Creating ASP.NET form component
Additionally to using User Control (ascx), URL to iframe component can be WebForm (aspx). For example:
[IFrameComponent(UrlFromUi = "/Edit/TestComponentPage.aspx", Title = "test component page", Description = "test component page description", Categories = "Content", PlugInAreas = PlugInArea.Navigation, IsAvailableForUserSelection = true)]
public class TestPageComponent
{
}and WebForm code:
<%@ Page Language="c#" Codebehind="TestComponentPage.aspx.cs" AutoEventWireup="False" Inherits="AlloyMvcTemplates.Edit.TestComponentPage" Title="PlugIn" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>HelloWorld</title>
</head>
<body>
<div>
<div>Hello World</div>
</div>
</body>
</html>
Creating MVC component
You can also create Iframe component using MVC.
First you need to add controller. Controller has to be annotated with IframeComponent attribute.
[IFrameComponent(Url = "/helloworld", Title = "Hello World Component", Categories = "content")]
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
}
The add a Index.cshtml view to the Views/HelloWorld directory:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>HelloWorld</title>
</head>
<body>
<div>
<div>Hello World</div>
</div>
</body>
</html>Related information
Last updated: Jul 02, 2021
