Featured

What’s new in #Episerver 10 (for web editors)

Episerver CMS version 10 is since October 2016 available for download, with a dozen tech breaking changes, but what news is there for editors?

Published 6th November 2016
Last update [4th May 2017 *News*]

So what’s in it for the editor?

Hold your hat! Well none

Wait, what?

No, not if you’re going from late version of 9 to 10, only some changes happens under the hood.

Why?

The major versioning system is more a technical thing rather than a market communication event type of thing. The up versioning from 9 to 10 is pointing out that there are incompatible API changes that are needed for the developers to address.

New tech stuff with CMS 10 that might be of interest for editors:

  • Pages that expired, is not redirecting to login page, it’s handled like a 404 Not Found. Great!
  • All dates are saved in UTC (Coordinated Universal Time) in the database. Good for those who publish site pages in a multinational context.
  • Well, not so much more, even if there are more than 50 changes.
  • *New release* [7th November 2016] Episerver Social is released. A cloud based addon for simplifying and standardizing commenting, rating, groups, moderation and activity stream. And no there is for the moment no web editor ui “built in”.
  • *New release* [14th November 2016] Content approvals (beta) This is the first release of the Content Approvals feature, which enables administrators to set up approval sequences containing a number of steps that editors have to collaborate on and approve to be able to publish the content. *Beta is removed in version 10.8*
  • *New release* [5th December 2016] Assets Pane: Handle multiple assets
    The assets pane can now handle multiple selection of folders and items (version 10.2)
  • *New release* [12th December 2016] Projects enabled by default Project mode will now be enabled by default (version 10.2)
  • *news* [April 2017] Add query string parameters to internal links (version 10.7)
  • *news* [April 2017] Import/export refinements (version 10.)
  • *news* [April 2017] Carts – new cart system support in Commerce Manager (version 10.4)

Still reading?

Okey, I’ll give you some old news, here is a summarized feature list from the first version of CMS 9 to CMS 10: (June 2015 – October 2016)

  • Episerver Projects is released and is a great feature when publishing/updating a bunch of pages in a project. With collaboration activity feed and commenting.
  • Episerver Forms is now mature in v4 (only for MVC sites) with marketing automation connectors
  • Rebranded UI interface, from colorful to more red tones, accordingly to Episerver branding profile.
  • New User notifications API – (the small bell up right corner)
  • For Commerce: New Campaign and Discount system, Improved order management and Inventory management in new Cataloge UI.
  • A couple of Market Automation Addons released.

Some statistics of Episerver 9 (dev related):

  • New CMS features : 41
  • CMS bug fixes: 221
  • New Commerce features: 42
  • Commerce bug fixes: 269
  • New features “Other Episerver AddOns” (mostly Forms): 35
  • Bug fixes “Other Episerver AddOns” (mostly Forms): 69

So, alot´s going on, hope to see more news at Ascend Nordic 2016, see you there!

Developers out there, let me know if I missed anything! Comment! Cheers.

Sources:

Revisions:

  • [15th November 2016 – Episerver Social]
  • [25th November 2016 – Content Approvals]
  • [14th February 2017 – Assets Pane & Projects enabled by default]
  • [4th Mai 2017 – Querystring, carts, import]

 

 

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

Extending #Episerver.forms with URL QueryString/post Value Element

How to extend Episerver Forms with a hidden QueryString/HttpPost Value Element.

Published 22nd of May 2017
For Episerver Version 10 and Forms > 4.4

Security warning! Be aware of how you use url parameters. This may be a security risk. Use at own risk or not at all.

Had a case where I needed to save a PageId into a form, similar to an order functionality.

You need an Element model:

And the view (which is a copy of built in PredefinedHiddenElementBlock.ascx)

Save your view under views/shared/elementblocks/

When using the element, just fill in the “Predefined value” with the key used by Querystring or form post.

It pops up in the form elements pane:

And in onpage edit:

In email placeholder you’ll find #OrderId#:

Use it wizely with httpGet or HttpPost

More reading

SEO terms:

  • Hidden post value in element of Episerver Form
  • How to extend episerver forms with querystring value

Get page property from submitting page in #Episerver.Forms

How to read a querystring value from the referrer/hosted form page. Also how to read a page property from the submitting page.

Published 16th May 2017
For Episerver Version 10 and Forms > 4.4

By implementing IPlaceHolderProvider in the Episerver.Form.UI  Namespace > 4.4 you can use it to add your own implementation of the Placeholder tags in email, eg #yourelement#

You’ll need to add an ExtraPlaceHolder called eg #SomePageProperty# and then implement it under ProcessPlaceHolders.

Important to remember! All placeholders in ProcessPlaceHolders will be triggered on every submit, even if it is not used in that form.

In the submissionData object, you have a SYSTEMCOLUMN_HostedPage item, where the id of the page submitting is saved, this is what we’ll use.

In some scenarios you may want to read the referrer page querystring, this may be used with HttpUtility.ParseQueryString(requestBase.UrlReferrer.Query)[“key”]

!Security warning! Be aware of how you use url parameters. This may be a security risk. Use wisely or not at all.

In my next upcoming blog post I will show how you can save http posted values into hidden formelements, but also querystring values.

Gist: https://gist.github.com/LucGosso/08ebb442e42cbb7fe239afe63ea95df5

More reading:

SEO terms

  • Extending Episerver forms
  • Customize email

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