Manipulating the Image Selector dialog globally - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 08-May-2012 00:00

Hello,
We are looking to control access to libraries throughout sitefinity. We will have many users accessing the back-end of our site, and they will have varying permissions. We would like to modify the display of libraries for them, so that any library they cannot access will not show up. In particular, I'm thinking of the image specification dialogue, which you can view by editing a Sitefinity Image control on a page. This is also the selector used in the Image field. In my mind, this could be accomplished by overriding whatever control it is that I need to in Settings > Advanced > Controls, as I had done previously with an HTMLfield.

My questions are:

1. Will this approach work? Will we be able to modify the list of libraries by overriding a template of the dialogue? If not, what course of action should we take?
2. What is the type of the image selector dialogue for us to overwrite?
3. What is the content of the template that we can use so we don't lose the base-level functionality? Previously when overriding the HTMLField, I had received the template from Telerik.

Thanks in advance

edit I should mention that we would like to do this for documents as well, and any other controls where the user gets presented with a list of libraries that they do not have access to. Do the various library item selectors all use the same template or are they different per type (Document/Video/Custom/Image)? If they are different, what are they types for each of them and where might I find a template for them?

Posted by Community Admin on 12-Nov-2012 00:00

Hi Travis,

Did you every have any success with customizing the image selector?

Thanks,
Compton

Posted by Community Admin on 16-Nov-2012 00:00

Hi Travis and Compton,

For selecting media content in Sitefinity we use either the MediaContentSelectorView or EditorContentManagerDialog (the latter incorporates MediaContentSelectorView and MediaContentUploaderView)

In the code behind of the mapped template for MediaContentUploaderView you can set the FilterExpression of the ClientBinder populating the Libraries dropdown, for example:

Copy Code

this.librariesBinder.FilterExpression = "Title.Contains(\"MyLibrary\")";

this would ensure that only one library will be shown.

When used as controls on EditorContentManagerDialog (e.g. in ContentBlock widget selectors for Images, Videos and Documents) the EditorContentManagerDialog will set the "mode" querystring in the Request to "Image", "Video", or "Document" accordingly, so you can check for it like this:

Copy Code

var mode = HttpContext.Current.Request.QueryString["mode"];

in the code-behind of the mapped template.

Also, for the MediaContentSelectorrView you can limit the displayed images and libraries by modifying the filter expressions on the service and itemsList control, like this:

Copy Code

protected void Page_Load(object sender, EventArgs e)

string libraryTitle = "\"l1\"";

this.libraryBinder.FilterExpression = "Title.Contains(" + libraryTitle + ")";

this.mediaContentItemsList.ConstantFilter += " AND Parent.Title.Contains(" + libraryTitle + ")";

Please note that when used as separate Views in a control designer (e.g. single image widget, single document widget etc.) these views have different templates (as they should accommodate only single item selection/upload). For example for image it is UploadImageDesignerView.ascx:

Copy Code

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

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

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

TagPrefix="sitefinity" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend.Detail"

TagPrefix="sfDetail" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfLibraries" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfDesigners" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" %>

<h2><asp:Label ID="lblWhichImage" AssociatedControlID="fileNameTextBox" runat="server" Text="<%$Resources:Labels, WhichImageToUpload %>" /></h2>

<div class="sfTxtUrlSeletor">

<asp:TextBox ID="fileNameTextBox" runat="server" CssClass="sfTxt" />

<asp:LinkButton runat="server" id="selectFileButton" OnClientClick="return false" CssClass="sfLinkBtn sfChange">

<strong class="sfLinkBtnIn"><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:Labels, SelectDotDotDot %>" /></strong>

</asp:LinkButton>

</div>

<%--<telerik:RadAsyncUpload ID="RadAsyncUpload" runat="server" MaxFileInputsCount="1" Width="320"

AutoAddFileInputs="False" ControlObjectsVisibility="None">

</telerik:RadAsyncUpload>--%>

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

<div id="librarySelector" runat="server">

<h2><asp:Label ID="librarySelectorTitle" AssociatedControlID="librariesDropDown" runat="server" Text="<%$Resources:Labels, WhereToStoreTheUploadedImage %>" /></h2>

<asp:DropDownList ID="librariesDropDown" runat="server">

</asp:DropDownList>

<sitefinity:GenericCollectionBinder ID="librariesBinder" runat="server" TargetId="librariesDropDown"

ServiceUrl="~/Sitefinity/Services/Content/ContentService.svc/" BindOnLoad="false"

DataKeyNames="Id"

DataMembers="Id, Title">

<Containers>

<sitefinity:BinderContainer ID="BinderContainer1" runat="server" RenderContainer="false"

ContainerTag="OPTION" TemplateHolderTag="SELECT">

<option sys:value="Id">Title</option>

</sitefinity:BinderContainer>

</Containers>

</sitefinity:GenericCollectionBinder>

<asp:Literal ID="orLiteral1" runat="server" Text="<%$Resources:Labels, or %>"></asp:Literal>

<asp:LinkButton ID="createNewLibraryButton" runat="server" OnClientClick="return false;" Text="<%$Resources:LibrariesResources, CreateANewLibrary %>"></asp:LinkButton>

</div>

</asp:Panel>

<div id="createLibraryContainer" class="sfDesignerSelector" style="min-height: 150px;display: none;">

<sfDesigners:CreateLibraryControl ID="theCreateLibraryControl" runat="server" LibraryTypeName="Telerik.Sitefinity.Libraries.Model.Album" CreateLibraryServicePath="~/Sitefinity/Services/Content/AlbumService.svc/" />

</div>

and ImageSelectorDesignerView.ascx

Copy Code

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

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

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

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

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sfViews" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfDesigners" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" %>

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

<sitefinity:ResourceLinks ID="resourcesLinks" runat="server">

<sitefinity:ResourceFile JavaScriptLibrary="JQuery">

</sitefinity:ResourceFile>

</sitefinity:ResourceLinks>

<sf:MediaContentSelectorView id="selectorView" runat="server"

MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"

LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc"

MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc"

DisplayResizingOptionsControl="false"

ShowOpenOriginalSizeCheckBox="true">

</sf:MediaContentSelectorView>

Kind regards,
Boyan Barnev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 22-Feb-2013 00:00

Hi Boyan,

I realize that it has been some time since we first started with this post, however, we are now in need of similar functionality, and the explanation above, while helpful, does not fill me with the confidence that we're going to be able to implement this change. I really don't understand how we would, for example, edit a line in the code behind of EditorContentManagerDialog. I could see creating an entirely new class, inheriting from EditorContentManagerDialog, then overwriting methods there, but, I feel like it's incredibly easy to get lost with this approach, and when there is invariably a problem, we're just stuck spinning our wheels where we were in the first place.

So, how would you suggest we modify a line, to check the querystring in the code-behind of a mapped template (var mode = HttpContext.Current.Request.QueryString["mode"];)? What steps do we need to take to access the code behind?

Thanks

Posted by Community Admin on 27-Feb-2013 00:00

Hello,

I am afraid you need to create a template and register it. In order to map the template you need to go to Administration->Settings->Advanced->Controls->ViewMap
(change the type here)
Host Type: Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentSelectorView
LayoutTemplate: path to the .ascx file created
Save changes and restart the application for the template to be in use.

To edit the line:

var mode = HttpContext.Current.Request.QueryString["mode"];

you need to create a class that inherits from EditorContentManagerDialog and place the new line in an appropriate method.

Kind regards,
Stefani Tacheva
the Telerik team

Posted by Community Admin on 09-Jul-2013 00:00

Any way you can put a control on the front end, runtime part of the widget?

See my post for further details on what I want to do;

developing-with-sitefinity-/how-to-put-select-an-image-link-used-in-the-sitefinity-image-widget-in-your-own-custom-widget-

This thread is closed