Creating a Custom Component in Umbraco 7

Home » ASP.NET MVC » Creating a Custom Component in Umbraco 7
Umbraco Logo

Umbraco is built on the idea of document types and templates. The document type defines the data that is to appear on a page, the template shows how that data will appear, so when you create content, it is based on a document type and a choice of templates that you are allowed to use for that document type. You don’t want to make the mistake of creating many different templates for different content. Templates are about layout, not content. This post describes how to create a custom component in Umbraco 7 and allow the users themselves to put it on a page of their own choosing.

Previous versions of Umbraco did something similar with Windows Forms user controls. Umbraco 7 is about MVC. We are going to use MVC partial views in particular to achieve this.

Firstly, you need a Visual Studio project with Umbraco installed. Refer to my blog post on Howto: Installing Umbraco in Visual Studio via Nuget if you don’t already have a Visual Studio project.

Step 1. Create a partial view macro.

Create a partial view macro by right clicking the Views/Partials/MacroPartials folder and clicking Add View.

Alternatively you can use Umbraco, but you will have to review the Visual Studio project afterwards and ensure the new view is included in the project and in your source control system correctly.

In the example below, I create a partial view from the Site Map snippet using Developer->Partial View Macro Files->Create:

Create example Partial View Macro using Umbraco

Create example Partial View Macro using Umbraco

Step 2. Make the Partial View Macro visible in the Umbraco content editor.

To do this, in Umbraco, click on Macros, find the macro just created and click on the name to the left of the Ellipsis (…). Your aim is to tick the Editor settings “Use in rich text editor and the grid” and optionally “Render in rich text editor and the grid” as shown below:

Setting the Editor Settings for the Partial View Macro

Setting the Editor Settings for the Partial View Macro

N.B. Don’t forget to press Save when you are done.

Step 3. Create a test page and use the insert macro feature to put the content on the page.

Adding the Macro using the Umbraco RichTextEditor

Adding the Macro using the Umbraco RichTextEditor

If you ticked both options when you set up the macro, the macro is displayed in the content editor as well as being available from the Choose a macro drop downlist:



Displaying the Macro in the Umbraco Content Editor

Displaying the Macro in the Umbraco Content Editor

Thats it!

N.B. There is no reason why you can’t put in a Html.Partial command and refer to other partial views and controllers etc. I tend to do this quite a bit in order to keep the code separate and to have a small partial view macro file that is just used to make other views available in the Umbraco rich text editor.

About Phil

I have been working as a software developer since 1983. This blog could have been called "From Fortran 77, C and Cobol to C# in 20 (not so) easy years", but it doesn't sound quite right somehow. Besides I'm talking about what's happened since 2003, not before!

Leave a Reply

Your email address will not be published.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">




Top Posts & Pages

Categories

Recent Posts

Recent Comments

Archives

Blogroll

  • Mike Cohn's Blog
  • Scott Hanselman's Blog
- mike@mountaingoatsoftware.com

Telling a stakeholder you can’t work on their feature is difficult. Here are ways to make that conve [...]

- mike@mountaingoatsoftware.com

There are things leaders can do that will influence how a team self organizes. [...]

- mike@mountaingoatsoftware.com

Want to become an even better Scrum Master? Follow these 10 easy-to-remember practices. [...]

- mike@mountaingoatsoftware.com

Product owners often sacrifice progress toward important goals to put out short-term fires. There’s [...]

- mike@mountaingoatsoftware.com

Agile team leaders often need to gauge or achieve consensus. Learn four of the best ways of doing th [...]

- Scott Hanselman

When I moved my podcast site over to ASP.NET Core 2.1 I also started using HttpClientFactory and wro [...]

- Scott Hanselman

I saw a tweet from a person on Twitter who wanted to know the easiest and cheapest way to get an Web [...]

- Scott Hanselman

Last week I blogged about some new audio features in Windows 10 that make switching your inputs and [...]

- Scott Hanselman

Open source ASP.NET Core 2.1 is out, and Architect David Fowler took to twitter to share some hidden [...]

- Scott Hanselman

What's a Carriage and why is it Returning? Carriage Return Line Feed WHAT DOES IT ALL MEAN!?! T [...]

Meta