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

Exception: Cannot find compilation library location for package ‘Microsoft.AspNetCore’

System.InvalidOperationException: Cannot find compilation library location for package ‘Microsoft.AspNetCore’

Most likely you’ve upgraded your aspnetcore version and you have not cleared the existing files before deployment.

If you’re using Azure DevOps as your build and release server you can enable “Remove Additional Files at destination” on your release step.

AspNetCore Debugging Startup issue in Azure Web App

Whilst upgrading from AspNetCore 2.0 to 2.1, some of the StartUp configuration had changed slightly and part of the upgrade required me to refactor code into the webhost builder. However as a result I didn’t quite do everything and after deploying to azure web app, I was hit with a 502 response. An exception being thrown in main(). This was a problem because it was happening before it could get to my logging initialization and therefore no logging was happening.

So in order to debug Azure Web App AspNetCore startup issues we need to enable stdout logging which throws all exceptions to a log file. This method of logging is unfiltered and gets heavy very quickly. Therefore it is inadvisable to keep it turned on.

Enable STDOUT on Azure Web App

  1. Go to your azure web app in Azure Portal
  2. Open Kudu Console
  3. Using the navigation bar at the top of the page, open Debug console and select CMD
  4. Navigate to folder site > wwwroot
  5. Edit the web.config
  6. Set stdoutLogEnabled to true and stdoutLogFile to \\?\%home%\LogFiles\stdout
  7. Select Save
  8. Make a request to the application url
  9. In Kudu, navigate to the LogFiles folder
  10. Open the new files marked with stdout
  11. When the log file opens, the error is displayed.
  12. you must disable stdoutLogEnabled by setting to false when you are done

 

Source: https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/azure-apps/troubleshoot?view=aspnetcore-2.1#aspnet-core-module-stdout-log

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