SITEFINITY FEATHER, AN

INTRODUCTION

ABOUT MEVenkata Koppaka• Senior Software Engineer at Falafel Software• Focus on WebCMS products• I love AngularJS, and mobile development with

Xamarin• Twitter: @vkoppaka• Blog:

http://blog.falafel.com/author/venkata-koppaka/

WHAT IS FEATHER• As Telerik Sitefinity team describes it, Feather is a Modern, intuitive,

convention based, mobile-first UI for Telerik Sitefinity™• Powered by ASP.NET MVC, AngularJS, Bootstrap, KendoUI• Not a replacement to current set of widgets and technologies that

ship with Sitefinity, but rather an extension• Open source• Currently in beta, hitting RTM release soon• Will be a separate project from core Sitefinity product but will be

officially supported for Telerik support channels

WHY FEATHER• A little history on Sitefinity and web forms controls• Easy to follow conventions for most of the

frontend customizations

WHY FEATHER NO MORE WEBFORMS!

WHAT FEATHER INCLUDES• Support for multiple frontend frameworks like Bootstrap,

SemanticUI and foundation• Stock MVC widgets of most of the current Sitefinity controls• All Feather widgets are mobile first, meaning they are responsive in

nature.• AngularJS based new designer frameworks (no more prototype

pattern!)• Majority of customizations are convention based• Infrastructure enhancements

FEATURES• MVC Widgets in Class libraries• MVC Widget templates• Layout files• Resource Packages• Page templates based on Layout files• WidgetContent helpers• Angular designers• Support for webforms designers

BEFORE WE GO FURTHER…• Remember Feather is still a

BETA product and should not be used in production apps until it hits RTM.

INSTALLING FEATHER• Nuget driven• All packages are hosted on Sitefinity’s Nuget feed

http://nuget.sitefinity.com • Add Sitefinity’s nuget feed in Visual Studio• SitefinityWebApp needs Telerik.Sitefinity.Feather package• Make sure AssemblyInfo.cs has [assembly: ControllerContainer] • Add Feather’s Service to SystemConfig.config

DEMO

RESOURCE PACKAGES• Resource packages are the CSS / Frontend frameworks that Feather

supports. Currently, feather supports 3• Bootstrap• SemanticUI• Foundation

• You can add any other frontend framework based packages based on the Feather Packages repository https://github.com/Sitefinity/feather-packages

• Each package includes • CSS• JS• Layouts• Widget templates• Fonts• Images

DEMO

Hello World MVC Widget• DEMO

Simple “Settings” View• DEMO

Settings View priority• DEMO

Attribute Support• Browsable

• [Browsable(false)]

• DisplayName• [DisplayName("This is a custom title")]

Advanced Designer• DEMO

Additional Scripts in Designer

MVC Widget Templates• DEMO

Layout Templates• DEMO

Page templates• DEMO

WidgetContent Helper

<script src='@Url.WidgetContent("~/Mvc/Scripts/Angular/angular-route.js")'></script>

Passing Server Data to Views

Carousel Widget• DEMO

Resources• Sitefinity Feather site - http://projectfeather.sitefinity.com/ • Sitefinity Feather Github repo – https://

github.com/Sitefinity/feather • Sitefinity Feather Samples repo –

https://github.com/Sitefinity/feather-samples • Sitefinity Feather Packages repo –

https://github.com/Sitefinity/feather-packages • Sitefinity Feather Widgets repo –

https://github.com/Sitefinity/feather-widgets • Sitefinity Feather Issues – https://

github.com/Sitefinity/feather-widgets/issues

QUESTIONS