Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Import events from Facebook: Create the pipe control designer for the outbound pipe

The pipe control designer is used when editing settings in Feeds.

Creating the custom control

To create the class for the view, perform the following.

  1. From the context menu of folder Web » UI, click Add » Class...
  2. In the Name input field, enter XmlPipeImportDesignerView.
  3. Open the file in Visual Studio and add the following namespaces:
    using System.Web.UI;
    using PublishingModuleExtensions.PublishingSystem;
    using Telerik.Sitefinity;
    using Telerik.Sitefinity.Modules.Pages;
    using Telerik.Sitefinity.Publishing.Web.Services.Data;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
  4. Change the class definition to:
    public class XmlPipeImportDesignerView : ControlDesignerBase
    {
    }
  5. Add the following constructor:
    public XmlPipeImportDesignerView()
    {
    }
  6. Add the following field:
    private string providerName;
  7. Save the file.

Creating the template

To create the template of the designer view, perform the following:

  1. In the context menu of folder Web » UI, click Add » Class...
  2. In the Name input field, enter XmlPipeImportDesignerView.ascx and click Add.
  3. Open the newly created file and clear its content.
  4. Define the markup by pasting the following code:
    <%@ Control Language="C#" %>
    <div class="sfContentViews">
        <div class="sfFormCtrl">
            <a href="javascript:void(0);" id="openMappingSettings" runat="server" class="sfLinkBtn sfChange">
                <asp:Label runat="server" ID="lMappingSettings" Text="<%$Resources:PublishingMessages, MappingSettings %>" CssClass="sfLinkBtnIn" />
            </a>
        </div>
    </div>
  5. Save the file.

Implementing the ControlDesignerBase class

To implement the ControlDesignerBase class in XmlPipeImportDesignerView.cs, perform the following:

  1. Reference the embedded template by pasting the following code into XmlPipeImportDesignerView.cs:
    public static readonly string layoutTemplatePath = ControlUtilities.ToVppPath("PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.ascx");
    public static readonly string PublishingVirtualPath = "~/SFPublishing/";
    public override string LayoutTemplatePath
    {
        get
        {
            return String.Concat(PublishingVirtualPath, "PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.ascx");
        }
        set
        {
            base.LayoutTemplatePath = value;
        }
    }
     
    protected override string LayoutTemplateName
    {
        get
        {
            return null;
        }
    }
  2. Override the InitializeControls method by pasting the following code:
    protected override void InitializeControls(GenericContainer container)
    {
    }
  3. Provide a property for the open mapping settings dialog by pasting the following code:
    protected virtual Control OpenMappingSettingsDialog
    {
        get { return this.Container.GetControl<Control>("openMappingSettings", true); }
    }
  4. Save the file.

Implementing the client component

You must store the client class in a javascript file in the project, where the view resides.

To create the file, perform the following:

  1. In the context menu of folder Web » UI, click Add » New Item...
  2. In the left pane, select Visual C# Items » Web.
  3. Click JScript File and in the Name input field, enter XmlPipeImportDesignerView.
  4. Open the newly created file.
  5. Add the following code to it:
    Type._registerScript("XmlPipeImportDesignerView.js", ["IDesignerViewControl.js"]);
    Type.registerNamespace("PublishingModuleExtensions.Web.UI");
     
    PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView = function (element) {
        PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.initializeBase(this, [element]);
        this._openMappingSettingsButton = null;
        this._settingsData = {};
    }
     
    PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.prototype = {
        initialize: function () {
            PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
        },
        applyChanges: function () {
        },
        validate: function () {
            var isValid = true;
            return isValid;
        },
        get_openMappingSettingsButton: function () {
            return this._openMappingSettingsButton;
        },
        set_openMappingSettingsButton: function (val) {
            this._openMappingSettingsButton = val;
        },
        set_controlData: function (value) {
            this._settingsData = value;
            this.refreshUI();
        },
        get_controlData: function (value) {
            return this._settingsData;
        }
    }
     
    PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.registerClass('PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView',
        Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);
     
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  6. Save the file.

For more information, see Overview: Widget designers.

Referencing the client script

You must reference the client component from the view class. You do this in the override for the GetScriptReferences method. In it you must create a script reference for your client component. When creating the reference, you must specify the name of the embedded resource that contains the client component and the assembly it resides in. The name of the resource follows the same naming conventions as the name of the template.

public override IEnumerable<ScriptReference> GetScriptReferences()
{
    var res = PageManager.GetScriptReferences(ScriptRef.JQuery);
    var assemblyName = this.GetType().Assembly.GetName().ToString();
 
    var telerikAssemblyName = typeof(Telerik.Sitefinity.Web.UI.Fields.TextField).Assembly.GetName().FullName;
 
    res.Add(new ScriptReference("Telerik.Sitefinity.Web.UI.ControlDesign.Scripts.IDesignerViewControl.js", telerikAssemblyName));
    res.Add(new ScriptReference("PublishingModuleExtensions.Web.UI.XmlPipeImportDesignerView.js", assemblyName));
 
    return res;
}

You must specify a script descriptor for the view. You do this in the GetScriptDescriptors override.

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor desc = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
    desc.AddElementProperty("openMappingSettingsButton", this.OpenMappingSettingsDialog.ClientID);
 
    var settings = new Dictionary<string, object>();
    var defaults = PublishingSystemFactory.GetPipe(XmlInboundPipe.PipeName).GetDefaultSettings();
    settings.Add("settings", defaults);
    settings.Add("pipe", new WcfPipeSettings(XmlInboundPipe.PipeName, this.providerName));
 
    desc.AddProperty("_settingsData", settings);
 
    return new[] { desc };
}

Back To Top