Orchard 1.9 Layout Elements

Topics: Customizing Orchard, Writing modules
May 9, 2015 at 10:31 PM
I am really in love with the new layout control in 1.9. Also, the idea of Element-First coding I think is a good idea. I can see the majority of my work being involved with creating new elements. I have been looking over the Layout module, however because I am new to Orchard it is bit difficult to understand what it involved with creating new base elements. Are there is any examples of how to create/add new base elements from a separate module?
Developer
May 9, 2015 at 11:30 PM
Edited May 9, 2015 at 11:33 PM
Very pleased to hear, thank you!
I will write a post on writing custom elements, but until then perhaps the following guidelines will help you get started.

Creating your own element requires the following steps at a minimum:
  1. Create a class that derives from Element.
  2. Create an element driver class.
  3. To control the markup of your element, create a view called Elements.MyElement.cshtml (or Elements/MyElement.cshtml). Optionally provide an alternate for the Design display type to customize the way the element is rendered in design mode.
There's much more to say about the possibilities of what you can do as an element author, but until that's documented somewhere you can look at the existing element drivers that closest resemble your type of element.

If you have any questions, please do not hesitate to ask.
May 13, 2015 at 4:23 PM
I've done all of the above but my new element still isn't appearing within the layout of a page.

I'm trying to make a customised Grid component which will have extra markup to enable a carousel but still behave like a normal grid. Each row will then end up being an item within the carousel.
 public class CarouselElement : Element {
        public const int GridSize = 12;

        public override string Category {
            get { return "Layout"; }
        }

        public override LocalizedString DisplayText {
            get { return T("Carousel"); }
        }

        public override bool IsSystemElement {
            get { return true; }
        }

        public override bool HasEditor {
            get { return false; }
        }
    }
and
public class CarouselElementDriver : ElementDriver<CarouselElement>
{
}
To me I think I should be registering this element with something but I can't figure out what. I got the above from looking at the existing GridElement code.

Am I missing something?
May 13, 2015 at 7:27 PM
I am currently trying to create a separate module that will create additional Layout Element(s) by inheriting from the Layout Module. However, because I am new to Orchard and Layouts progress is slow. Still, I am excited about the possibilities of designing Elements for the Layout control.

@sfmskywalker : I do look forward to reading your post about creating new elements.
May 15, 2015 at 5:05 AM
I finished new creating a new base layout element in a separate module. I created a new module using codegen and carefully duplicated the all files and folders related to the HTML element. Afterwards, I changed all the HTML filenames and variables to XML, for example 'HtmlElementDriver" becomes "XmlElementDriver". While the new element is just a copy of the HTML element it serves as proof of concept and guide line for creating new elements.

The next step is to have the test element display the XML entered during Edit Mode and process the XML to produce an Image during Display Mode.
Aug 14, 2015 at 10:14 AM
I am trying to create a new layout element by following the steps mentioned in this post. There is issue in view rendering. Below is the structure i have created.

Views
    EditorTemplates
          Elements.Map.cshtml
    Elements
          Map.cshtml
          Map.Design.cshtml
Please let me know what is the convention followed for view names. I am really stuck here. Please help.
Developer
Aug 14, 2015 at 11:40 AM
What's the issue exactly?
The convention for element view names is as you listed above.
Aug 14, 2015 at 6:49 PM
I found the solution. It seems the name of element class should match with view names. In my case name of element class was "MapElement" and view name was "Map.cshtml", hence it was not getting rendered. after changing view name to "MapElement.cshtml" everything is working fine.