Sitefinity Dev Blogs

Sitefinity Ecommerce - Pre-purchasing processing hook

Steve Miller — Thu, 24 May 2012 05:35:46 GMT

Another hook introduced into Sitefinity 5.0 is a pre-processing hook that allows you to write customized code through a pre-purchase processing hook in the Ecommerce module.   This could be used to do any business logic that a merchant needs before processing an order.   A developer can create custom code and register the code to be called before the order is placed.
There are endless reasons for why you would want custom code to be executed before placing the order. Below are just a few ideas on how you may take advantage of this extendable and powerful new feature in Sitefinity Ecommerce.
1.    Perform any business logic needed before purchasing and cancel an order if it doesn’t pass validation.
2.    Check inventory quantities with a third party software package such as SAP, NetSuite, QuickBooks and Microsoft Dynamics.
3.    Allow specific products to be purchased based on rules such as 1) only product B to be purchased if product A has been purchased in the past by that user or role.
4.    Check low inventory quantities – send email to applicable purchaser.
5.    Change pricing if needed based on roles or some other business rules.

To use these events developers should add Global.asax file to SitefinityWebApp project and subscribe to the Ecommerce events.

The Ecommerce specific events can only be registered after Sitefinity’s Bootstrapper has initialized. So, first subscribe to the Bootstrapper.Initialized method. In the Bootstapper_Initialized method you can subscribe to Ecommerce specific events like EcommerceEvents.OrderPlaced or EcommerceEvents.PaymentResponse.

See the code below for an example.

I am sure you will find this feature very helpful allowing you to integrate customizations that you may need for your online store. All future exposed events will be in the EcommerceEvents class.

How to display an image gallery for each news item

Slavo Ingilizov — Mon, 21 May 2012 04:00:00 GMT

We’ve seen many requests for the option to associate a Sitefinity news item with a collection of images. A long time ago I blogged on how you could associate a single news item with a single image. Extending that sample to enable multiple image selection is not very hard, and this blog post is going to show you how to do it.

If you just want the source code for the sample, you can download it. Follow the installation instructions at the end of the blog post.

A selector for a single image

The sample you can read about in the previous blog post implements a single image selector. This is a summary of what has been implemented so far:

A selector control, which displays a list of images and returns the ID of the one clicked by the user
A dialog which wraps the selector control and returns the ID of the image when closed
A field control with two modes:
- Write mode (used in the backend to select the image) – opens the dialog and saves the returned image ID.
- Read mode (used to display the selected image in the news widget template) – reads the image ID, and outputs an <img> tag with correct URL.

NOTE: This blog post is an extension to the previous one. It will only go over the new functionality and changes, so if you haven’t gone through the initial implementation, I recommend you do that now.

What needs to be changed

To support multiple images, we need to change the following from our previous sample:

Modify the selector to allow multiple selection
Modify the field control to display all images in Read Mode.

We will go over each of the above items and see how it was implemented. The way the dialog returns the selected images, and how the field control persists them in the custom field stays the same. Instead of saving the ID, we will save a comma-separated list of IDs.

Modify the selector to allow multiple selection

The image selector should be able to highlight multiple selected images. In the previous sample, any time you click an image, your previous selection was lost (because you could only select one). This is all done in the Javascript _binderCommand method of the SimpleImageSelector. Here is the changed code that handles multiple image selection:

 if (args.get_commandName() == "selectImage") {
 var imageUrl = args.get_dataItem().ThumbnailUrl;
 var imageId = args.get_dataItem().Id;

 var jItemElement = jQuery(args.get_itemElement())
 var isItemAlreadySelected = jItemElement.attr('class').indexOf('sf_selectedImage') != -1;

 if (isItemAlreadySelected) {
 var itemIndex = this.arrayContains(this._selectedImageIds, imageId);
 if (itemIndex !== -1) {
 this._selectedImageIds.splice(itemIndex, 1);
 }

 var itemIndexUrl = this.arrayContains(this._selectedImageUrls, imageUrl);
 if (itemIndex !== -1) {
 this._selectedImageUrls.splice(itemIndex, 1);
 }
 jItemElement.removeClass("sf_selectedImage");
 }
 else {
 if (this.arrayContains(this._selectedImageIds, imageId) === -1) {
 this._selectedImageIds.push(imageId);
 }
 if (this.arrayContains(this._selectedImageUrls, imageUrl) === -1) {
 this._selectedImageUrls.push(imageUrl);
 }
 jItemElement.addClass("sf_selectedImage");
 }
}
 
 view raw SimpleImageSelector.js This Gist brought to you by GitHub.

The ID of the image that was clicked is passed as an argument. We keep the IDs and URLs of the already selected images in two arrays. These arrays were not present in the previous sample, where we only kept a single ID and URL. We check if the item is already added, and add or remove it accordingly. Each new item the user clicks will be added to the array, or removed on second click. The code for changing the style of the selected image and returning the selected value does not change.

Modify the field control to display all images in Read Mode

Once a collection of images is selected, the value is persisted as a comma-separated string of their IDs. We need to parse that string and get the images themselves using the API. In the previous version, with only one image to select, the Value property of the field control was returning the ID directly from the UI. We now need to add a private field to hold the value. Here is the full implementation of the Value property.

 public override object Value
{
 get
 {
 var val = string.Empty;
 switch (this.DisplayMode)
 {
 case FieldDisplayMode.Read:
 if (this.value != null)
 val = this.value.ToString();
 break;
 case FieldDisplayMode.Write:
 if (this.value != null)
 val = this.value.ToString();
 break;
 }
 return val;
 }
 set
 {
 if (this.ChildControlsCreated)
 {
 switch (this.DisplayMode)
 {
 case FieldDisplayMode.Write:
 this.TextBoxControl.Text = value as string;
 break;

 case FieldDisplayMode.Read:
 var imageIds = value.ToString().Split(';');
 this.value = imageIds;
 break;
 }
 this.value = null;
 }
 else
 {
 this.value = value;
 }
 }
}
 
 view raw SimpleImageSelector.cs This Gist brought to you by GitHub.

Apart from doing the selection itself, our field control also has the job of presenting the selected images when used in Read mode (i.e. the widget template of a widget). For the purposes of this sample, we will just bind a Repeater control to the list of images. This is done in three of the methods – OnLoad, InitializeControls, and OnPreRender.

 protected override void OnLoad(EventArgs e)
{
 base.OnLoad(e);
 if (this.DisplayMode == FieldDisplayMode.Read)
 this.ImageGalleryControl.ItemDataBound += new RepeaterItemEventHandler(ImageGalleryControl_ItemDataBound);
}

protected override void InitializeControls(GenericContainer container)
{
 this.ConstructControl();
 if (this.DisplayMode == FieldDisplayMode.Read)
 {
 this.LabelControl.Visible = false;
 }
}

protected override void OnPreRender(EventArgs e)
{
 base.OnPreRender(e);
 if (this.DisplayMode == FieldDisplayMode.Read)
 {
 var filterBuilder = new StringBuilder();
 var imageIds = this.Value.ToString().Split(',');
 for (var i = 0; i < imageIds.Length; i++)
 {
 if (i > 0)
 {
 filterBuilder.Append(" OR ");
 }
 filterBuilder.Append(String.Format("Id == {0}", imageIds[i]));
 }
 var filter = filterBuilder.ToString();

 var images = App.WorkWith().Images().Where(i => i.Status == ContentLifecycleStatus.Master).Where(filter).Get();
 this.ImageGalleryControl.DataSource = images;
 this.ImageGalleryControl.DataBind();
 }
}

void ImageGalleryControl_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
 {
 var imageControl = e.Item.FindControl("image") as System.Web.UI.WebControls.Image;
 if (imageControl != null)
 {
 imageControl.ImageUrl = (e.Item.DataItem as Telerik.Sitefinity.Libraries.Model.Image).ThumbnailUrl;
 }
 }
}
 
 view raw SimpleImageField.cs This Gist brought to you by GitHub.

By using the Split() method, we convert the comma-separated string of IDs into an array. From those IDs, we build a filter, which can be passed to the API to get a collection of the selected images. The we just set the Repeater’s data source and call its DataBind() method. On the ItemDataBound event of the Repeater, we set the URL of each <img> tag to the selected image’s thumbnail.

Including the field control in a widget template

Once we’ve implemented multiple selection in our field control, we can include it in the widget template for each news item. This is done with the following markup:

 <%@ Register Assembly="ThumbnailSelectorField" Namespace="Telerik.Sitefinity.Samples" TagPrefix="samples" %>
...
<samples:SimpleImageField ID="imgGalleryField" runat="server" Value='<%# Eval("Thumbnails") %>'></samples:SimpleImageField>
 
 view raw FullNewsItem.ascx This Gist brought to you by GitHub.

Note that in the Value property, we need to supply the name of the custom field which we use to persist the selected images. The next section lists all steps you need to follow in order to setup the multiple image selector for the News module.

Installation Instructions

Create an empty Sitefinity project
Download the source code for the sample
Include the Global.asax and Global.asax.cs files in your web project
Include the existing ThumbnailSelectorField project from the archive, and change its references to point to the BIN folder of your web project. Also include a project reference to it in the web project
Build and run your project
Create a custom field in News with name “Thumbnails” and select a Custom widget for entering data. Enter “Telerik.Sitefinity.Samples.SimpleImageSelector” for the widget type.
Edit the widget template for the Full news item mode of news.
Register the “samples” prefix with the following line:
<%@ Register Assembly="ThumbnailSelectorField" Namespace="Telerik.Sitefinity.Samples" TagPrefix="samples" %>
Include the field control in <ItemTemplate> section
<samples:SimpleImageField ID="imgGalleryField" runat="server" Value='<%# Eval("Thumbnails") %>'></samples:SimpleImageField>

If you have further questions about the sample, please ask them in the comments.

Using Update panel in Sitefinity - Part 2

Jen Peleva — Sat, 19 May 2012 12:22:10 GMT

Let's start with a little introduction on what the UpdatePanel is and how it can help you achieve a wide range of scenarios.

The UpdatePanel is a server control, which allows you to refresh selected parts of the page instead of refreshing the whole page with a postback. It enables a web page to participate in partial-page updates without writing any client script. Moreover, when you use an UpdatePanel control, the page behavior is browser independent and can potentially reduce the amount of data that is transferred between client and server. When partial-page updates are enabled, controls can asynchronously post to the server. An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to regions of the page that are enclosed in UpdatePanel controls and that are marked to be updated. This behavior makes a Web page appear more interactive to the end user. For more information you can visit the MSDN UpdatePanel Overview page.

Now let's get back to UpdatePanel and its use in Sitefinity. A few months ago Teodor Georgiev made a blog post on how to use Update panel in Sitefinity. In it he modifies the update panel so that it works correctly on Sitefinity pages, by moving the logic of the OnInit event to the InitComplete event. This is done to make sure that a Script manager is available on the page when methods, which require it, are executed. The good news is that you don't need to do that anymore. In order to meet our clients' expectations we've included SitefinityUpdatePanel in the source of our system and now you are able to use it directly in your controls. The purpose of this blog post is to show you how this is done. You will find attached a very simple user control with update panel under my post. It consists of a SitefinityUpdatePanel and a label and button controls between the opening and closing tags of the panel. Note that in order to use the SitefinityUpdatePanel directly on the .ascx control, you should include the following tagprefix:

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

This way your application will look for the control in the Telerik.Sitefinity assembly.

.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.ascx.cs" Inherits="SitefinityWebApp.AjaxTest" %>

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

<sf:SitefinityUpdatePanel Id="SUP" runat="server"><ContentTemplate>

<asp:Button Text="ClickME!" Id="Button1" runat="server" />

<asp:Label Id="TestLabel" runat="server" />

</ContentTemplate></sf:SitefinityUpdatePanel>

Now if you look at the code-behind of the sample control, you will notice this attribute- [RequireScriptManager], which explicity indicates that a ScriptManager should be included on the page, so that the contol would work properly:

code-behind

namespace SitefinityWebApp

{

[RequireScriptManager]

public partial class AjaxTest : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

Button1.Click += new EventHandler(Button1_Click);

}

void Button1_Click(object sender, EventArgs e)

{

Button1.Text = "I've been clicked!";

TestLabel.Text = "Page was not refershed!";

}

The rest is nothing that would surprise you. On the Click event of our button, we change the text of the label and the button. Usually, this would cause a postback to the server and the whole page would get refreshed, but since we're using a SitefinityUpdatePanel, when the button is clicked, page updates will be limited to the regions of the page, enclosed by the update panel.

This is all you need to do to use the UpdatePanel. I truly hope that this improvement will help you get the best of developing with Sitefinity!

Download the sample from here.

What’s New in Sitefinity Thunder 1.0.9

Josh Morales — Thu, 17 May 2012 18:59:02 GMT

Thunder Update: An issue with registering templates was discovered and has already been patched. Be sure to update to the latest Sitefinity Thunder version for the fix!

Sitefinity Thunder continued it's timely release schedule last week with a new 1.0.9 release. Here are some highlights.

Website Template Project Type

A new Visual Studio Project type is now available for quickly creating Website Templates.

This project type replaces old "Theme" project type that was previously available in Thunder. While the previous "Theme" project type only supported creating new Sitefinity Themes, the new Sitefinity Template project type supports creating an entire Website Template, including both a Theme and an associated Master Page for creating Page Templates.

Just like before, it generates all the necessary files as a starting point for your theme, now adding the master page to the package.

Of course, you can also add additional master pages to your project, and thunder will automatically detect that type and present it to you when adding a new item to that folder. This is especially handy since working with templates in your App_Data folder of the Sitefinity website doesn't natively allow you to add .master files.

Also, like the old Themes template, this new Sitefinity Website Template project type can be added either to your existing Sitefinity solution, or a separate solution entirely. This is great for sharing your project via source control and keeping your projects and templates organizes.

Uploading Templates

Thunder also gives you the ability to upload your website templates to the live Sitefinity website (be sure you have connected Thunder to your website).

This will also create a new Page Template based on your master pages, as well as register the associated theme in the backend. This is a fantastic time saver!

More to come

Sitefinity Thunder continues to grow and expand, mostly based on your feedback. So be sure to share your experiences, comments, and suggestions in the Sitefinity Thunder Discussion Forum and watch the blogs for the next Thunder update!

Sneak preview: Email Campaigns in Sitefinity 5.1

Hristo Borisov — Wed, 16 May 2012 14:18:16 GMT

During the first ever Sitefinity & Beyond conference in London partners and customers of Sitefinity had the opportunity to see a sneak preview of the upcoming improvements in Email Campaigns in Sitefinity 5.1. While on first sight we are introducing some new features and improved user interface, I want to bring your attention to the innovative changes we are getting to product. A total of 3 features that are all focused to strengthen Sitefinity as a business platform.

New concept of Campaign and Issues
Actionable metrics and reports
Newsletter “Like a webpage”

New concept of Campaign and Issue

Sending email campaigns is often a monthly or weekly activity that keeps your target audience tuned to your company’s latest news, product offerings or community buzz. The experience your customers receive through the e-mail channel should be often consistent and effective for all products and services you offer.

Most of the email campaign products on the market rely on templates that help you deliver consistent experience for your newsletters similar to Sitefinity. However, tracking the effectiveness for the campaigns related to a specific product might be a challenging task. This is often seen in organizations that have multiple brands and serve different audiences. The relationship of the different campaigns for specific products or services is hard to establish if your campaign history screen looks like a mixture of unrelated newsletters and sales promotions.

In this case it is hard to gain any meaningful insights on the long-term effectiveness of your campaigns for a specific product overtime. To help you understand and act on the performance of each campaign we have introduced the concept of an Issue.

What this means is that you can choose your target audience, default email settings, design and content for your newsletter once and name it “Telerik Monthly Campaign”. Then every time you want to send a newsletter e.g. January Newsletter for Telerik, you will end up in the last sent state of your campaign. From there you will be able to modify only the information you want for the new campaign without starting from scratch. Delivering this “increment” of your campaign is what we call an Issue.

This feature allows you to work in the context of the same campaign over time that focuses your energy on improving its performance instead of recreating it every month.

Actionable metrics & reports

As a result of the above feature, now we are able to create much more relevant metrics and reports. We can both compare all relevant newsletter on a single chart, or simply sprinkle suggestions on how your February newsletter compares to your January edition.

Cohort analysis on a campaign level

The best way to compare the performance of your campaigns is to look at the relative values of your metrics for each issue. This is a great way to see how metrics related to the delivery, design or content of your newsletter are performing overtime. We have created a cohort analysis chart that lines up all issues sent from your campaign on the first screen of your campaign.

Issue level metrics

We have created a dedicated screen for each issue that outputs standard metrics such as Delivery rate, Open rate, Click-through rate, Unsubscribe rate and activity for the first 48 hours. Dynamic insights for the performance of your issue in comparison to the previously sent one are also great way to make sense of the metrics and understand the overall effectiveness of your issue.

We are also delivering on the spot suggestions on the things that are affecting the performance of each metric. We have identified the following dependencies related to each metric that are visible also in the user interface:

Metric	Affected by
Delivery rate	Keeping your mailing list up to date
Unique openings	Timing of your email Subject of your email Sender email
Unique clicks	Relevance of information to your audience Number and position of actionable links
Unsubscribed	Relevance of information to your audience
Open rate in the first 48 hours	Timing of your email Subject of your email Sender email

Enhanced Google Analytics support

Should you decide to have Google Analytics tracking, Sitefinity will automatically append Google Tracking code to all existing links based on the following string format utm_source={CampaignName}&utm_medium=newsletter&utm_campaign={Issue Name}. Therefore, if your campaign is called Telerik Monthly and you are sending the January Newsletter issue, your tracking code will be parsed to the following: utm_source=Telerik&Monthly&utm_medium=newsletter&utm_campaign= January%2BNewsletter.

Newsletter “Like a web page”

Sitefinity is giving you the flexibility of designing your newsletter in its Layout Editor like it is a regular webpage. This gives you the power of using already existing widgets and content in the system while Sitefinity is converting all div layouts into tables, so that they can be properly interpreted by the majority of web clients. In previous versions of the product you had to implement all your stylesheets as inline styles which was making this feature hard to use. With Sitefinity 5.1 we have implemented a CSS parser that converts all external CSS files to inline styles, so you can design & edit your newsletter like a web page.

Final thoughts

I am really delighted that we managed to deliver a product that makes our marketing department eager to use it (I have that in black and white:) ). The guys who already saw the early preview were excited about the ease of use and new reports that will be available with the upcoming release. Stay tuned for more information as we will be revealing pretty exciting features of Sitefinity 5.1!

Sitefinity visited Chicago for CMS Expo

Anton Hristov — Tue, 15 May 2012 17:13:19 GMT

Last week a few of my colleagues and I attended CMS Expo, an annual business and learning conference held in Chicago. CMS Expo is not the typical exhibition show. It is rather a casual learning conference filled with back-to-back learning sessions, open-minded people, leading industry speakers and analysts.

It was our first year attending the fifth annual expo and Sitefinity was one of the few proprietary solutions based on the Microsoft .NET platform. The majority of CMS vendors at the expo were focused on the LAMP stack and offered open source solutions.

Nevertheless, it was a great opportunity for us to showcase Sitefinity to the open-source community and to discuss web content management challenges that everyone is trying to address in one way or another.

During the 3-day conference we participated in 3 discussion panels, delivered 2 sessions, and won an award for Best Small Business Website (Texas Roadhouse).

We had a great time at CMS Expo, met with Sitefinity Solution Partners from the area, and made some new contacts and friends. Thank you all for stopping by our booth! See you at the next event.

Below you can download the slides from our two sessions:

Telerik Sitefinity CMS Fly Over (1.26 MB PDF) - slides cover different Sitefinity capabilities such as Mobile Web, Form builder, built-in Ecommerce, and what’s next.

Telerik Sitefinity CMS Showcase (2.49 MB PDF) - slides cover highlights of different Sitefinity projects with their challenges, solutions, and end results.

What are some of the CMS events and conferences that you attend and would like to see us present?

What’s new in Sitefinity documentation for the past two weeks

Slavo Ingilizov — Mon, 14 May 2012 08:02:00 GMT

OK. We have tons of new stuff this time. We’ve covered a big chunk of the ECommerce API in the developers guide and revised some old topics for Security. We are also trying hard to keep the documentation up to date with everything new released in Thunder. We’ve managed to speed up the documentation portal itself significantly by implementing a custom sitemap provider and caching. Here is a detailed list of the topics.

Developers Guide

Getting Started Videos

Blogging Highlights

Stay tuned for more content coming in the next weeks.

Sitefinity Ecommerce – Importing Products into Sitefinity Ecommerce

Steve Miller — Thu, 10 May 2012 23:53:38 GMT

Using the Sitefinity API, I would like to show you how you can import products into Sitefinity Ecommerce.

How it Works

The product importer is actually a widget that is placed onto a page. Once the page has been created, bring up the page in a browser and follow the instructions to upload your file of products to import. Once you have uploaded your file, the product importer widget reads the values from your file and inserts them into the database. The Product Import is deployed as a NuGet package which you import using NuGet. If you are not familiar with NuGet, NuGet is a Visual Studio extension that makes it easy to install and update third-party libraries and tools in Visual Studio. The installation of NuGet is required in order to install the product importer. You can download NuGet at http://nuget.org/.

In this example I am using a .csv file as my data input. The format of this file has been created such that you can add many custom product type fields at the end of the file. Here we are only going to create two custom product type fields, CustomProperty1,CustomProperty2.

Installation

Once you have NuGet installed, please follow the following installation steps.

Installation Steps

Right click on your solution and select “Manage NuGet Packages…”.
In the Manage NuGet Packages window, select “Online” on the left side column then search for “Sitefinity”. NuGet will find the Sitefinity package allowing you to install it directly into your Visual Studio Solution.
Create a folder called “upload” at the top level of your solution. This is where the .csv file will be uploaded in to.
Copy over the file upload widget control into the root of your solution. You can download the Widget from GitHub.
Open Sitefinity Thunder and add the widget to Sitefinity
Build your solution
Start your solution without debugging
When your Sitefinity web site comes up, login to the backend of Sitefinity
In the top navigation, click on “Ecommerce” and select “Type of Products”.
Create all of your product types that you will be importing all of your products into.
Create a new page in Sitefinity and call it productimport
Drag and Drop the new widget you inserted using Sitefinity Thunder onto the page. Save the page.
Bring up this page in your browser and upload your .csv file. This will upload your .csv file into a folder called “upload”, located in the root of your solution.
In the top navigation, go to “Ecommerce” and select “Products” and you should now see all of your products imported.

I have created a video showing you how to install the Product Upload package using NuGet, add a widget using Sitefinity Thunder and upload your .csv file.

Sitefinity Ecommerce Product Import

Credits and thank you to Venkata Koppaka for programming this!

Digesting 3-weeks of Sitefinity news after circling the globe

Gabe Sumner — Mon, 07 May 2012 21:27:46 GMT

During the past 3 weeks I’ve been travelling around the world attending conferences and my email is completely out of control. I’ve been trying to catch-up on Sitefinity news and decided to share my summary with the community.

Major events

Apr. 17th - First ever Sitefinity conference
Apr. 19th – Sitefinity Thunder webinar
Apr. 19th – Sitefinity 5.1 SP1 released
Apr. 24th – Sitefinity at Internet World in London
Apr. 30th – Sitefinity at Internet Show in Melbourne
May 2nd – Sitefinity Thunder 1.0.8 release
May 8th – Sitefinity at CMS Expo in Chicago

Useful Links

6 new videos on our YouTube channel
3 new ecommerce blogs on Steve Miller’s blog

6 new videos in the Sitefinity Guru series

∞ new documentation resources – list by Slavo

Personal notes

During my travels I had a wonderful opportunity to talk to lots of customers, partners and future customers. These conversations are incredibly valuable and help me gain perspective on the real-world opportunities & challenges that exist today. We’re having lots of internal conversations based on the feedback we received. These conversations will eventually result in improvements to the product. Thanks to everyone who chatted with us. I’m looking forward to more conversations at future conferences.

What’s New in Sitefinity Thunder 1.0.8

Josh Morales — Wed, 02 May 2012 16:48:00 GMT

As mentioned in Last week's Sitefinity Thunder webinar, the free extension is on a very aggressive release schedule, with a new release coming approximately every two weeks.

Last week marked the latest Thunder release, which coincided with the Sitefinity 5.0 Service Pack 1. If you haven't already downloaded the service pack, be sure to look for it (and the updated SDK) in your Sitefinity account.

VB Support

Thunder 1.0.8.0 now includes VB support for item templates such as Widgets and Control Designers. Simply select your language when adding a template:

Create, Rename, Duplicate Widget Templates

Another great new feature is the ability to easily add new templates for your widgets by duplicating existing ones, so that you have a solid starting point for a new template.

This is especially helpful if you want to render different layouts or designs for different content from the same module, such as separating news categories.

You also have the ability to rename, duplicate, or delete unused or unwanted templates right from the visual studio interface

Update Today

Several internal performance improvements were made including a known issue that caused Thunder connections to hang.

So for better performance, and of course new features, be sure to always keep your Thunder extension updated!

Remember that you need to also update the Sitefinity Thunder Module installed in your Sitefinity website. This is easily done using the Thunder menu in Visual Studio:

Or you can use the Download button in the Connection Explorer to download a zip file for simple deployment to a remote server.

As always, be sure to share your feedback and suggestions in the dedicated Sitefinity Thunder discussion forum, as your feedback is especially important to us.

Sitefinity's Participation at Internet World: a Marketing Perspective

Petya Popova-Chilikova — Fri, 27 Apr 2012 04:01:00 GMT

It’s been great three days for the Sitefinity team at Internet World 2012 - Europe’s premier event for digital marketing and business. After a hectic preparation for the conference, we were very happy to see a great visitor interest in the Sitefinity booth and demos, and a very high attendance of Gabe Sumner’s seminar sessions.

Sitefinity’s booth

Sitefinity was a sponsor of the Content management theatre and our stand was located at the very heart of the show:

Gabe Sumner’s presentations

On day two of the event Sitefinity’s Chief Evangelist hosted two speaking sessions at the eCommerce and Content management theatres. Both presentations attracted an immense interest and covered some of the newest trends and topics in the ecommerce and web content management world:

Heaven & Hell Examples of Ecommerce Usability
Using Responsive Design to Create a New Generation of Mobile-friendly Websites

And, of course, there were prizes!

Visitors to our booth had the chance to see a demonstration of Sitefinity’s revolutionary Mobile Web feature and participate in a draw for an iPad. Judith Storr from Search Flow was the lucky winner, drawn by Gabe Sumner right before the official closing of the event:

To see more conference photos, visit the Sitefinity Facebook page.

And as Internet World 2012 is only shortly behind us, the Sitefinity team is already preparing for participation at a number of forthcoming events in Australia and the USA. Check out the event schedule, and don’t miss the chance to visit us!

Reflections from Sitefinity & Beyond, London

Fani Kondova — Tue, 24 Apr 2012 13:41:00 GMT

On April 17th the Sitefinity & Beyond conference in London brought together Sitefinity customers and partners from the UK, Norway, Slovenia, Italy, the Netherlands, Denmark, France, Switzerland and Finland. With 100+ attendees, Sitefinity community members and partners, Sitefinity & Beyond London 2012 offered many networking opportunities and fun.

The Venue

The Sitefinity & Beyond conference took place at the British Museum in London. Here are some pictures from this remarkable museum:

The Presentations

Gabe Sumner, Ivan Osmak, Hristo Borisov, and Sitefinity Partners: Boris Motusic from United Experts and Matti Kiviluoto from Avaus delivered sessions focusing on the innovative Sitefinity features and best practices. The overall theme in many of the presentations was feature highlights of Sitefinity 5 – including Mobile Web, Multi-channel campaigns, Productivity heights with Sitefinity Thunder and Upcoming features with Sitefinity 5.1. During the practical sessions – “Sitefinity as an enterprise level CMS” and “Beyond development – be a hero!” Sitefinity Partners Avaus and United Experts presented key takeaways from real-life projects.

Sitefinity Clinic

Conference attendees had the opportunity to sign up for a one-on-one technical discussion with members of the Sitefinity team. The Sitefinity Clinic was running in parallel to the conference sessions and it included 30-minute discussions about specific projects and best practice recommendations.

Networking

Sitefinity & Beyond offered many networking opportunities during coffee breaks, lunch, and during the gala cocktail. We really enjoyed meeting with our customers and partners:

Reflections from Customers and Partners

Sitefinity partners Quba and Light Speed Solutions published detailed reviews of the conference. For those of you who missed the event, you can review the picture gallery at the event website.

Thanks to everyone who participated! We are looking forward to meeting you at the next editions of Sitefinity & Beyond in the US this Fall. Updates will be available on the Sitefinity & Beyond website shortly.

Using conditional templates in your custom widgets

Slavo Ingilizov — Fri, 20 Apr 2012 22:39:00 GMT

As Sitefinity gets bigger as a software project, many small features that get implemented may stay unnoticed. While trying to solve problems, developers often provide solutions that may be used elsewhere, and not just the specific feature they are implementing. This is how design patterns are born. We do have a lot in the Sitefintiy codebase that may not be very well known and used.

One such not-so-famous feature is called Conditional Templates and this blog post is an attempt to explain when and how you can use it in your custom development.

The problem

When implementing functionality as a separate widget, we often have a requirement of providing different user interface, depending on how the widget is used. This is very similar to having multiple widget templates. The different requirement is that you should be able to switch between them dynamically. Let me give a few examples.

A weather widget, which may display its user interface in several modes: current temperature, the current weather as an image, the current weather as text
A widget that displays a different chart: bar chart or pie chart
A widget that can display a value or be used to edit that value

All these cases can be generalized to something, which we will call modes. A mode is just one way of displaying the user interface of a widget.

The solution

I assure you we’ve had many cases like the above in Sitefinity. The solution that was implemented is called conditional templates. They give you the ability to work with multiple widget templates, but let you change them at runtime, depending on a property in the widget. They are not “real” widget templates, but rather different markup from the same template.

The reason this is not very well known is that out of the box it is only supported in the so called field controls, and those work only in the backend. Sitefinity custom development usually leans towards the frontend of a site, not extending Sitefinity’s backend itself. That’s quite normal, but it’s also very easy to use conditional templates for any kind of custom widget. Here’s how.

Create a custom widget and inherit from SimpleView

Let’s take the weather widget example mentioned above.

We recommend that you inherit from SimpleView when implementing custom widgets to be used in Sitefinity. There are a couple of methods and properties you need to override. Those include LayoutTemplateName and LayoutTemplatePath, and also InitializeControls. Instead of doing this manually, alternatively you can use Sitefinity Thunder and it will generate a widget with those overridden by default. For more info on Thunder, head over to the documentation. The final code for the newly created widget is the following:

Implement the property used as a condition

Instead of using strings, I’ll also implement an enumeration with all the modes our widget supports.

Once we have the enumeration, we add a property, whose value will represent the condition in our conditional templates. It will use the enum created above as a type.

Include a ConditionalTemplateContainer in the widget template

Now that we have a property showing the mode, we need to include the markup for each mode in the widget template. This is done by placing a conditional template container inside the template. You also need to register the required namespace Telerik.Sitefinity.Web.UI. Once we have the container on the page, adding a template for each mode is very similar to adding item templates in data-bound controls like the repeater. Here is the final markup

The three important attributes to remember for each conditional template are Left, Operator and Right. Those represent the condition to which the template corresponds. The case above could be translated in plain English as “If Mode is equal to Temperature” (then load the first template) or "If Mode is equal to Text” (load the second template). By setting the value of the Mode property, we can control which markup gets rendered by our widget. This approach is more readable, easier to debug and more structured than manually showing and hiding controls through code or CSS.

Override the CreateContainer method

Up until this point we have implemented our conditional templates. The only thing left to do is hook up the logic to make use of them. As I said above, this has already been done for field controls in Sitefinity. In order to do it in your widgets, you need to override the CreateContainer method. Inside its implementation, you should only call Evaluate() on the conditional template container. That call takes care of everything to initialize the template depending on the condition.

Once you are able to show conditional templates, you can put any markup inside them. The example displays static data, but you can easily use the Sitefinity API to bind to data inside the CMS or implement your own business logic. Then you can switch between the different markup by just setting the value of the Mode property.

You can download the source code of the example shown above from here.

I hope this feature makes you life easier when you encounter a similar need in your future Sitefinity development projects.

Sitefinity Ecommerce–SEO friendly product detail URL

Steve Miller — Fri, 20 Apr 2012 03:44:12 GMT

By default, Sitefinity Ecommerce ships with a date formatted URL for the Product Detail page, which comes very handy if you just want to let your users know when the product was published. But as with any other part of Sitefinity, this URL can be highly customized to meet your own needs and make even more Pretty URL or PURL in general. For Ecommerce, having the date in the URL does not usually create an SEO friendly URL.

You can change the default route of products in 2 ways

1. Using the urlFormat in the backend of Sitefinity
2. Extending OpenAccessCatalogDataProvider in your application

Below is the default URL format of products in Ecommerce

Using urlFormat in the backend of Sitefinity –

This option will let you extend the details by excluding the date in the URL. To attain this URL format you would need to navigate to Backend-> Administration-> Settings-> Advanced-> Catalog->Providers-> OpenAccessProvider-> Parameters and then create a new parameter with the name urlFormat and value /[UrlName], this will change product detail URL by excluding the date. Please also note that new products added to the system will get new URL format by default. However for products which already exist,you will have to republish the existing products to get the new URL format.

Below is a screenshot on how the new URL would look like -

Extending OpenAccessCatalogDataProvider -

This option will let you extend the route of product detail in any way you want. You have complete control over the route that leads to the detail page.

Here is how you would do it –

You will need to change the ProviderType to a custom class in your own application.
Add the code to extend the route. (see example below)

Above is an image on how the changed URL format would look like, please note that you can get the "DetailRouteKey" in any way you want and feed any string into the URL at this moment.

Also, as above note that new products added to the system will get the new URL format by default. However for products which already exist,you will have to republish the existing products to get the new URL format.

I hope this post was helpful.
Credit and thanks to Venkata Koppaka!

Sitefinity Thunder Webinar Notes

Josh Morales — Thu, 19 Apr 2012 16:45:00 GMT

I would like to offer my thanks to everyone who attended today's Webinar on Sitefinity Thunder. I am working on making a video available as soon as possible, so please watch this space for updates (I'll also post an update on Twitter).

I'm also compiling the Q&A, getting details on some questions, and will update this post soon.

Webinar Video

Watch on YouTube

Thunder Download and Information

Sitefinity Thunder is available on the Visual Studio Gallery, from the Extensions manager of Visual Studio, as well as from your Sitefinity account.

Q&A

Below are some questions from the webinar attendees. If your question wasn't answered then or below, please feel free to post in the Sitefinity Thunder Forum.

What about page selectors, htmlfields, and other advanced stuff in control designers?
We plan to provide some default selectors and item templates for a selector (pages, images, etc.) that will be associated with properties that are Guids.

What about master pages for themes?
Creating master pages with themes is in our immediate plans, watch the release notes for more information.

What versions of Sitefinity can use Thunder?
Thunder supports versions starting for 4.2 SP1.

Any plans to create a backdoor API, that doesn't need to be administrator or count against license limitations?
Yes, this is planned for the next major release, Sitefitny 5.1.

Will remote installation/deployment become an option? or will download, extract and ftp upload remain the default?
Remote Sitefinity installation is not in the plans for Thunder. For the moment the current Project Manager solution will stay.

When Masterpages are supported in Thunder, will Sitefinitytheme projects be backwards compatible?
Masterpages are in our plan for one of the next releases (in a month or so) and we'll keep backward compatibility.

Will the intellisense and VS Toolbox functionality work with custom module, custom content types? Meaning will our custom properties show up automatically as well?
Thunder works with all the modules, including those created by the module builder.

Can you insert validation when creating the designer? Yes, you can also use some of the fieldcontrols in Sitefinity which support various validation options.

Would you please clarify what criteria Thunder looks at when creating a designer for a previous control?
Thunder looks for all the custom and user controls in the project.

Please allow Thunder to use downloaded templates from templatebuilder.sitefinity.com
There is a small issue which will be fixed in the next release.

With the inability to write to the disk on an Azure server, can Thunder connect to an Azure hosted website and connect or do we always have to use localhost and publish to Azure after? Some of the features will work with remote instances like Azure, but it is always advisable to work locally, then publish.

Will there be support for VB? This is in the plans for the next release.

How can I install and connect thunder to production environment? You can go to the Connection Settings, select the connection where you would like to upgrade Thunder. Then click on the ""Download"" button and you will be able to save the files that need to be placed in your Sitefinity folders. Just put the .zip file in your Sitefinity folder and unzip it. You need to have some version of Thunder already installed for this to work.

Does Sitefinity Thunder support VS2011?
Yes it is already supported.

what about if my properties are not string or int, but a page or custom type?
We plan to provide some predefined selectors that will work with Guids, similar to how it already works in Sitefinity.

Additional Resources

Be sure to share your experience, comments, and suggestions in the Forum!