The Shape Tracing feature for Orchard makes it a snap to find and override shapes all over your sites, and I use it regularly to create alternates. A common use case is to find and override a part’s shape based on it’s content type – really useful if you want to alter how a part looks if it is on a page, product, contact, etc. I found myself in a scenario today where I wanted to override a shape based on both the content type or the display type, and both at the same time.

The documentation on Alternates lists only 2 alternates for parts, [ShapeType]__[ContentType], and [ShapeType]__[Id], but thanks to Orchard’s near-infinite level of flexibility, we can quite easily add as many alternates as we want.

A quick read through WidgetAlternatesFactory and UrlAlternatesFactory should be more than enough to get you started, but the key is to latch on to when a shape is displayed, and inject some alternate shape names.

I ended up with the following implementation:

public class PartContentTypeAlternateFactory : ShapeDisplayEvents {
    public override void Displaying(ShapeDisplayingContext context) {
        context.ShapeMetadata.OnDisplaying(displayedContext => {
            var shapeType = displayedContext.ShapeMetadata.Type;
            var contentItem = displayedContext.Shape.ContentItem;
            var displayType = displayedContext.ShapeMetadata.DisplayType;
            var contentType = contentItem.ContentType;
            displayedContext.ShapeMetadata.Alternates.Add(
                String.Format("{0}__{1}", shapeType, displayType));
            displayedContext.ShapeMetadata.Alternates.Add(
                String.Format("{0}__{1}__{2}", shapeType, (string)contentType, displayType));
            });
    }
}

And you end up with some alternates like this:

Surprisingly, I couldn’t find any information about people hitting this problem before (maybe I’m just doing it wrong?), but if this helps let me know in the comments!

Alternates are very powerful, for example you can customise the shape of the first item on your blog, override shapes based on the current URL, and much more.

Happy Orcharding!

One of my favourite things about Orchard is Shapes, and how we can easily create reusable pieces of functionality that can be placed almost anywhere on your site. Orchard provides a few built-in shapes that you can use to add that extra bit of awesome to your modules. Today, we’ll look at the Pager shape, and I’ll demonstrate how you can add it to your module’s admin interface.

The Pager adds page numbers and back/forward controls, which makes it easier to navigate through long lists of items. It looks like this:

Or, if you have a few more items…

Neat! So how do we use it? First lets assume we have a module that provides a controller, which renders a list items on to a page in the admin dashboard. In this example, we’ll start by creating a controller that shows a list of all RouteParts on the site, and then add paging.

Our controller looks like this:

[Admin]
public class RoutesController : Controller
{
 
    private IOrchardServices _orchard;
 
    public RoutesController(IOrchardServices orchard)
    {
        _orchard = orchard;
    }
 
    public ActionResult Index()
    {
        var routes = _orchard.ContentManager.Query<RoutePart>()
                                                .List();
        var list = _orchard.New.List();
        list.AddRange(routes.Select(r => _orchard.ContentManager.BuildDisplay(r, "SummaryAdmin")));
 
        return View((object)list);
    }
}

This also has a view:

@model dynamic
@{
    Layout.Title = "List of RouteParts";
}
<fieldset class="contentItems bulk-items">
    @Display(Model)
</fieldset>

All we are doing here is getting a list of RouteParts and displaying their SummaryAdmin shapes. This is almost a less interesting version of the content items admin menu section.

The pager shape is really quite simple. When it is displayed it renders itself as a drop-down list (for setting the page size) and a few buttons to skip back/forwards or to a specific page. Selecting a page size causes a POST request to the current page, with pageSize and page parameters. Pressing one of the buttons causes a GET request to the current page, with the same parameters. Both of these can be represented by the PagerParameters object.

So, we’ll need to split our action method into two to handle each request. We also need to use the page index and page size parameters to restrict the number of elements returned via the view.

[HttpGet]
public ActionResult Index(int? page, int? pageSize)
{
    return Index(new PagerParameters
    {
        Page = page,
        PageSize = pageSize
    });
}
 
[HttpPost]
public ActionResult Index(PagerParameters pagerParameters)
{
 
    var routes = _orchard.ContentManager.Query<RoutePart>()
                                        .List();
 
    // Create our pager object and it's shape
    Pager pager = new Pager(_orchard.WorkContext.CurrentSite, pagerParameters);
    dynamic pagerShape = _orchard.New.Pager(pager).TotalItemCount(routes.Count());
 
    // Generate a list of shapes, restricting by pager parameters
    var list = _orchard.New.List();
    list.AddRange(routes.Skip(pager.GetStartIndex())
                        .Take(pager.PageSize)
                        .Select(r => _orchard.ContentManager.BuildDisplay(r, "SummaryAdmin")));
 
    return View((object)new IndexViewModel
    {
        Items = list,
        Pager = pagerShape
    });
}

Note that for the [HttpGet] method we are specifying the parameters separately, because we can’t duplicate the method signature for Index(). You could give the methods different names (e.g. in Orchard.Blogs.Controllers.BlogAdminController), and that might be a better idea for anything more complex – however I just find this easier to read.

Now all that remains is to add the pager to our view…

@model dynamic
@{
    Layout.Title = "List of RouteParts";
}
<fieldset class="contentItems bulk-items">
    @Display(Model.Items)
</fieldset>
@using(Html.BeginForm("Index", "Routes", FormMethod.Post))
{
    @Display(Model.Pager)
}

We add the Html.BeginForm() so that we create the form element required for the dropdown list to submit it’s POST request (since we didn’t give it any routing information).

It’s as simple as that! If you want to have a look at the full source, you can find it over on BitBucket. Happy Orcharding