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

How to create new content types using Generic Content Modules – Webinar

by Gabe Sumner

Thanks to everyone who attended the live webinar.  Due to technical problems I could not record the live webinar.  However, I re-did the webinar offline and recorded this version.  It is included below.

Here is the description of this webinar:

A lot of diverse content is managed on Sitefinity.com (showcases, KB articles, testimonials, marketplace items, release notes, etc). Behind the scenes all of this content is managed using custom Generic Content modules. These modules are quick and easy to create. This webinar will pull back the curtain and show how Sitefinity.com is being managed by Telerik’s web team. In addition, this webinar will demonstrate how to create your own custom Generic Content modules to manage specialized content.

Posted below are my personal notes while planning and broadcasting this webinar.

Creating the Release Notes Module

1.  Add a <cmsEngine> provider for the new GC module

<add
  name="Release_Notes"
  urlRewriteFormat="[Title].aspx"
  urlDateTimeFormat="yy-MM-dd"
  urlWhitespaceChar=["_"
  visible="True"
  defaultMetaField="Title"
  securityProviderName=""
  allowVersioning="True"
  applicationName="/Release_Notes"
  versioningProviderName=""
  commentsModeration="true"
  connectionStringName="GenericContentConnection"
  type="Telerik.Cms.Engine.Data.Providers.DefaultProvider, Telerik.Cms.Engine.Data" />

2.  Add the meta fields for this new GC provider

<add key="Release_Notes.Name" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue="Name this content" mandatory="True"/>
<add key="Release_Notes.Description" valueType="LongText" visible="True" searchable="False" sortable="True" defaultValue="Add description here"/>
<add key="Release_Notes.Author" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Release_Notes.Category" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>

3.  Create a new Release Notes item

4.  Drag & Drop a Generic Content control onto a page & select the Release Notes

5.  Drag & Drop a Content List onto the page and edit the Data –> Provider Name

--

Convert Release Notes Module to a News-based Modules

1.  Convert Release_Notes to DefaultNewsProvider

<add
  name="Release_Notes"
  urlRewriteFormat="[Publication_Date]/[Title].aspx"
  urlDateTimeFormat="yy-MM-dd"
  urlWhitespaceChar="_"
  visible="True"
  defaultMetaField="Title"
  securityProviderName=""
  allowVersioning="True"
  applicationName="/Release_Notes"
  versioningProviderName=""
  commentsModeration="true"
  connectionStringName="GenericContentConnection"
  type="Telerik.News.Data.DefaultNewsProvider, Telerik.News.Data"/>

2.  Convert Metafields for Release_Notes

<add key="Release_Notes.Title" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Release_Notes.Summary" valueType="LongText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Release_Notes.Author" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Release_Notes.Source" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Release_Notes.Publication_Date" valueType="DateTime" visible="True" searchable="True" sortable="True" defaultValue="#Now"/>
<add key="Release_Notes.Expiration_Date" valueType="DateTime" visible="True" searchable="True" sortable="True" defaultValue="#Max"/>
<add key="Release_Notes.Thumbnail" valueType="ShortText" visible="True" searchable="False" sortable="False" defaultValue=""/>
<add key="Release_Notes.Category" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue="" />

3.  Add Release_Notes to News section

<news defaultGenericProvider="News">
  <genericContentProviders>
    ...
    <add providerName="Release_Notes" publicationDateField="Publication_Date" expirationDateField="Expiration_Date" thumbnailUrlField="Thumbnail" urlRewriteFormat="[Category]/[Title].aspx" urlDateTimeFormat="yy-MM-dd" urlWhitespaceChar="-"/>
    ...
  </genericContentProviders>
</news>

4.  Drag & drop NewsView control onto page, change data ProviderName to Release_Notes

--

How to create a Marketplace Module

1.  Add the cmsEngine provider

<add
  name="Marketplace"
  urlRewriteFormat="[Title].aspx"
  urlDateTimeFormat="yy-MM-dd"
  urlWhitespaceChar="_"
  visible="True"
  defaultMetaField="Title"
  securityProviderName=""
  allowVersioning="True"
  applicationName="/Marketplace"
  versioningProviderName=""
  commentsModeration="true"
  connectionStringName="GenericContentConnection"
  type="Telerik.News.Data.DefaultNewsProvider, Telerik.News.Data"/>

2.  Add the meta fields

<add key="Marketplace.Title" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Marketplace.Summary" valueType="LongText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Marketplace.Author" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Marketplace.Publication_Date" valueType="DateTime" visible="True" searchable="True" sortable="True" defaultValue="#Now"/>
<add key="Marketplace.Expiration_Date" valueType="DateTime" visible="True" searchable="True" sortable="True" defaultValue="#Max"/>
<add key="Marketplace.Thumbnail" valueType="ShortText" visible="True" searchable="False" sortable="False" defaultValue=""/>
<add key="Marketplace.Category" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue="" />
<add key="Marketplace.Price" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Marketplace.Version" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>
<add key="Marketplace.DownloadUrl" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue=""/>

3.  Add the Marketplace to the News provider section

<news defaultGenericProvider="News">
  <genericContentProviders>
    ...
    <add providerName="Marketplace" publicationDateField="Publication_Date" expirationDateField="Expiration_Date" thumbnailUrlField="Thumbnail" urlRewriteFormat="[Category]/[Title].aspx" urlDateTimeFormat="yy-MM-dd" urlWhitespaceChar="-"/>
    ...
  </genericContentProviders>
</news>

metaField properties

  • valueType
  • visible
  • searchable
  • sortable
  • defaultValue
  • mandatory

--

Map External Templates for the new GC Provider

1.  Download the external templates

2.  Create ~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml

<?xml version="1.0" encoding="utf-8"?>
<controlsConfig>
  <viewMap>

    <viewSettings hostType="Telerik.News.WebControls.Admin.NewsItemsList">
      <additionalTemplates>
        <add key="Marketplace" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Marketplace/NewsItemsList.ascx" />
      </additionalTemplates>
    </viewSettings>

    <viewSettings hostType="Telerik.News.WebControls.Admin.NewsItemEdit">
      <additionalTemplates>
        <add key="Marketplace" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Marketplace/NewsItemEdit.ascx" />
      </additionalTemplates>
    </viewSettings>

    <viewSettings hostType="Telerik.News.WebControls.Admin.NewsItemNew">
      <additionalTemplates>
        <add key="Marketplace" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Marketplace/NewsItemNew.ascx" />
      </additionalTemplates>
    </viewSettings>
    
  </viewMap>
</controlsConfig>

3.  Copy News templates from ZIP file:

Copy: (zip file)/Sitefinity/Admin/ControlTemplates/News/*
To: ~/Sitefinity/Admin/ControlTemplates/Marketplace/

Note:  If you wish to rename these files, then you must also rename the associated resources (RESX) (App_LocalResources) file.

--

Modify the Admin ControlTemplates

The following templates need modified to use the custom metaFields:

  • ContentItemsList.ascx
  • ContentNewView.ascx
  • ContentEditView.ascx

Find the input fields in these templates that reference GC metaFields and replace with references to the custom metaFields:

~/Sitefinity/Admin/ControlTemplates/Marketplace/ContentNewView.ascx

<h3>Additional Info</h3>
<fieldset class="set">
    <ol class="setIn">
        <li>
            <asp:Label ID="Label4" AssociatedControlID="Summary" runat="server">
                Summary
            </asp:Label>
            <asp:TextBox ID="Summary" TextMode="MultiLine" Text="" runat="server" />
            <p class="example">
                Brief description of the item.
            </p>
        </li>
        <li>
            <asp:Label ID="Label3" AssociatedControlID="Price" runat="server">
                Price
            </asp:Label>
            <asp:TextBox ID="Price" runat="server" MaxLength="250" />
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="Price"
                ValidationExpression="\d+(\.\d{1,2})?" Display="Dynamic" EnableViewState="False"
                CssClass="validMessage" SetFocusOnError="True" ValidationGroup="EditNews">
                <strong>The price is not a valid number!</strong>
            </asp:RegularExpressionValidator>
            <p class="example">
                The price of the module (control).
            </p>
        </li>
        <li>
            <asp:Label ID="Label10" AssociatedControlID="Version" runat="server">
                Version
            </asp:Label>
            <asp:TextBox ID="Version" Text="" runat="server" MaxLength="250" />
            <p class="example">
                The version of the module (control).
            </p>
        </li>
        <li>
            <asp:Label ID="Label5" AssociatedControlID="DownloadUrl" runat="server">
                Download Url
            </asp:Label>
            <asp:TextBox ID="DownloadUrl" Text="" runat="server" MaxLength="250" />
            <p class="example">
                The URL from where the module (control) can be downloaded.
            </p>
        </li>
        <li class="selector">
            <asp:Label ID="Label2" AssociatedControlID="Thumbnail" runat="server">
                Image
            </asp:Label>
            <asp:TextBox ID="Thumbnail" Text="" runat="server" MaxLength="250" />
            <p class="example">
                The URL of the image associated with the module (control).
            </p>
        </li>
    </ol>
</fieldset>
<div class="bottom">
    <div>
        <!-- -->
    </div>
</div>

~/Sitefinity/Admin/ControlTemplates/Marketplace/ContentEditView.ascx

Same thing

~/Sitefinity/Admin/ControlTemplates/Marketplace/ContentListView.ascx

  1. Update the MetaField references in the ClientTemplatesHolder tag
  2. Update the GridTemplateColumns in the RadGrid
  3. Update the values for the requiredMetaFields Javascript collection

Modifying the Public Templates

1.  Create a MarketplaceView control

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for MarketplaceView
/// </summary>
public class MarketplaceView : Telerik.News.WebControls.NewsView
{
	public MarketplaceView()
	{
	}

    public override string ProviderName
    {
        get
        {
            return "Marketplace";
        }
    }

    public override string ItemListTemplatePath
    {
        get
        {
            return "~/Sitefinity/ControlTemplates/Marketplace/ListPageMaster.ascx";
        }
    }

    public override string SingleItemTemplatePath
    {
        get
        {
            return "~/Sitefinity/ControlTemplates/Marketplace/ListPageDetails.ascx";
        }
    }
}

2.  Copy News templates to ~/Sitefinity/ControlTemplates/Marketplace

3.  Copy social XML and social images from the News folder

4.  Add missing fields

<p class="sf_newsAuthor">
    Author: <asp:Literal ID="Author" runat="server"></asp:Literal>
</p>
<p>
    Version: <asp:Literal ID="Version" runat="server"></asp:Literal>
</p>
<p>
    Price: <asp:Literal ID="Price" runat="server"></asp:Literal>
</p>
<p>
    Download URL: <asp:HyperLink ID="DownloadUrl" runat="server" NavigateUrl='<% = this.Text %>'></asp:HyperLink>
</p>
<asp:PlaceHolder ID="ThumbnailHolder" runat="server">
    <p class="sf_newsThumbnail"><asp:Image ID="Thumbnail" runat="server" /></p>
</asp:PlaceHolder>

--

Adding an Image Selector

1.  Add namespace reference

<%@ Register TagPrefix="sfLib" Namespace="Telerik.Libraries.WebControls" Assembly="Telerik.Libraries" %>

2.  Add an image selector link after the image TextBox

<sfLib:ButtonSelector ID="ButtonSelector1" WindowNavigateUrl="~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx"
    ItemTemplatePath="~/Sitefinity/Admin/ControlTemplates/News/Dialogs/ButtonSelector.ascx"
    AssociatedControls="Thumbnail" runat="server" CssClass="pickerWrapper" ButtonText="Select" />

--

Adding a link to the module’s menu

1.  Create a new module

~/App_Code/MarketplaceModule.cs

using System.Collections.Generic;

public class MarketplaceModule : Telerik.WebModule
{
    public override IList<Telerik.Web.IToolboxItem> Controls
    {
        get { return null; }
    }

    public override string Description
    {
        get { return "This is the marketplace module."; }
    }

    public override string Name
    {
        get { return "Marketplace"; }
    }

    public override string Title
    {
        get { return "Marketplace"; }
    }

    public override System.Web.UI.Control CreateControlPanel(System.Web.UI.TemplateControl parent)
    {
        return parent.LoadControl("~/Sitefinity/Admin/ControlTemplates/Marketplace/ControlPanel.ascx");
    }
}

2.  Create a ControlPanel

~/Sitefinity/Sitefinity/Admin/ControlTemplates/Marketplace/ControlPanel.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ControlPanel.ascx.cs" Inherits="Sitefinity_Admin_ControlTemplates_Marketplace_ControlPanel" %>

~/Sitefinity/Sitefinity/Admin/ControlTemplates/Marketplace/ControlPanel.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Sitefinity_Admin_ControlTemplates_Marketplace_ControlPanel : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Redirect("~/Sitefinity/Admin/Modules.aspx?Module=News&DataProvider=Marketplace");
    }
}

--

Next Steps

  1. Create another GC module to manage authors (publishers)
  2. Create a custom provider selector
  3. Use the API to create custom controls & functionality
  4. Customize the ControlDesigners

Related Links:

Joseph Guadagno - Creating a new Sitefinity Generic Content Module
Sitefinity Forums - Generic Content Provider
Sitefinity Forums - Adding a News Provider
Sitefinity Forums – Add Columns to Admin Events Module
Sitefinity Forums - Document Download List + Thumbnails
Sitefinity Forums - Replace Repeater with DataList in News View control
Sitefinity Forums - Adding Thumbnails to blog
Sitefinity KB - Adding a Custom Provider for Generic Content
Sitefinity Documentation – Add Custom Meta Fields

10 comments

Leave a comment
  1. Daniel Plomp Jul 09, 2010
    Hi Gabe,

    Thanks for this Webinar. Very nice and it makes things clear! Wish I've knew this before! Hope that with the launch of SF 4.0, there will be more of these video's and documentation. Not the basic stuff, but things like this.

    One question I have: what do I have to do to show that MarketPlace thumbnail inside the Backend template? That would be nice to have, because otherwise you don't know what image you have selected.

    Could you explain that to us?

    Thanks!
  2. sam Jul 10, 2010
    Hi Gabe,

    Thanks! That was really good and easy to understand!
    I would like to see a short webinar or blog post on how to create a selector for authors, as this would really answer alot of questions.

    Also I would really like to see a webinar on adding customisations to the users management section, like adding unlock user ability, user verfication and adding content types that have relationships with users e.g courses..
  3. Peter Jul 20, 2010
    Thanks for this. Really gave some insight into how things can be solved. Would be interrested in the follow ups!
  4. Patrick Jul 30, 2010
    Hi Gabe,

    Superb webinar! Easy to understand and use! I too would like to see a followup which covers the creation of an Authors selector.
    How many of this will be usable in Sitefinity 4.0?

    Thank you!
  5. Patrick Aug 04, 2010
    Hi Gabe,

    I tried creating a new Events module named Calendar, just by doing the first steps (copying News module, editing names, copying Meta tags and editing names. This does not appear to be enough for making the new module visible. Could you help on this? 
  6. Will Aug 05, 2010
    Thanks for the great webinar, this is extremely useful while we wait for 4.0 to be released. +1 to an article on implementing custom selectors.
  7. Will Aug 10, 2010
    Hi Gabe,
    I just implemented this technique for a project, and ran into a problem when basing my custom content type on Generic Content instead of News. I think the defaultMetaField in the first step/sample code should be set to Name, not Title. With the metafield set up as Name to match Generic Content, you will not run into a problem until you use the Edit control template. At that point you will still be able to save changes, but the Name/Title field will not populate correctly.

    After much debugging/troubleshooting, I changed the defaultMetaField from Title to Name, and the problem was solved. It was strange it viewed correctly in the list, new, and preview content screens, and only had a problem when loading the edit. Perhaps the sample code could be changed to reflect this in case someone is only looking to extend Generic Content rather than News?

    Thanks!
  8. Scott Rozman Oct 06, 2010
    Excellent information! Wish I had watched sooner. A variation of what you've shown is going to really simplify some things I've been working through.
    I've been working with RSS to share out News and Events to other sub-domain instances... Now I can connect to the news hub from within my sub sites.
    Same issue goes for shared library items. We have some slideshow images that are used in multiple sites. By defining an extra provider, I can just deal pull in those from a different central site.
  9. Jason Orlosky Jan 14, 2011
    Gabe,
    If I wanted to add a new custom meta field based on the RadEditor, how would I do that?  Since it doesn't look like the RadEditor has a text field, and that's how the values are persisted.
  10. Michael Raynal Feb 04, 2011
    Gabe..Gret information....Best explanation Ive seen. One question. If found the providers are only viewable if I set the  Active Directory Role of my Contnet Providers to Unrestricted access. Without this They fo not see the provider dropdowns.

    Leave a comment