+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Working with ContentView designers (part 1)

by Ivan Osmak

In version 3.2 we have released new designers for ContentView based controls (BlogPosts, NewsView, EventsView…). While to the end user it didn’t seem like much of a change, we have introduced quite an improvement, just haven’t had the time to explain it. In the next few posts I will be exploring some of the new things that we have implemented in regards to ContentView designers.

Adding more detailed settings for EventsView control

I’ve seen this question quite a few times in the support, so it seems as a perfect introduction to the ContentView designers. Namely, users can enter “Street”, “City”, “Country” and “State” data when creating a new event, but in the EventsView designers there is only “Event location” setting to turn off or on all of information. Take a look at the figure one to see what I mean.


Figure 1: on the left side we see fields in the control panel of the Events module, on the right side we see the settings of the EventsView control. As you can see not all fields can be directly controlled

Now, what we want to accomplish is to make the image on the right side of the Figure 1, to like the one on the Figure 2.
 
Figure 2: we can see that end user has an ability now to control settings for street, city, country and state controls, not just the Event location container

In order to do so we will need to modify the template for the EventsViewDesigner control. You can find this template at this location:

~/Sitefinity/Admin/ControlTemplates/Events/Design/EventsViewControlDesigner.ascx

You will see that the close to the top of the template there is a PresentationModes control, which will be explained in more detail in one of the future posts, but for now all we have to know that the presentation modes represent different modes in which EventsView control can be displayed. The actual code I am referring to looks like this:
<sfDesign:PresentationModes ID="presentationModes" runat="server">  
                    <Modes> 
                    <sfDesign:PresentationMode ID="listPageMode" runat="server"   
                                               ModeTitle="List &amp; page"   
                                               ModeSettingsId="ModesSettings1"   
                                               MasterTemplatePath="~/Sitefinity/ControlTemplates/Events/Modes/ListPageMaster.ascx"   
                                               DetailTemplatePath="~/Sitefinity/ControlTemplates/Events/Modes/ListPageDetail.ascx" 
                                               CssClass="pageListMode" 
                                               SelectedCssClass="selectedOption pageListMode" 
                                               > 
                        <Template> 
                                <asp:RadioButton ID="listPageRadio" runat="server" /> 
                                <p>A list of event titles, dates and summaries (optional). The full event info is opened in a separate page.</p> 
                              
                        </Template> 
                    </sfDesign:PresentationMode> 
                    <sfDesign:PresentationMode ID="ExpandableList" runat="server"   
                                               ModeTitle="Expandable list"   
                                               ModeSettingsId="ModesSettings2"   
                                               MasterTemplatePath="~/Sitefinity/ControlTemplates/Events/Modes/ExpandableListMaster.ascx" 
                                               CssClass="expandableList" 
                                               SelectedCssClass="selectedOption expandableList" 
                                               > 
                        <Template> 
                                <asp:RadioButton ID="ExpandableListRadio" runat="server" /> 
                                <p>A list of event titles and dates. The full info is expanded in the same list when a title is clicked.</p> 
                        </Template> 
                    </sfDesign:PresentationMode> 
                    <sfDesign:PresentationMode ID="allInAListMode" runat="server"   
                                               ModeTitle="Expanded list"   
                                               ModeSettingsId="ModesSettings3"   
                                               MasterTemplatePath="~/Sitefinity/ControlTemplates/Events/Modes/AllPostsListMaster.ascx" 
                                               CssClass="allInListMode" 
                                               SelectedCssClass="selectedOption allInListMode">  
                        <Template> 
                                <asp:RadioButton ID="allPostsInAListRadio" runat="server" /> 
                                <p>All events with their titles and the full info are in a common page.</p> 
                        </Template> 
                    </sfDesign:PresentationMode> 
                    </Modes> 
                </sfDesign:PresentationModes> 
 

Visually, in the EventsView designer, PresentationModes control looks like the image in the Figure 3:

Figure 3: EventsView control presentation modes

As I have said, we will not go into details about PresentationModes control in this post, but we need to understand that each mode has different collection of settings, therefore it is important to know that we will modify the settings for the List & Page mode. In order to do so, we will need to locate the PresentationModeSettings control with id of ModesSettings1 (take a look at the ModeSettingsId property of the first presentation mode). Farther down in the template we can locate that control and the code for it looks like this:

<sfDesign:PresentationModeSettings ID="ModesSettings1" runat="server">  
                    <DetailHeaderTemplate> 
                        <div class="selectedModeShortDescription">  
                             <h3>Selected mode</h3> 
                            <h4 class="selectedTitlePageList">List &amp; page</h4> 
                            <p>A list of event titles, dates and summaries (optional). The full event info is opened in a separate page.</p> 
                        </div> 
                        <sfDesignSettings:PagingSetting id="pagingSetting" AllowListLimitSetting="true" DefaultListLimit="100" AllowPagingSetting="true" DefaultPageCount="20" LimitList="false" runat="server"></sfDesignSettings:PagingSetting> 
                          
                        <h4>In the event page, display:</h4> 
                        <ul> 
                    </DetailHeaderTemplate> 
                    <DetailSettings> 
                        <sfDesignSettings:TextSetting ID="setting1" 
                                              TargetID="fullContent1" 
                                              SettingTitle="Title"   
                                              AllowLabelSetting="False"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="False" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                        <sfDesignSettings:TextSetting ID="TextSetting1" 
                                              TargetID="Event_Start"   
                                              SettingTitle="Start date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                       <sfDesignSettings:TextSetting ID="TextSetting8" 
                                              TargetID="Event_End"   
                                              SettingTitle="End date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting10" 
                                              TargetID="Publication_Date"   
                                              SettingTitle="Publication date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting5" 
                                              TargetID="content" 
                                              SettingTitle="Event description"   
                                              AllowLabelSetting="False"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="False" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                    <sfDesignSettings:TextSetting ID="TextSetting9" 
                                              TargetID="plhWhere"   
                                              SettingTitle="Event location"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting11" 
                                              TargetID="plhWho"   
                                              SettingTitle="Contact person details"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                      <sfDesignSettings:TextSetting ID="TextSetting12" 
                                              TargetID="mapPanel"   
                                              SettingTitle="Geographic map (to set details, use Advanced section above)"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="False">  
                                              </sfDesignSettings:TextSetting>                                  
                      <sfDesignSettings:TextSetting ID="TextSetting3" 
                                              TargetID="plhTags"   
                                              SettingTitle="Tags"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                      <sfDesignSettings:TextSetting ID="TextSetting4" 
                                              TargetID="plhCategory"   
                                              SettingTitle="Category"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>     
                        <sfDesignSettings:TextSetting ID="TextSetting35" 
                                              TargetID="Bookmarks"   
                                              SettingTitle="Social bookmarks (del.icio.us, digg, reddit)"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>                        
                    </DetailSettings> 
                    <DetailFooterTemplate> 
                        </ul> 
                    </DetailFooterTemplate> 
                    <MasterHeaderTemplate> 
                        <h4>For every event in the list page, display:</h4> 
                        <ul> 
                    </MasterHeaderTemplate> 
                    <MasterSettings> 
                        <sfDesignSettings:TextSetting ID="TextSetting6" 
                                              TargetID="fullContent1" 
                                              SettingTitle="Title, linking to the post page"   
                                              AllowLabelSetting="False"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="False" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                         <sfDesignSettings:TextSetting ID="TextSetting2" 
                                              TargetID="Event_Start"   
                                              SettingTitle="Start date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                       <sfDesignSettings:TextSetting ID="TextSetting25" 
                                              TargetID="Event_End"   
                                              SettingTitle="End date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="False">  
                                              </sfDesignSettings:TextSetting>   
                      <sfDesignSettings:ContentSetting id="ContentSetting1" 
                                              TargetID="content">  
                                              </sfDesignSettings:ContentSetting>      
                    <sfDesignSettings:TextSetting ID="TextSetting7" 
                                              TargetID="Location"   
                                              SettingTitle="Event location"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>                       
                      <sfDesignSettings:TextSetting ID="TextSetting30" 
                                              TargetID="fullContent2"   
                                              SettingTitle="Link 'More information'"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="False">  
                                              </sfDesignSettings:TextSetting>                     
                    </MasterSettings> 
                    <MasterFooterTemplate> 
                        </ul> 
                        <sfDesignSettings:BehaviorSetting id="behaviorSetting" runat="server"></sfDesignSettings:BehaviorSetting> 
                    </MasterFooterTemplate> 
                </sfDesign:PresentationModeSettings> 
 

As you can see from the code, PresentationModeSettings control has two collections of settings: DetailSettings and MasterSettings. As you would guess, detail settings are controlling the controls in details template (SingleItemTemplate), while MasterSettings are controlling controls in the master template (ItemListTemplate). Now that we have this knowledge, let’s examine one of the TextSetting controls in the DetailSettings collection to see what exactly it does.

<sfDesignSettings:TextSetting ID="TextSetting9" 
                                              TargetID="plhWhere"   
                                              SettingTitle="Event location"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
 

First we have ID property, which only needs to be unique, so not very interesting. Second property is TargetID – a much more interesting property. This property determines the ID of the control in the details template that the setting is controlling. If you open following template (the default details template for List & Page mode - this is very important to keep in mind!):

~/Sitefinity/ControlTemplates/Events/Modes/ListPageDetail.ascx

You’ll find that “Street”, “City”, “Country” and “State” labels are all wrapped in a PlaceHolder with id “plhWhere” – exactly the same as the TargetID property of our examined setting.

<asp:PlaceHolder id="plhWhere" runat="server">  
        <address id="Location" runat="server" class="sf_eventLocation">  
            Street: <asp:Literal ID="Street" runat="server" Text="{0}"></asp:Literal><br /> 
            City: <asp:Literal ID="City" runat="server" Text="{0}"></asp:Literal><br /> 
            State: <asp:Literal ID="State" runat="server" Text="{0}"></asp:Literal><br /> 
            Country: <asp:Literal ID="Country" runat="server" Text="{0}"></asp:Literal><br /> 
        </address> 
   </asp:PlaceHolder> 
 

So, now we see that our setting is controlling actually a wrapper, not any meta field controls. So, in order to create actual settings for each of the specific fields all we have to do is remove the TextSetting control with the TargetID=”plhWhere” and add four new text settings with TargetID being set to “Street” , “City”, “State” and “Country”. The revised PresentationModeSettings control will look like this:

<sfDesign:PresentationModeSettings ID="ModesSettings1" runat="server">  
                    <DetailHeaderTemplate> 
                        <div class="selectedModeShortDescription">  
                             <h3>Selected mode</h3> 
                            <h4 class="selectedTitlePageList">List &amp; page</h4> 
                            <p>A list of event titles, dates and summaries (optional). The full event info is opened in a separate page.</p> 
                        </div> 
                        <sfDesignSettings:PagingSetting id="pagingSetting" AllowListLimitSetting="true" DefaultListLimit="100" AllowPagingSetting="true" DefaultPageCount="20" LimitList="false" runat="server"></sfDesignSettings:PagingSetting> 
                          
                        <h4>In the event page, display:</h4> 
                        <ul> 
                    </DetailHeaderTemplate> 
                    <DetailSettings> 
                        <sfDesignSettings:TextSetting ID="setting1" 
                                              TargetID="fullContent1" 
                                              SettingTitle="Title"   
                                              AllowLabelSetting="False"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="False" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                        <sfDesignSettings:TextSetting ID="TextSetting1" 
                                              TargetID="Event_Start"   
                                              SettingTitle="Start date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                       <sfDesignSettings:TextSetting ID="TextSetting8" 
                                              TargetID="Event_End"   
                                              SettingTitle="End date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting10" 
                                              TargetID="Publication_Date"   
                                              SettingTitle="Publication date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting5" 
                                              TargetID="content" 
                                              SettingTitle="Event description"   
                                              AllowLabelSetting="False"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="False" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                        <sfDesignSettings:TextSetting ID="TextSetting9" 
                                              TargetID="Street"   
                                              SettingTitle="Street"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting36" 
                                              TargetID="City"   
                                              SettingTitle="City"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting37" 
                                              TargetID="Country"   
                                              SettingTitle="Country"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                       <sfDesignSettings:TextSetting ID="TextSetting38" 
                                              TargetID="State"   
                                              SettingTitle="State"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>   
                        <sfDesignSettings:TextSetting ID="TextSetting11" 
                                              TargetID="plhWho"   
                                              SettingTitle="Contact person details"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                      <sfDesignSettings:TextSetting ID="TextSetting12" 
                                              TargetID="mapPanel"   
                                              SettingTitle="Geographic map (to set details, use Advanced section above)"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="False">  
                                              </sfDesignSettings:TextSetting>                                  
                      <sfDesignSettings:TextSetting ID="TextSetting3" 
                                              TargetID="plhTags"   
                                              SettingTitle="Tags"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                      <sfDesignSettings:TextSetting ID="TextSetting4" 
                                              TargetID="plhCategory"   
                                              SettingTitle="Category"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>     
                        <sfDesignSettings:TextSetting ID="TextSetting35" 
                                              TargetID="Bookmarks"   
                                              SettingTitle="Social bookmarks (del.icio.us, digg, reddit)"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>                        
                    </DetailSettings> 
                    <DetailFooterTemplate> 
                        </ul> 
                    </DetailFooterTemplate> 
                    <MasterHeaderTemplate> 
                        <h4>For every event in the list page, display:</h4> 
                        <ul> 
                    </MasterHeaderTemplate> 
                    <MasterSettings> 
                        <sfDesignSettings:TextSetting ID="TextSetting6" 
                                              TargetID="fullContent1" 
                                              SettingTitle="Title, linking to the post page"   
                                              AllowLabelSetting="False"   
                                              AllowFormatSetting="False" 
                                              AllowVisibilitySetting="False" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                         <sfDesignSettings:TextSetting ID="TextSetting2" 
                                              TargetID="Event_Start"   
                                              SettingTitle="Start date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting> 
                       <sfDesignSettings:TextSetting ID="TextSetting25" 
                                              TargetID="Event_End"   
                                              SettingTitle="End date"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="DateTime" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="False">  
                                              </sfDesignSettings:TextSetting>   
                      <sfDesignSettings:ContentSetting id="ContentSetting1" 
                                              TargetID="content">  
                                              </sfDesignSettings:ContentSetting>      
                    <sfDesignSettings:TextSetting ID="TextSetting7" 
                                              TargetID="Location"   
                                              SettingTitle="Event location"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="True">  
                                              </sfDesignSettings:TextSetting>                       
                      <sfDesignSettings:TextSetting ID="TextSetting30" 
                                              TargetID="fullContent2"   
                                              SettingTitle="Link 'More information'"   
                                              AllowLabelSetting="True"   
                                              AllowFormatSetting="True" 
                                              FormatType="String" 
                                              AllowVisibilitySetting="True" 
                                              TargetVisibleByDefault="False">  
                                              </sfDesignSettings:TextSetting>                     
                    </MasterSettings> 
                    <MasterFooterTemplate> 
                        </ul> 
                        <sfDesignSettings:BehaviorSetting id="behaviorSetting" runat="server"></sfDesignSettings:BehaviorSetting> 
                    </MasterFooterTemplate> 
                </sfDesign:PresentationModeSettings> 
 

And we are done! Save all the files and head to page editor to edit EventsView control when in List & Page mode.

In tomorrow’s post I will explain what each property of the TextSetting control does, but you can play with it and probably figure it out on your own.

I hope you’ll find this useful. Let me know if you run into problems or have a question.



1 comment

Leave a comment
  1. Gabe Sumner Nov 07, 2008
    Just an FYI, your changes to the ContentView files do not get applied retroactively. Meaning, if you already have "Event View" controls placed on your Sitefinity pages you'll need to remove & re-add these controls before you can use your new options. If you don't do this, your options will display but your changes won't be persisted when you click "Save". This is a really great feature! The item above was the only bump I hit in the road.

    Leave a comment