The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
In this sample we will associate Image Gallery with a news item. The procedure is almost completely same for all Generic Content based modules (e.g. Blogs, Events…).
In order to associate an Image Gallery with a content item we will need to perform following tasks:
Take a look at Figure 1 for a high level overview of the tasks we will perform.
Figure 1 – the high level overview of implemented functionalities
Open web.config file and register a GalleryID metafield. This field will carry the ID of the gallery that we wish to associate with a particular News item. Locate the following section in web.config telerik/cmsEngine/metaFields and add following line to it:
<add key=”News.GalleryID” valueType=”ShortText” visible=”True” searchable=”False” sortable=”False” defaultValue=”” /> |
Since we do not want to force our users to remember the Guid ID of the ImageGallery to associate with the news item, we will use a special control which is nothing more than a drop down list with some binding logic. We will create a control called GalleryPicker and bind all ImageGalleries to it.
Brief overview of how Sitefinity saves metafields
Control Panel of Generic Content based modules (such as news, blogs etc.) has templates ControlPanelInsert.ascx and ControlPanelEdit.ascx. These two templates define the layout of the control panel when in insert and edit mode respectively. When you wish to add a new metafield, in order for it to become usable, you will need to add controls in these two templates so that your users can work with this new metafield. The control that we are adding to these templates must have the same id as is the key of the metafield for which it will be used (so if our metafield is GalleryID, that means that the ID of our control used for editing that metafield must also be GalleryID). Another requirement is that the control implements ITextControl interface, which means that it will have Text property (e.g. TextBox implements this interface). This is needed because Sitefinity will save the value of that Text property as the value of the metafield.
The problem may arise when you want to use a control that does not natively implement ItextControl property, such as RadComboBox. The solution here is to create a wrapper user control which will implement ItextControl and map the mandated Text property to whatever it is that you want (e.g. SelectedValue of the RadComboBox).
You can find and examine the GalleryPicker control in the MyControls folder that came in the zip file you have downloaded. Download it from here if you haven’t already.
Once we have our GalleryPicker ready we need to add it to these two templates:
~/Sitefinity/Admin/News/ControlTemplates/ControlPanelInsert.ascx and
~/Sitefinity/Admin/News/ControlTemplates/ControlPanelEdit.ascx
First we’ll need to register the control at the top of both templates, putting this line:
<%@ Register TagPrefix=”mycontrols” Src=”~/MyControls/GalleryPicker.ascx” TagName=”GalleryPicker” %> |
And then we’ll need to add actual control (for example right after the thumbnail control). The code that we will add will look like this:
<li> |
<asp:Label ID=”Label99” AssociatedControlID=”GalleryID” runat=”server”> <asp:Literal ID=”Literal24” runat=”server” Text=”Associated gallery”> </asp:Literal> |
<em id=”Em2” runat=”server”></em> |
</asp:Label> |
<mycontrols:GalleryPicker ID=”GalleryID” runat=”server” /> |
</li> |
You can examine how the templates should look in the project you have downloaded in the Sitefinity/Admin/ControlTemplates/News folder.
Now that we have taken care of the admin side of our sample, we are left with the public side. The idea is to display the selected ImageGallery in the details mode of your NewsView control. To do so we’ll have to open following template:
~/Sitefinity/ControlTemplates/News/Modes/ListPageDetails.ascx
At the top of the file, register the built in ImageGallery control by putting the following line:
<%@ Register Assembly=”Telerik.Libraries” Namespace=”Telerik.Libraries.WebControls” TagPrefix=”sfLib” %> |
Then add the control somewhere in the template, for example right after the content. The code that you will add will look like this:
<p> |
<sfLib:ImageGallery id=”ImageGallery” runat=”server”></sfLib:ImageGallery> |
</p> |
Now, we have almost done, but are still missing one very important functionality. Namely the ImageGallery property will show images from all libraries. In versions prior to 3.5 you would typically set ParentIDs property, however, that property has been marked obsolete because it is rather rigid and inflexible. So, instead of setting the ParentIDs property we will set the value of the new FilterExpression property introduced on all ContentView based controls. We will set it to
ParentID = GalleryID
NOTE: we will actually need to replace GalleryID with the actual ID selected on the admin side.
Finally, the last step is to somehow map the value of GalleryID metafield to the FilterExpression property. Generally, this would be done by overriding the NewsView control – however there is a simple control (appropriately named MetaMaster2008) that can save you the pain of doing so and you can find it in this post. For this example, the control has been a bit enhanced with TargetPropertyFormatString property to allow us to build FilterExpression, not simply map the value to the property.
If you have closed the template we were working on in the previous paragraph, please open it again:
~/Sitefinity/ControlTemplates/News/Modes/ListPageDetails.ascx
NOTE: Make sure you’ve copied the two classes from the App_Code folder that came with the project you’ve downloaded to the App_Code folder of your website.
First we have to register the control. We’ll do so by placing this line at the top of the template:
<%@ Register Assembly=”App_Code” Namespace=”RandomSFCode.MetaMaster2008” TagPrefix=”cc1” %> |
Now, add the meta master control to the template before any other control (careful! Order is important). The control will look like this:
<cc1:MetaMaster ID=”MetaMaster1” runat=”server”> |
<Mappings> |
<cc1:MetaMapping MetaKey=”GalleryID” TargetControlId=”ImageGallery” TargetProperty=”FilterExpression” TargetPropertyStringFormat=”ParentID = {0}” /> |
</Mappings> |
</cc1:MetaMaster> |
Basically, this control maps the value of GalleryID metafield to the FilterExpression property of the ImageGallery control (which is based on ContentView) and it does so by formatting the value of property to look like the string specified in the TargetPropertyStringFormat ( “{0}” will be replaced with the actual Guid GalleryID).
If you want to see how does the template looks after all the modifications you can open following file from the project you have downloaded:
~/Sitefinity/ControlTemplates/News/Modes/ListPageDetails.ascx
And that’s it. Create few image libraries, create a news item, associate it with an image gallery and it should work.
<add key=”News.GalleryID” valueType=”ShortText” visible=”True” searchable=”False” sortable=”False” defaultValue=”” /> |
While this is a practical example, I believe there are several important concepts covered here that will help you to modify Sitefinity modules radically if you wish to do so. I hope you’ll find it useful and please leave a comment if you run into a problem, have a question or suggestion.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.