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

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