Widgetizing Zones

However, in this particular case, the client wanted to be able to drop one ore more TaxonomyMenuWidgets on to this filter. The idea being that the filter would post the selected terms to a projection page, which contains a custom filter that parses the querystring.
Essentially, the client needed to be able to drop one or more widgets onto a single widget. Is that even possible? Well, currently Orchard only has an UI for dropping widgets onto zones. Even though you could render shapes from any template you like, there's no UI to manage that.
So, what to do?

As it turns out, it's really quite simple: just define a Zone in your Theme.txt, for example "Filter".
Normally, one would render a zone in Layout.cshtml. Instead, I modified the template of the widget to render the zone:

~/Views/Widget-FilterWidget.cshtml:

<h1>Filter Options:</h1>
<form action="@Request.QueryString" method="GET">
 @Display(Layout.Filter)
 
 <button type="reset">Clear Filters</button>
 <button type="submit">Submit</button>
</form>

 

When you're rendering a shape in Layout.cshtml, you typically see: @Display(Model.Filter) to render a zone called "Filter". However, since we're in another template ("Widget-FilterWidget.cshtml"), the Model is that of the widget. So to render a zone, we are accessing it via the Layout property.
With this widget in place, the client can drop any widget he wants into the "Filter" zone, but it will only be rendered if the FilterWidget is rendered. And obviously, this widget can be dropped into any zone you want.

Nice!

One disadvantage of using this technique a lot is that the Zones list will be cluttered up real quick. Also, it's not very intuitive for a user to drop widgets on a "global" zone while that zone feels more like a "specific" zone.
Perhaps one day we will be able to define multiple "Layouts" using the admin, where each layout has it's own set of zones.
Until then, may this technique may serve you well.

2 comments

  • ... Posted by Martina Posted 12/13/2012 05:23 PM
    <p>Hi! Thanks a lot for so useful blog and this post in particular. Could you please also explain how was you able to parameterize the query with the taxonomy selected dynamically by user? And How TaxonomyMenuWidget can be displayed here as a dropdown for filtering purposes? I'm very new in Orchard. I found similar question here <a href="http://stackoverflow.com/questions/12266105/orchard-projection-query-filtering-taxonomy-terms" rel="nofollow">http://stackoverflow.com/quest...</a>, but it is still not answered...</p>
  • ... Posted by Vincent Yates Posted 12/20/2012 07:57 AM [http://marnyblevins.webstarts.com/]

    a software development process bring out the most important trait for a developer which is problem solving.

Leave a comment