Simple Styling of EPiServer Forms

Prior to EPiServer Forms 4.5, we were forced to inject in our own styling by editing the less files. This often resulted in breaking functionality where javascript were dependant upon these base CSS classes. EPiServer last year changed this by binding javascript to data attributes freeing us from styling shackles.

This article is for those that are struggling to put the pieces of styling EPiServer Forms together and want a straight forward example.

  1. Implement a class inheriting from IViewModeExternalResources
  2. Create your custom style sheet
  3. Add in Styles to match EPiServer Forms Markup
  4. Build, Run & Test

 

1. Implement a class inheriting from IViewModeExternalResources

Create the follow class anywhere in your solution:

[ServiceConfiguration(ServiceType = typeof(IViewModeExternalResources))]
public class EPiServerFormsViewModeExternalResources : IViewModeExternalResources
{
   public IEnumerable Resources
   {
      get
      {
         var rcList = new List();
         rcList.Add(new Tuple("css", "/YourCssPath/CustomEPiServerForms.css"));
         return rcList;
      }
   }
}

 

2. Create your custom style sheet

Create a css class anywhere in your solution and update the path in step where the text is bold in the previous step.

 

3. Add in Styles to match EPiServer Forms Markup

So here is where your front end designer comes in. You’ll need to provide the markup that will allow them to identify which classes style check section of the form.

Here’s an example for the textbox element

/* Textbox Element */
   .FormTextbox .Form__Element__Caption {
   color: orange;
}
   .FormTextbox .FormTextbox__Input {
   color: red;
}

The TextBox element will appear as follows on the episerver form:

EPiServerFormsColouring

Examples of other elements with their css classes:

Form Element HTML Tag class name
Textbox label .FormTextbox .Form__Element__Captio
Textbox input .FormTextbox .FormTextbox__Input
Number label .FormTextbox–Number .Form__Element__Captio
Number input .FormTextbox–Number.Form .Textbox__Input
Submit button .Form__Element .FormSubmitButton

You can investigate the remaining elements by looking at the ascx files located in EPiServerForms module folder in the ElementBlocks section:

WithEPiServerFormsStyling

 

4. Build, Run & Test

Run the solution and navigate to the page where you’ve setup your EPiServer Forms example.

You will find that your css should be getting loaded in along with the page.

If a style isn’t getting applied but you know it’s being attached to the html tag then try applying the css keyword !important. Sometimes you may be using bootstrap classes and that is overriding your styles.

EPiServer Forms – Quick Start

I was asked once by a client to build some functionality that allowed editors to create forms on the fly without developer effort. EPiServer did the work for us. Here’s an overview on Forms.

Out of the box EPiServer Forms boast the following form elements ready to use:

  • Text, Text Area, Number, DateTime, Range, Url, Rich text
  • Selection, single/multiple choice
  • Image, File uploads
  • Hidden Values, Hidden Visitor Profiling
  • Captcha, Recaptcha
  • Form, Submit, Reset buttons.

All in all, covers most scenarios.

To get started:

  1. Install EPiServer.Forms package via NuGet in Visual Studio
  2. A new tab called Forms will appear in your assets pane alongside Media and Blocks tabs
  3. Click the create new form button in the Forms tab
  4. Once you’ve populated some details about your form, Create it and then you will see a new Forms Elements section in the Forms Tab. From here you can drag over what you need into the form.
  5. At the very minimum you should drag the Submit button over to allow a user to submit the form.
  6. The form itself in the settings tab allows you to add a list of email recipients for where the form data will be sent to.
  7. The form is block based and thus must be dragged into a Content Area for it to be used.

This is your basic form done. Within that you can configure all the out of the box form elements. There are lots of options such as setting Required flags, range limits, regular expressions and even formats.

EPiServer documentation as a create selection of how-tos for different types of forms: http://webhelp.episerver.com/latest/addons/episerver-forms/form-examples.htm

EPiServer Find Index – unknown property

This particular nugget has screwed with me for a few days. When attempting to run a standard EPiServer Find index, my log files were getting flooded with this:

An exception occurred while indexing (Content): MapperParsingException[failed to parse [Blocks.Items.Blocks.Items.DefaultPrice.UnitPrice.Currency]]; nested: ElasticSearchIllegalArgumentException[unknown property [CurrencyCode$$string]]; .

Contact episerver support to get them to move your index to a new cluster. In my case it was confirmed by EPiServer support that it was a timeout issue with regards to a bad cluster the index is sitting on.

Similar: https://support.episerver.com/hc/en-us/articles/115004105763-Find-Index-Timeout-with-OnPublish-Event

EPiServer 10 – Restrict any Block Types on XHtmlString property using the Validation Attribute

I couldn’t find a similar solution online as I believe there is an emerging pattern where we are now instructing clients to drag EPiServer Blocks into Rich Text editors.

Requirement:

As an Editor I want to limit certain blocks types from being dragged into the rich text editor

Solution #1:

Apply this attribute to any of your xhtml properties to enable to validation functionality

[Display(Name = "Text", GroupName = SystemTabNames.Content)]
[XHtmlStringAllowedBlockTypes(new[] { typeof(TextBlock), typeof(ImageBlock) })]
public virtual XhtmlString RichText { get; set; }

 

Implement the following attribute where your other validation attributes reside.

 public class XHtmlStringAllowedBlockTypes : ValidationAttribute
{
private readonly Type[] allowedTypes;
public XHtmlStringAllowedBlockTypes(Type[] allowedTypes)
{
this.allowedTypes = allowedTypes;
}

protected override ValidationResult IsValid(object value, ValidationContext context)
{
var contentData = context.ObjectInstance as IContentData;

if (contentData != null && contentData.Property[context.MemberName].Value is XhtmlString)
{
var richTextProperty = (XhtmlString)contentData.Property[context.MemberName].Value;

foreach (ContentFragment fragment in richTextProperty.Fragments.Where(x => x is ContentFragment))
{
var content = ServiceLocator.Current.GetInstance<IContentRepository>().Get<IContentData>(fragment.ContentLink);

foreach (var allowedType in allowedTypes)
{
if (allowedType.IsInstanceOfType(content))
{
return new ValidationResult(string.Format("You cannot add {0} to {1}", content.GetType(), context.MemberName));
}
}
}
}

return ValidationResult.Success;
}
} 

 

References:

http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/Content/Properties/Property-types/Writing-custom-attributes/

http://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/9/Content/Validation/

EPiServer 7.5 – Exception – More than one content model is assigned to the guid

When running an EPiServer site and you get the exception “More than one content model is assigned to the guid”. This is usually because you’ve changed a namespace.

There will be a reference to the old namespace cached somewhere so do the following:

1) Clear your bin folder

2) Clear the ASP.NET Temporary files folder under the framework version your project is using

New Marie Curie ‘In Your Area’ Search Functionality

For the past two weeks here at Marie Curie we’ve been working on new functionality for searching for Marie Curie services across the United Kingdom. It has just today finally gone live and now we can serve our supporters with better information about the key services and events in their area.

‘In Your Area’

new_inyourarea

On launch we have included the following:

  • Fundraising Groups
  • Fundraising Offices
  • Marie Curie Shops
  • Marie Curie Hospices
  • Events we run

Results are ordered by distance from the location you have entered and can be navigate by either the result list of the result map. Clicking on a result item on one result section, highlights it’s twin in the other.

The page is also fully responsive allowing you to view the search results and map as separate views.

new_inyourarea_mobile_listnew_inyourarea_mobile_map

Click here to go to the live search