Data FAQ

How to add a user control to a datatype form?

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:

  1. 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>
  2. 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 in Composite.config.

    IMPORTANT NOTE: Always create a backup of configuration files before any changes!
  3. Locate the <Composite.Forms.Plugins.UiControlFactoryConfiguration> part in the Composite.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>
  4. 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" />
  5. 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 the height and width attributes of the iframe located in the Sample.ascx file.)