Projector : new implementations ideas

Topics: Core, Writing modules
Mar 2, 2012 at 2:00 PM

Now 1.4 has shipped with Projector, it would be interesting to implement some new features in the core modules or as independent modules :

Projector should have other layouts : 

- Table (with Headers)
- Calendar 
- Separator (just specifiying a simple text)
- Alphabetical (Grouping + A-Z anchors)

Some common scenarios could be easily implemented with a bit of javascript : 
- FAQ (choosing Question and Answer properties)
- Tabs
- Accordion
- Carrousel
- SlideShow
- News Ticker
- JQuery mobile (lists)
- Infinite Scroll (needs Ajax endpoints)

If you have other ideas, share them.

If you want to contribute to develop some of them, let us know.

A Contrib.Projections module could be a good place to start building cool features.

If you want some of these features to be implemented in the next version, vote for the work item :

Mar 2, 2012 at 11:31 PM

A contrib.projector module sounds like an excellent idea. Go for it!

Jun 5, 2012 at 1:11 PM

I've made an table layout and a shapes module to make use of within this module. Shall we merge my layout module? Can i join your codeplex project? and Trello Board?

Jun 5, 2012 at 2:21 PM

What is your module? ?

Is it up to date ?

I started to make a Table Layout using something similar to your Table Shape.

I am a bit blocked to generate the headers from the properties.

I could add you as a contributor on codeplex and on the Trello board (give me your Trello account name).

Jun 5, 2012 at 4:12 PM

no that version is very old. I've succeed to make the headers generate from properties so i'll commit that to tonight. I will create a trello account also.

Jun 5, 2012 at 7:43 PM


I've updated the Custom Shapes module see:

This module can be used by extensions like but can also be used without the projector dependency.

I've made an trello account:

I also updated the contribprojections module so that it uses the custom shapes module and the Table with headings property. The headings property is probably not very nicely implemented but it works for the time being. The headings can also be translated and I'm currently already using it in:

Jun 20, 2012 at 7:36 PM

Hey agriffard,

I didn't know this post was started. I have a module well under way using the Projector to implement a calendar in Orchard:

I think I need another couple of hours to tweek it out and have it useable but at it's core, it is targeting native Projector with only one more Content Part used. It uses an open source calendar view to accomplish the UI side of things. Let me know your thoughts on what you need out of a good calendar view and I will see if I can finish this up. So you know, the motivation right now are to be able to handle the features that are provided by Microsoft Outlook.

Jun 20, 2012 at 8:10 PM

Could you setup a demo instance on appharbor so we can play with it ? Or even Azure Websites ?

Jun 21, 2012 at 2:00 AM

I will see if I can get a working version on Azure Websites - possibly by this upcoming weekend.

Jul 13, 2012 at 1:01 AM

As far as FAQ goes, I just complete a FAQ page using content types, queries and projection. Below is a very brief outline.


  1. Created a FAQ content part with three fields: Category (Enumeration), Question (Text), Answer (Text), Position (Number) 
  2. Created new content type with FAQ as part, added Category field options, Question as TEXTAREA, Answer as HTML (for adding line breaks, bullet points, etc.)
  3. Added new query. 
    1. Filter: Category
    2. Sort: by Position
    3. Layout: Unordered HTML
    4. Display Mode: Properties
    5. Add properties for Question and Answer. 
    6. For both add a Label with a space. 
    7. For both add Style -> Customize HTML Wrapper. I added 'faqq' class for question property and 'faqa' for Answer. 
  4. Add widget for every query to the layer(s) you need them in. 
  5. Add the following code at the bottom of the Layout.cshtml (replace the "/faq" with the route of your FAQ page:
   <script type="text/javascript">
       // we will add our javascript code here  
       $(".faqq").click(function() {