How can I create one element in my module

Topics: Customizing Orchard
Aug 14, 2015 at 12:37 PM
Hi,

How can I create my own element in Orchard Create new page window.!

Image :
https://drive.google.com/file/d/0B0LukXeHz5VdREtvd19GSHZ1Tm8/view?usp=sharing
Developer
Aug 14, 2015 at 12:42 PM
You can create your own elements by implementing classes that derive from the Element class in the Orchard.Layouts.Framework.Elements namespace. You also need to implement an element driver for your element (even if it contains no members, the TypedElementHarvester relies on this to discover elements).

Checkout the Html element for a good example.
Marked as answer by Nitheesh on 8/14/2015 at 10:16 AM
Aug 14, 2015 at 12:45 PM
Hi sfmskywalker thanks for your valuable replay...

I am in new to Orchard, so can you plz share one sample code for element creation?
Developer
Aug 14, 2015 at 12:55 PM
Sure, here's an example of a custom element:
using Orchard.Layouts.Framework.Elements;

public class MyElement : Element {
    public override LocalizedString DisplayText {
        get { return T("My Custom Element"); }
    }

    public int SomeCustomProperty {
       get { return this.Retrieve(x => x.SomeCustomProperty); }
       set { this.Store(x => x.SomeCustomProperty, value); }
    }
}
And here is its driver:
using Orchard.Layouts.Framework.Drivers;

public class MyElementDriver : ElementDriver<MyElement> {
  // Optionally override members like BuildEditor and UpdateEditor similar to creating content part drivers.
}
For complete examples, checkout the source code in the Orchard.Layouts module, specifically the Elements and Drivers folders.
Let me know if you have any further questions.
Aug 14, 2015 at 12:58 PM
Thank you sfmskywalker, thank you somuch..
Aug 14, 2015 at 1:10 PM
Edited Aug 14, 2015 at 1:11 PM
Hi I have created one element class like this
using System;
using System.Globalization;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Orchard.Layouts.Framework.Elements;
using Orchard.Layouts.Helpers;
using System.ComponentModel.DataAnnotations;

namespace MyCustomElement.Elements
{
    public class MyCustomElement: Element
    {
        public override string Category
        {
            get { return "Media"; }
        }

        public override string ToolboxIcon
        {
            get { return "\uf1c5"; }
        }

        [Required]
        public int Count
        {
            get { return this.Retrieve(x => x.Count); }
            set { this.Store(x => x.Count, value); }
        }

        [Required]
        public int GroupId
        {
            get { return this.Retrieve(x => x.GroupId); }
            set { this.Store(x => x.GroupId, value); }
        }
    }
}
But in here I have getting one namespace error like this:

Error 10 The type or namespace name 'Element' could not be found (are you missing a using directive or an assembly reference?)

On here : public class MyCustomElement: Element


I am using Orchard v.1.9.1.0
Aug 14, 2015 at 1:15 PM
Edited Aug 14, 2015 at 1:15 PM
And also getting error in Driver class
using Orchard.Layouts.Framework.Display;
using MyCustom.Models;
using Orchard.MediaLibrary.Fields;
using Orchard.Layouts.Settings;
using Orchard.Environment.Extensions;
using Orchard.DynamicForms.Elements;
using Orchard.Layouts.Framework.Drivers;

namespace MyCustomElement.Drivers
{
    [OrchardFeature("MyCustomElement.Elements")]
    public class MyCustomElementElementDriver : ElementDriver<MyCustom>
    {
Error 11 The type or namespace name 'ElementDriver' could not be found (are you missing a using directive or an assembly reference?)

On here : public class MyCustomElementElementDriver : ElementDriver<MyCustom>
Developer
Aug 14, 2015 at 1:20 PM
Did you add a project reference to Orchard.Layouts?
Marked as answer by Nitheesh on 8/14/2015 at 10:15 AM
Aug 14, 2015 at 1:31 PM
Edited Aug 14, 2015 at 1:32 PM
Thank's sfmskywalker, Now it's fixed.

Now I have added Orchard.Layouts reference to my module.
Aug 14, 2015 at 1:45 PM
Edited Aug 14, 2015 at 1:57 PM
And one more doubt...

Want to specify any details about elements in Placement.info and Migrations.cs ?

And can u plz suggest any modules with Element feacher in Orchard gallery?
Developer
Aug 14, 2015 at 3:41 PM
There's nothing to do with Placement.info or Migrations when it comes to elements.

Sorry, I don't know if there are gallery modules out there that provide custom elements.
You can have a look at Orchard.DynamicForms - that one provides many more elements.
Aug 14, 2015 at 3:43 PM
Ok sfmskywalker, Thanks...
Aug 17, 2015 at 3:42 AM
Edited Aug 17, 2015 at 11:54 AM
_
Aug 17, 2015 at 10:43 AM
Edited Aug 17, 2015 at 11:54 AM
.
Aug 24, 2015 at 7:08 PM
Nitheesh, if you are still having issues creating a layout element, you may want to check out my blog post at http://www.davidouwinga.com/creating-a-custom-layout-element-in-orchard/. This tutorial walks you through creating a custom layout element from start to finish.