Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Per Magne Skuseth
Mar 20, 2013
  5096
(6 votes)

Is your site Add-On friendly?

A couple of weeks ago, I got a question from a developer who was wondering what the RequiredClientResources web controls in the Alloy templates were used for. If you take a look Alloy’s MasterPage, you’ll find one inside the head tag, and one at the bottom. Notice how they are marked with different values for the RenderingArea property:

   1: <EPiServer:RequiredClientResources RenderingArea="Header"
   2:     ID="RequiredResourcesHeader" runat="server" />
   3: <EPiServer:RequiredClientResources RenderingArea="Footer"
   4:     ID="RequiredResourcesFooter" runat="server" />

These can be used to render client resources(javascript for example), from other places, such as user controls and page templates:

   1: ClientResources.RequireScript("Scripts/MyScript.js"); // Will render in the header area (default)
   2: ClientResources.RequireScript("Scripts/MyScript.js").AtFooter(); // Will render in the footer area

This is useful if you want to keep your client resource rendering clean and tidy. But there are other uses as well. Add-ons and modules are not directly linked to your templates, but some of them might require some client resources to be rendered on your pages. As an example, the google analytics add-on uses this to add a tracking script to your page.

If you are developing your own add-on and want to render client resources, you can try this code as an example:

   1: [ClientResourceRegister]
   2: public class MyModuleResourceRegister : PageClientResourceRegister
   3: {
   4:     protected override void RegisterResources(IRequiredClientResourceList requiredResources, 
   5:         HttpContextBase context, PageData pageData)
   6:     {
   7:         requiredResources.RequireScript(Paths.ToClientResource(this.GetType(), 
   8:             "Scripts/MyNeatScript.js")).AtFooter();
   9:     }
  10: }

Short walkthrough: Add a ClientResourceRegister attribute to you class, and inherit from the PageClientResourceRegister. By overriding the RegisterRosource method, we are able to add our own client resources. In this case – a JavaScript file called MyNeatScript. Inline JavaScript could also be added by using RequireScriptInline.We could also add other client resources, such as a css file, or html.

Note: you also have a PageData object available, which will give you the current page being rendered, which can be useful if you need to affect the rendering based on the current page.

Note 2: Since this is a (hypothetical ) add-on, I use Paths.ToClientResource to make sure that the path to the script points to the right place – add-on locations may differ.

So how do I make my site add-on friendly?
Implement the client resource rendering with both Header and Footer area and you should be fine. It should only take you a few minutes. This is also marked as a step for upgrading your site from 6 to 7 in the SDK so you should consider it kinda important.

For the curious ones out there, the client resources are registered just before the Render event in Web Forms (OnPreRenderComplete).

What if I’m using MVC?
If you’re using MVC, you can use the following (you’ll find the code for this in the MVC templates as well):

   1: @Html.RequiredClientResources(RenderingTags.Footer)

The EPiServer PageController has a RequireClientResources action filter to allow the register process to run for your views.

Mar 20, 2013

Comments

Marcus Granström
Marcus Granström Mar 21, 2013 11:23 AM

Yes this is something we at EPiServer consider to be best practice. Enables site owners to install addons without having developers help.

Mar 21, 2013 04:34 PM

Really interesting post.

Is there a list of full template best practices to be add-on friendly?

1) Including RequiredClientResources
2) Correctly referencing dependencies using Nuget - something the Alloy templates don't do!
3) ......................................

David Sandeberg
David Sandeberg Mar 21, 2013 09:49 PM

Good to know. Thanks for bloggning about it!

Mar 22, 2013 10:49 AM

@Mark, take a look at this SDK article: http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-CMS/7/Client-Resources/Client-Resource-Management/
It describes basic requirements and best practices for managing client resources when developing CMS templates.

Please login to comment.
Latest blogs
Optimizely DXP - Leader in Forrester Wave Q4 2023

There are many reasons why its nominated as leader including below but not limited to: Developers friendly - devs and architect love to implement i...

Yagnik Jadav | Dec 11, 2023 | Syndicated blog

Live on Optimizely CMS 12 and .NET 8

"Better late than never" is a fitting saying here. We've finally gotten around to updating the CodeArt.dk website to Optimizely CMS 12 and .NET 8!

Allan Thraen | Dec 10, 2023 | Syndicated blog

Date property editor

The Optimizely CMS has built-in DateTime property. When editing, the Editor selects both the date and the time. Sometimes we would like to configur...

Grzegorz Wiecheć | Dec 9, 2023 | Syndicated blog

Update related content

In this article, I will show simple code that allow to replace linked content with other content selected by the Editor. When deleting content whos...

Grzegorz Wiecheć | Dec 8, 2023 | Syndicated blog

Getting Started with Optimizely SaaS Core and Next.js Integration: Content Areas and Blocks

The blog guide elaborates on improving content rendering by exploring content areas and blocks within the Optimizely CMS. It walks through setting ...

Francisco Quintanilla | Dec 8, 2023 | Syndicated blog

Maximize performance by uploading your external data to Optimizely Graph

Learn to integrate external data into Optimizely Graph for improved performance, covering data preparation, synchronization, and effective querying.

Surjit Bharath | Dec 6, 2023 | Syndicated blog