PagesSelector in a FieldControl - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 10-May-2015 00:00

I am trying to create a custom field control for related data pointing to pages. I want to use the built in page selector but I also need to customize it a bit to allow for additional functionality, namely creating a new page. I have gone through: Page Selector in custom field and got it working, but it doesn't work like the built-in field control for page selection.

So I have been trying to leverage PagesSelector, but I am bit confused on how to hook up the value:

protected virtual Telerik.Sitefinity.Web.UI.PagesSelector PageSelector

get

return this.Container.GetControl<Telerik.Sitefinity.Web.UI.PagesSelector>("pageSelector", true);

[TypeConverter(typeof(ObjectStringConverter))]

public override object Value

get

return (string) this.PageSelector.Value;

set

this.PageSelector.Value = (string) value;

In this example, the Value field doesn't exist and looking through the list of properties I can't quite determine what to replace it with.

As a quick side note, I already got it working with the PageField, as is described in this post: Page Selector in custom field

Posted by Community Admin on 10-May-2015 00:00

Well that wasn't what I was looking for: that control just shows the page selector view: I am assuming I need to use RelatedDataField instead.

<sf2:RelatedDataField runat="server" AllowMultipleSelection="false" RelatedDataType="Telerik.Sitefinity.Pages.Model.PageNode"

RelatedDataProvider="OpenAccessDataProvider" DataFieldName="Page" DisplayMode="Write" />

This, however, gives me a non-functioning control, as seen attached: So I guess my question is how to get a RelatedDataField for a page working in a custom field control?

Posted by Community Admin on 10-May-2015 00:00

I found a solution:

Create a child class of RelatedDataField

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Localization;

using Telerik.Sitefinity.ModuleEditor;

using Telerik.Sitefinity.Web.UI;

using Telerik.Sitefinity.Web.UI.Fields;

using Telerik.Sitefinity.Web.UI.Fields.Config;

namespace SitefinityWebApp.Custom

[FieldDefinitionElement(typeof(RelatedDataFieldDefinitionElement))]

public class MyRelatedDataField : RelatedDataField

public override string LayoutTemplatePath

get

return "~/Custom/MyRelatedDataField.ascx";

set

base.LayoutTemplatePath = value;

Create your own template: this seems tricky but you can just decompile the assemblies to get to the resources and copy over what they have for Telerik.Sitefinity.Resources.Templates.Fields.RelatedDataField.ascx

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls" TagPrefix="sf" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.InlineEditing" TagPrefix="sf" %>

<sf:ResourceLinks ID="kendoStyles" runat="server" UseEmbeddedThemes="True" Theme="Default">

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="True" />

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_metro_min.css" Static="true" />

<sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Images.Loadings.sfLoadingData.gif"

Static="true" ControlID="loadingImage" ControlPropertyName="ImageUrl" />

</sf:ResourceLinks>

<sf:ResourceLinks ID="resourcesLinks" runat="server" UseEmbeddedThemes="True" Theme="Default">

<sf:ResourceFile JavaScriptLibrary="JQuery" />

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.kendo.web.min.js" Static="True" />

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.RequireJS.require.min.js" Static="True" />

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.JSON2.js" />

</sf:ResourceLinks>

<sf:ResourceLinks ID="relatedDataResourceLinks" runat="server">

<sf:ResourceFile Name="Styles/Tabstrip.css" />

<sf:ResourceFile Name="Styles/Grid.css" />

</sf:ResourceLinks>

<sf:SitefinityLabel ID="titleLabel" runat="server" CssClass="sfTxtLbl" />

<sf:SitefinityLabel ID="errorMessageLabel" runat="server" CssClass="sfFailure" />

<asp:Panel runat="server" ID="fieldBodyWrapper">

<div id="relatedDataFieldContainer">

<p class="sfNeutral" data-bind="visible: isDuplicateMode">

<asp:Literal id="duplicationNoteLabel" runat="server" Text="<%$Resources:ModuleEditorResources, DuplicateItemNote %>" />

</p>

<sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />

<div id="relatedDataSelectorWindow"></div>

<div id="relatedDataGridContainer"></div>

<div id="relatedDataLoadingContainer">

<sf:SfImage ID="loadingImage" runat="server" AlternateText="" />

</div>

<a data-bind="invisible: hideSelectButton, click: openRelatedDataSelector" class="sfLinkBtn sfChange sfMTop10">

<span class="sfLinkBtnIn"><asp:Literal ID="addOrSelectRelatedDataLabel" runat="server" Text="<%$Resources:ModuleEditorResources, SelectRelatedDataButton %>" /></span>

</a>

</div>

</asp:Panel>

Now you need to hook this up in the configuration, wherever you need to use it. If you are leveraging it with a Dynamic Content Type, you can just search for RelatedDataField in DynamicModulesConfig.config and replace it accordingly. For example:

<field frontendWidgetLabel="Related Page" frontendWidgetVirtualPath="inline" relatedDataType="Telerik.Sitefinity.Pages.Model.PageNode" relatedDataProvider="OpenAccessDataProvider" allowMultipleSelection="False" id="PageControl" dataFieldName="Page" displayMode="Write" wrapperTag="Li" title="Related Page" fieldType="SitefinityWebApp.Custom.MyRelatedDataField, SitefinityWebApp" cssClass="sfFormSeparator" fieldName="Page" type:this="Telerik.Sitefinity.Web.UI.Fields.Config.RelatedDataFieldDefinitionElement, Telerik.Sitefinity">

<validator expectedFormat="None" maxLength="0" minLength="-1" regularExpression="^(.0,)?$" required="False" maxLengthViolationMessage="The input is too long" messageCssClass="sfError" minLengthViolationMessage="The input is too short" validateIfInvisible="True" />

<expandableDefinition expanded="True" />

</field>

There's like four instances to replace, I think one for each "view"

So this will give you a way to use the built-in related data control and modify it for additional functionality; like having a Create Page button!

This thread is closed