Convert Deprecated Gadgets to Components in #Episerver

This guide shows you how you easily can convert your obsolete MVC gadgets to Component without being a dojo guru. With or without MVC pattern.

Published 8th of June 2017
For Episerver Version 10.6

Gadgets is obsolete from CMS version 10.6

Gadgets has been around in Episerver since CMS 6, and the foremost advantage with Gadget pattern compared with the recommended Components was that it was easy to implement (just make a controller and decorate it with some attributes), quite straight forward and easy. The Components framework seems a little bit more complex, the examples provided by Episerver are involving dojo javascript programming which may not be intuitive to so many, yeah, maybe to no one 😉

BUT Episerver provides a short cut, IFrameComponent, with which I will use to illustrate how you easily can upgrade your gadget to component.

You might think IFrame suck, but if you don’t need the Episerver context, for example in dashboard, this might be a good way. I’m planning to write a guide how do upgrade this example without IFrame, and with dojo, but we’ll see about that.

This example is for administrating users for the also obsolete and legacy Subscription system build in Episerver. It is a dashboard for listing and removing users from the subscriptions on the website.

So let’s start with legacy gadget:

Change Gadget to IFrameComponent, add URL property, and categories, remove all resources. Categories can be “cms,content,dashboard”

The URL must relate to the routing added

In this example I´m not using any view instead just returning HTML from a string. But view will work as usual. You’ll just need to add a _layouts with your resources. In my code I just inline it in the htmlstring.

  

Gist: https://gist.github.com/LucGosso/ec1c38d9bb7a2360fc276a693ef8dd6c CS and JS file

Resources:

SEO terms:

  • The Episerver gadget framework has been deprecated and was replaced by the Episerver Components.
  • How to convert EPiServer gadget to component
  • Creating a component without dojo
  • Gadget to Component with MVC views
  • Create an IFrame Component from a Dashboard gadget
  • Component to administrate subscription users in Episerver

Override CSS in #Episerver editor mode

2 min reading how you can customize and override the CSS in Episerver UI admin with help of module system.

Published 19 April 2017
For Episerver Version 9 and later

In Quan Mai book, Pro Episerver Commerce, which I highly recommend for good understanding of Episerver Commerce platform, he mention under chapter 3, page 55, that you can override the CSS to put a height on the image, since there is no default height on images in Catalogue UI.

This is what i need to inject

In my case the proportion of the thumbnails wasn’t default, so I needed to override, but how?

Overriding using module system

Episerver has a great extensionality with its module system. In this case, just add the right folder structure, for example:

sln-root\modules\_protected\CustomCSS\1.0.0\ClientResources\styles\custom.css

Create a module.config

The module.config should be in the root of your plugin-folder, eg sln-root\modules\_protected\CustomCSS\module.config

Dependencies
You need to use the <moduledependencies> to configure when and where it should run you CSS/Script

  • Shell works in dashboard onlinecenter, CMS and Commerce
  • CMS is standard
  • Commerce is loading after CMS
  • Forms and Episerver.Forms.Samples are loading after Commerce

If you have more modules attached to your solution and if you need to have yours latest, check the loadings of css, and try to figure out what the name of the Module loading it is. Check in their module.config.

 

Remember to IISRESET between changes

And yes, you may override scripts too.

Source

SEO terms

  • Styling admin episerver
  • Custom script injection
  • How to make an Addon for Episerver

Another QuickNavigation Extension and Examples for #EPiServer #AddOn

Nice Episerver addon that adds menu items to the QuickNavigationMenu when logged in on public site, link to admin, link to ContentType, and logout.

Published 22 February 2017
For Episerver Version 9 and later

All configurable links to imagevault, find, admin, admin content type, and logout. Even custom links!

Default menus are Admin and logout, to activate other menu items apply this appsettings: (they are sortable)

You can add custom menu items, Name and url with pipe in between. Name can be lang resource path eg /shell/admin/logout

Download:

Packages are in Episerver’s NuGet feed. If not set up go to Visual Studio => NuGet Package Manager => Package Sources => Add http://nuget.episerver.com/feed/packages.svc/

http://nuget.episerver.com/en/OtherPages/Package/?packageId=Gosso.EPiServerAddOn.QuickNavExtension

More on Github: https://github.com/LucGosso/Gosso.EPiServerAddOn.QuickNavExtension

Regards!

Open in forms view from page tree in #episerver

Finally an AddOn for opening your page in forms edit view instead of on-page edit view.

Published 26 January 2017
For Episerver Version 7.6 and later

Open in forms view
New node added to pagetree context menu

There are many scenarios when you just want to open the forms view direct instead of forced to click page, wait… loading… and then hit the “All Properties” button.

Inspired by Ben and Marija github projects below I’ve made this addon. Be a local hero, download, install, enjoy =)

On Nuget.episerver.com: http://nuget.episerver.com/en/OtherPages/Package/?packageId=Gosso.EPiServerAddOn.ContextMenu.OpenInFormsView

On Github: https://github.com/LucGosso/Gosso.EPiServerAddOn.ContextMenu.OpenInFormsView

Why install it?
  • You’re still missing it from CMS6
  • Faster to open forms view
  • When working in projects and opening many pages, saves time
  • Some functionallity in Epi is faster in forms view, like changing blocks display options
Download these AddOns too:
Search terms:
  • CMS6 open edit mode from tree
  • Disable on-page edit mode
  • Default open in forms view
  • AddOn Tree View Episerver