In one of our projects we use News page type to show the latest Company news. The news page is an article with title, image, teaser, main content and “See also” section. The section is Content Area with links to other news pages. Editor manually selects few news that should be displayed as related with currently edited news page. Each section item is rendered using custom partial page template. When editor creates news page, he doesn’t know how the page will look like in See also version. That’s why I tried to prepare news page template preview. It will be a custom edit mode view available on News Page.
see also mock


In this article I used Alloy demo code. There is also News Page with template for a page and a custom renderer for a Content Area item. I prepared few news based on Wikipedia articles and photos.
page preview
The See also section is a standard Content Area property.
see also ContentArea property
The custom view will show current page rendered inside Content Area. The item will be between two other fake items, to show how it will looks like with more items scenario. During the implementation I had to solve few issues both on client-side and server-side:

  • the IFrame view doesn’t refresh the content when editing page – I need instant preview,
  • adding current draft to Content Area – the iframe should show page in edit mode,
  • adding fake items to Content Area – content area items use Content References, while fake items are not stored in the database.

In this article I will describe how to prepare iframe view with document refreshed on every page save. Working with fake Content Areas will be described in a separated articles.

Custom IFrame view

To prepare custom view I used class registered as ViewConfiguration service. ControllerType property defines client-side class view. For views with MVC or ASP.NET Forms content “epi-cms/widget/IFrameController” should be used.

The ViewType set the location of iframe document. For now custom view will just display the MetaDescription property value.

The IFrameControler use “epi/shell/widget/Iframe” dependency to display iframe content. Iframe has load method used to show document content based on URL property value. During reloading iframe, when one document is already assigned and new URL is the same as previous one, the load method has no effect and document will not be refreshed. For currently edited page, URL has two parameters: uri and id. For those values, the draft never changes, so the page won’t be refreshed until editor publish a page or refresh browser window.

see also IFrame not refreshed

To solve this problem I implemented extended version of IFrameController. I had to override _constructQuery method. Now the method has additional timestamp query parameter.

Whenever new _constructQuery method is executed, timestamp parameter has new value assigned, the document URL change and iframe is reloaded.

refreshable iframe controller

We have to use “refreshableIframe/refreshablehIframeController” in NewsSeeAlsoView.

Now when editing MetaDescription, property iframe is automatically refreshed.

using refreshableIframeController to Page template preview

In next article I will describe how to render current page inside ContentArea.