Developer FAQ
Is there a way of embedding a user control in a data type form in C1?
Answer:
It is possible to embed a user control in a datatype form. To embed a user control:
- Create a user control. (You can use the following example, in which we create a control that renders iframe.)
Sample.ascx:<%@ Control Language="C#" Inherits="Composite.StandardPlugins.Forms.WebChannel.UiControlFactories.ContainerTemplateUserControlBase" %> <%@ Import Namespace="Composite.ConsoleC1.Forms.WebChannel" %> <%@ Import Namespace="Composite.Plugins.Forms.WebChannel.UiControlFactories" %> <script runat="server"> private void Page_Init(object sender, System.EventArgs e) { } </script> <iframe src="http://composite.net"></iframe>
- Add this control at the following path:
~/Composite/controls/FormsControls/FormUiControlTemplates/Containers/Sample.ascx
Please note that the path might be different in your case and you'll have to adjust it to this control's path inComposite.config
.
IMPORTANT NOTE: Always create a backup of configuration files before any changes! - Locate the
<Composite.Forms.Plugins.UiControlFactoryConfiguration>
part in theComposite.config
file:<Composite.C1Console.Forms.Plugins.UiControlFactoryConfiguration> <Channels> <Channel debugControlNamespace="http://www.composite.net/ns/management/bindingforms/internal.ui.controls.lib/1.0" debugControlName="Debug" name="AspNet.Management"> <Namespaces> <Namespace name="http://www.composite.net/ns/management/bindingforms/std.ui.controls.lib/1.0"> <Factories> <!-- add your control entry here--> </Factories> </Namespace> </Namespaces> </Channel> </Channels> </Composite.C1Console.Forms.Plugins.UiControlFactoryConfiguration>
- And add your control under the
<Factories>
element as in the example below:<add userControlVirtualPath="~/Composite/controls/FormsControls/FormUiControlTemplates/Containers/Sample.ascx" cacheCompiledUserControlType="true" type="Composite.StandardPlugins.Forms.WebChannel.UiControlFactories.TemplatedContainerUiControlFactory, Composite" name="Sample" IsTabbedContainer="false" IsFullWidthControl="true" />
- Now open your datatype using the Edit Form Markup command in the context menu and add your control to the desired location within the
<FieldGroup>
element:<Sample></Sample>
You may use the following markup as an example. (This datatype consists of one field of the string type and unlimited length.)<cms:formdefinition xmlns:cms="http://www.composite.net/ns/management/bindingforms/1.0" xmlns="http://www.composite.net/ns/management/bindingforms/std.ui.controls.lib/1.0" xmlns:f="http://www.composite.net/ns/management/bindingforms/std.function.lib/1.0"> <cms:bindings> <cms:binding name="Id" type="System.Guid" optional="true" /> <cms:binding name="NewField" type="System.String" optional="true" /> </cms:bindings> <cms:layout> <cms:layout.label> <cms:read source="NewField" /> </cms:layout.label> <FieldGroup> <InlineXhtmlEditor Label="NewField" Help="" ClassConfigurationName="common"> <InlineXhtmlEditor.Xhtml> <cms:bind source="NewField" /> </InlineXhtmlEditor.Xhtml> </InlineXhtmlEditor> <Sample></Sample> </FieldGroup> </cms:layout> </cms:formdefinition>
(In case you need to adjust the size of the iframe used in our example, please use the<PlaceHolder>
element instead of<FieldGroup>
and set theheight
andwidth
attributes of theiframe
located in theSample.ascx
file.)