Customize Summary in emails from #Episerver Forms

Episerver Forms is getting stronger. Here is a example of the how to customize the summary text with PlaceHolderProvider that is available in version 4.4.

Published 10th February 2017
For Episerver Version 10 and Forms 4.4

PlaceholderProvider in the Episerver.Form.UI  Namespace >4.4 can be used to override the processing of the Placeholder tags #yourelement#

Placeholders are handled with PlaceHolderService. You can replace PlaceHolderService with your own implementation with Dependency Injection.

But in this example i will extend the DefaultPlaceHolderProvider
because i want to reuse the code and override some methods.

DefaultPlaceHolderProvider is the default implementation of IPlaceHolderProvider, which replaces FormElementPlaceHolders with an actual value and provides an extra #SUMMARY# placeholder.

I will add an ExtraPlaceHolder called #FriendlySummary#, that takes away all hidden fields.

Why Changing the summary:

Editors may use summary in every email when confirming the submission to the user. When they used hidden element, they also where showed in summary, and we don’t want that.

Solution:

A form element that is implementing IExcludeInSubmission is automaticly not displayed in Summary, like the captcha element, but IExcludeInSubmission not applicable in this case.

My condition: All form elements with name starting with “Hidden… “ like “Hidden IP” or “Hidden VisitorGroup is returning user” or “Hidden anything” will not be displayed in my #FriendlySummary#

The form with hidden fields:

 

 

The email message:

The emailed result:

The idea in this example is to replace the value shouldNotShowInSummary with a real code, could be done in this provider code.

The Code example

Summary:

Episerver Forms is getting better and better, PlaceholderProvider is great news. Even better would be to add a new property on BaseElement called “HideInSummary” by default.

Gist:

Source:

SEO Terms:

  • SendEmailAfterSubmissionActor
  • Replacing input fields with custom data after submit
  • Changing field output in email
  • Customize Summary placeholder

Automatically migrate Webforms templates to MVC views in #Episerver

In this post I´ll describe how to do it the hard core way by replacing the webforms template (aspx) to MVC view (cshtml).

Published 5th January 2017
For Episerver Version 7.5 and later

In my previous post (How to convert from Webforms to MVC in an #Episerver site) I describe one way of doing it (let´s call it the chicken way, eg making/letting editors use both webforms and MVC models in a Hybrid and use “Convert Pages” to manage convertion). In this post I´ll describe how to do it (the hard core way) by replacing the webforms template (aspx) to MVC view (cshtml).

All this can be done quite easy even on big sites without involving editors and without redoing their content. Do it agile, step by step, the result will be running Webform and MVC beside each other, just by migrating one template at a time.

We’ve done it, with great success.

This method enables you to switch a Content Types Model from using Webforms to MVC.

Migrating to MVC enables you to work with Episerver Forms (which is MVC only)

6 steps summarized (explained later down)

  1. Set up the MVC configuration
  2. Start with the most used page template, normally an article page (I assume you have a webforms block enabled page)
  3. Build the _masterlayout.cshtml with partials, (yes it takes some while to make the _masterlayout.cshtml look like the masterpage.master, but it’s worth it)
  4. Then make a Controller, ViewModel and View to the designated Content Type Model.
    1. TIP 1: Put your logic in the ViewModel Constructor instead of the controller, and reuse the ViewModel on your .aspx.cs, so you only have the logic on one place.
  5. Then make the same procedure with your block models!! This is explained in my post “Using blocks in both MVC and Webforms context
  6. Now to “the switch”
    • Make it in code with TemplateDescriptor
    • Or by switching template in runtime in Admin Mode/Content Types/YourModel/Settings

Set up the MVC configuration

I won’t go in to details here so check a clean install of Episerver, and copy the files from Business-folder, you’ll need minimum to make and register a siteViewEngine with all your custom routing paths. Then normally create the Model View Controller pattern with the same name as the model. You should know this part.

Build your _layout.cshtml and partials

Follow my guide “Using blocks in both MVC and Webforms context

Further more you don’t want some logical code being on two places, in the .ascx and controller, therefore I suggest you put it in the constructor of the ViewModel, for example like this:

Put the logic in the view model constructor:

use it in Webforms ascx:

MVC:

“THE SWITCH”

Your have two ways:

  1. Do it manually in admin UI, go to Admin Mode/Content Types/YourModel/Settings Normally your content type has webforms checked, check instead MVC, choose your Assosiated Controller, SAVE! DONE.

    Prerequisits: TemplateDescription is NOT used in your code or default is false.

    Content Type:

    Webform Template:

    MVC Controller:

    Change in Admin UI:

  2. Do it in the code by using [TemplateDescription(default=true)] on your Controller and the webform-page default=false.

TIP 1:

Remove all postbacks stuff, and build some webapi with json response

TIP 2:

Too much work rebuilding some .ascx controls? Render the ascx on an empty aspx that is requested with jQuery.ajax (an XMLHttpRequest), supplying context thru querystring, and place the rendered response HTML on your page.

Good luck and let me know how it went!

Search terms:
  • Migrating ASP.NET Web Forms to the MVC Pattern
  • Mixing Web Forms and ASP.NET MVC
  • Replacing Webforms with MVC
  • Migrate an ASP.Net Web Forms website to MVC
  • Episerver Forms with webforms

How to convert from Webforms to MVC in an #Episerver site

Stuck with an ASP.NET Webforms-solution? Too much work to redo all web to MVC? Then here is the straight forward way to progressively phase to MVC without rebuilding all… Also with several great bonus’!!

Published 17th December 2016
For Episerver Version 7.5 and later

Here is a guide, how to go from a webforms site to MVC hybrid, and all this can be done quite easy even on big sites without involving editors and without redoing their content.

Do it agile, step by step, the result will be running Webform and MVC beside each other, just by migrating one template at a time, and then tell the editors to build all new pages with MVC.

We’ve done this under 2016, with great success.

This method lets you also easily convert page types to the new MVC page types in “admin/content types/convert pages” built in function.

If you rather want to replace the webform-template with MVC view straight on, read my post Automatically migrate Webforms templates to MVC views

Phasing to MVC enables you to work with Episerver Forms (which is MVC only)

What´s needed then? 6 steps summarized (explained later down)

  1. Set up the MVC configuration
  2. Start with the most used page template, normally an article page (I assume you have a webforms block enabled page)
  3. Create the pagetype model for the new MVC, by pasting all class content (properties and methods) from Webform model into new MVC model, and then inherit the Webform model to the new MVC model. GOT IT? YES!
  4. Build the _masterlayout.cshtml with partials, (yes it takes some while to make the _masterlayout.cshtml look like the masterpage.master, but it’s worth it)
  5. Then make your Controller, ViewModel and View to your MVC model.
    1. Put your logic in the ViewModel Constructor instead of the controller, and reuse the ViewModel on your .aspx.cs, so you only have the logic on one place.
  6. Then make the same procedure with your block models!! This is explained in my post “Using blocks in both MVC and Webforms context

Set up the MVC configuration

I won’t go in to details here so check a clean install of Episerver, and copy the files from Business-folder, you’ll need minimum to make and register a siteViewEngine with all your custom routing paths.

Make an MVC model of your webforms model

Hang on… Create a pagetype model for the new MVC, by pasting all class content (properties and methods) from Webform model into new MVC model, and then inherit the Webform model to the new MVC model.

Lost?

The webform page type must inherit of the MVC page type. The purpose of this is that the models will have the same properties. And easy to convert automaticly later on.

Before:

After:

With the new MVC page type in between:

Build your _layout.cshtml and partials

Follow my guide “Using blocks in both MVC and Webforms context

Further more you don’t want some logical code being on two places, in the .ascx and controller, therefore I suggest you put it in the constructor of the ViewModel, for example like this:

Put the logic in the view model constructor:

use it in Webforms ascx:

MVC:

TIP 1:

Remove all postbacks stuff, and build some webapi with json response

TIP 2:

Too much work rebuilding some .ascx controls? Render the ascx on an empty aspx that is requested with jQuery.ajax (an XMLHttpRequest), supplying context thru querystring, and place the rendered response HTML on your page.

Convert Pages

Now you can convert page types to the new MVC page types in “admin/content types/convert pages” built in function.

Good luck and let me know how it went!

Google Recaptcha and EPiServer.Forms

Forms 3.0.0, CMS 9.12, MVC

Last night I played with EPiServer Forms. And there is a sample pack to install as Eric Herlitz blogs about, for the moment containing a calender picker and Googles Recaptcha, real neet!

Install the EPiServer.Forms.Samples: http://www.herlitz.nu/2016/08/30/add-the-missing-date-time-field-in-episerver-forms/

The RecaptchaElementBlock as it is, needs to have specified a sitekey and secret key (Register at https://www.google.com/recaptcha/ to get your keys)

I found it unfortunate that the editors needed to fill in and remember the keys every time, so i found out a way to set them automaticly when the element block is created thanks to Alf Nilssons sample code on github. (by the way setting Allow Anonymous on Forms is a prefered default)

https://github.com/alfnilsson/EpiserverForms/blob/master/Toders.Forms.Web/Business/Forms/AllowAnonymousSubmissionDefault.cs

My code: