This project is read-only.

Projection Widget Alternate: Finding List Shape

Topics: Customizing Orchard, General
Jun 16, 2013 at 11:22 AM
I create a projection widget with the name ProductList.
Then i alternate the view using Widget-Name-ProductList.cshtml.
The alternate is working, and then i'm trying to find the List shape.
I can get it from Model.Content.Items[1].Items

Now i'm wondering wether Items[1] will always contains the list shape or is there any other way that i'm supposed to use ?

Thanks in advance.
Jun 16, 2013 at 4:14 PM
Why do you need to get the List?
Jun 17, 2013 at 6:12 AM
Because i need to generate a template that using <div></div> instead of <ul></ul>.
I tried to alternate List template, but i couldn't find an alternate that specific enough to alter only List on ProjectionWidget called ProductList.

List-ProjectionWidget.cshtml -> changed all my other projection widgets.
List-ProjectionWidget-[Zone].cshtml -> if i put the widget on another zone it won't work.
Jun 17, 2013 at 8:56 AM
In 1.x and soon in 1.7 you have the following new projection layouts:

Raw Renders content with custom separators.
Shape Uses a specific shape name to render the layout.

With these new layouts you can do this exactly.
Oct 2, 2013 at 4:20 PM
For others that may run across this here is what did for this situation. I had the following situation:
  • Events content type (date, starttime, endtime, summary, image, etc.)
  • Added a projection widget to homepage layer
  • Selected Raw format for the query layout and called the layout Summary
  • I needed to customize the output of the event items in the list returned by the projection
I tried the approach that StevenSuryanaP tried by creating a Widget-Name-events.cshtml but couldn't find a way to iterate over the list. After thinking about it I really just needed to format the list entries and not the list itself since I was using Raw as the format. So I created a template for the query layout called Summary (Content-Events.Summary.cshtml). This allowed me to do this for each list item:
@using Orchard.Utility.Extensions;
    // Get model
    var eventDetail = Model.ContentItem.Events;
    var title = Model.ContentItem.TitlePart.Title;
    var body = new HtmlString(eventDetail.Summary.Value);
    var rotatorUrl = eventDetail.RotatorImage.FileName.ToString().Remove(0,1);

<article class="eventsFeature">
    <a href="@Model.ContentItem.AutoroutePart.DisplayAlias"><img src="@rotatorUrl" alt="@title"></a>
    <div class="text">
        <p class="date"><span class="month">@eventDetail.EventDate.DateTime.ToString("MMM")</span> <span class="day">@eventDetail.EventDate.DateTime.ToString("dd")</span></p>
        <h2><a href="@Model.ContentItem.AutoroutePart.DisplayAlias">@title</a></h2>
        <p class="time">@eventDetail.StartTime.DateTime.ToString("h:mm tt") - @eventDetail.EndTime.DateTime.ToString("h:mm tt")</p>
        <a href="/events" class="button">See More Events</a>
One more item was to override the Widget.Wrapper.cshtml to change the wrapper tags and I was all set. I hope this helps someone else.
Oct 16, 2013 at 9:18 PM
Hey, so if i get it correctly, in the Raw layout, you specify a view with its name. what is in that view? What model is coming in? how do you iterate through the items within the projection in that Raw layout?
Oct 17, 2013 at 1:43 PM
I created a view for the layout I created (Content-Events.Summary.cshtml), which is called for each item in the list or result set. You do not have to iterate over the list because that is done for you. In my example the model is an individual event much like the model displayed on that event page.