Mastering Sitefinity MVC Widget Development

Name: Mastering Sitefinity MVC Widget Development
Rating: 4.6 (81 reviews)

Learn the ins and outs of developing professional MVC widgets for Sitefinity

Created byLino Tadros

Last updated 6/2022

English

English [Auto],

What you'll learn

Students will learn how to create MVC based Widgets in Sitefinity and create Widget Designers to facilitate changes of properties.
You will be able to understand the use of Angular in building Widget Designers
You will be able to create external Assemblies to host your widgets
You will be able to bring Razor syntax highlighting to Class Library projects for Widgets

Course content

6 sections • 32 lectures • 3h 3m total length

Introduction1:55

Introduction to Sitefinity VSIX and Sitefinity CLI7:20
Introduction to VSIX and CLI
Installing the Sitefinity CLI5:56
Installing the CLI
Generating the First Sitefinity Widget9:58
Explore how a Sitefinity widget retrieves data via a model, connects to a controller, and renders with a resource syntax view, using action results like index.
The use of ControllerToolboxItem Attribute9:06
The use of ControllerToolboxItem Attribute
Using the First Widget on a Page7:18
Using the First Widget on a Page
Using a second widget on a page with HandleUnknownAction9:00
Using a second widget on a page with HandleUnknownAction

Introduction to Widget Designers3:16
Discover how Site Trinity widget designers automatically generate edit interfaces by reflecting public properties on the controller, saving and retrieving values without writing code.
Adding Multiple Type properties to Models1:54
Adding Multiple Type properties to Conntrollers4:27
Publish five properties in the widget controller and auto reflect them in the designer. See text, boolean, enum, and date fields, with automatic save and retrieval by Sitefinity.
Adding Multiple Type properties to Views4:41
Extend the index view by binding properties such as message, enum, and date number, displaying them in divs. Recompile cshtml when needed and publish to update the live page cache.
Adding Simple Attributes to affect visability of public properties2:28
Using MixedContentContext for Image Properties7:41
Using Library Manager API to access the Image in the View11:08
Adding Page Selectors, Tag Selectors, News Selectors and more to Designers4:48
Demonstrates adding page, tag, and news selectors to designers by using a content-type attribute above a property declaration, enabling auto-populated selectors for pages, taxonomies, and news without extra UI.

Sitefinity Feather Convention for creating Custom Widget Designers6:41
Explore how Sitefinity Feather enables custom widget designers by creating your own designer view, overriding the automatic designer, and switching between simple HTML and advanced property editors.
Adding a second Custom Widget Designer3:20
Adding a JSON file to set priority and visibility5:34
Learn how to control widget priority and visibility in Sitefinity MVC by using per-view JSON files, setting priority and hidden flags, and conditionally exposing admin views.
Adding JSON file to set Components and Scripts4:06
Configure a json file for the widget designer with priority, hidden, and arrays for components and scripts, including fidelity provider, image selector, and video selector in the components array.
Using Angular to persist public property to the database8:41
Angular persists public widget properties to the Sitefinity database via the properties collection, using ng-model bindings to energy model properties and JSON configuration.
Fixing the missing sf-Date-Time-Selector for the Custom Designer1:47

Creating a class library to contain an MVC Widget for Sitefinity6:31
Create a separate class library assembly for a Sitefinity MVC widget, drop the DLL into the bin folder for deployment across sites, and manage NuGet packages for .NET framework 4.8.
Upgrading the Sitefinity Application4:10
Upgrade a Sitefinity application from 14.17823 to 14.17824 by updating nuget packages, accepting licenses, overwriting changes, building, and performing the initial database upgrade.
Adding Nuget Packages to the Class Library4:23
Install and manage NuGet packages for the class library, matching Trinity Core and Feather Core versions, then link the My External Widget project so builds automatically include latest changes.
Adding the ConntrollerContainer Attribute to the assembly2:38
Using the Sitefinity CLI to generate a Widget for the Class Library6:17
Use the Sitefinity CLI to generate a widget for a class library, create the MVC folders (controllers, models, views), and embed CSS and other resources as embedded resources.
Enabling Code Completion for CSHTML files in Class Library5:05
Enable cshtml code completion in a class library by adding a web.config to feed the razor compiler, consolidating bin outputs, cleaning and building to reveal model properties.
Building and running our new widget from the Class Library2:57
Build and run a new Sitefinity MVC widget from a class library, compile and place it in bin, register it on the site, and edit via the widget designer.
Modifying the CssClass, sfMvcIcn and the main icon for the widget11:10
Customize Sitefinity MVC widgets by changing the CSS class and SF MVC icon, inspect 50 by 30 pixel icons with dev tools, and re-register widgets via toolbox settings.

Requirements

Understanding of Sitefinity as a Content Management System
Prior knowledge of MVC is a plus
General Knowledge of .NET development is a plus

Description

In addition to Sitefinity CMS built-in widgets, you can create new widgets from scratch and implement your own logic and customize widgets' built-in functionality. You also have the option of keeping the widgets in separate assemblies and deploy them independently of your project. You can then use your new widgets side by side with the built-in ones.

With Sitefinity CMS, you have the option to develop widgets in both the SitefinityWebApp project or in external assemblies. The underlying development concept is the same but the way you organize and manage your code differs between the two methods.

In this course you will learn the following:

Building a Sitefinity application from scratch using Nuget Packages in Visual Studio
Using the Sitefinity CLI to generate boiler plate code for Widgets
Understand the use of Controllers, Models and Views in the structure of a Sitefinity Widget
Learn about the Automatic Widget Designer in Sitefinity
Learn about the Property Attributes that facilitate the creation of complex UX in Widget Designers
Building Custom widget Designers and the use of Sitefinity Feather
Using JSON files to set the Priority, Visibility, Components and Scripts for a Designer
Using Angular to connect public properties to the Sitefinity database in Designers
Building Class Libraries to host external Sitefinity Widgets
Tips and tricks along the way to make Sitefinity MVC Widget Development fun and productive.

Who this course is for:

The target students for this course are students looking to develop MVC widgets for Sitefinity professionally
Also students needing to build Widget Designers for Sitefinity MVC Widgets

Mastering Sitefinity MVC Widget Development

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Setup Visual Studio for Sitefinity Development3 lectures • 20min

Developing MVC Widgets in Visual Studio6 lectures • 49min

Sitefinity Automatic Widget Designers8 lectures • 40min

Sitefinity custom Widget Designers6 lectures • 30min

Developing MVC Widgets in Class Libraries8 lectures • 43min

Requirements

Description

Who this course is for: