Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Thomas 7 posts 87 karma points
    Nov 19, 2021 @ 14:23
    Thomas
    0

    Umbraco 9 - using components

    Hi

    I'm completely new to Umbraco, coming from Sitecore. Is it possible to create reusable components similar to Sitecore? For example, a user creates a component with the template Sidemenu, which is then inserted onto several pages.

    Thanks.

  • Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib
    Nov 21, 2021 @ 20:09
    Marc Goodson
    0

    Hi Thomas

    There are a couple of ways to do this depending on your strategy for editing content in your site implementation.

    If your pages have their main content drawn from a single Rich Text Editor field, then you might want to create a 'Macro' - https://our.umbraco.com/documentation/reference/templating/macros/

    This allows editors to insert the Macro inside the rich text area, optionally supplying parameters to change the output of the Macro, and you implement the templating output in a Partial View.

    If you are using the Umbraco Grid to give the editor greater control of the layout of the page, then in addition to using Macros again to insert into different grid cells, you could create your own custom 'grid editor' - https://our.umbraco.com/Documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Grid-Layout/Grid-Editors#custom-grid-editors to create an editable reusuable component.

    The other approach is to use a BlockList property: https://our.umbraco.com/Documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Block-List-Editor/ that allows you to define sets of repeating blocks, each block can be different and be defined by an Element Type, and then you can individually render each Element Type with it's own partial view. The Editor can provide content for each type of block, or the block could 'pick' another content item from elsewhere in the Umbraco content tree, if you want to have reusuable content components that are inserted in multiple pages...

    Not sure if that helps give you a steer?

    regards

    marc

  • Thomas 7 posts 87 karma points
    Dec 01, 2021 @ 11:24
    Thomas
    0

    Thanks for the answer!

    I was being a bit vague in my original question. What I need is the option to create a specific instance of a component, and then reuse that on multiple pages. For example: I have a Sidemenu component with properties Title and Content. I want editors to be able to create a sidemenu with title "Hello" and then reuse that on several different pages. So if they changed the title "Hello" on that specific sidemenu to something else, it'd change on every page that component was used.

    Will any of the solutions you pointed out be able to do that?

  • Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib
    Dec 01, 2021 @ 15:25
    Marc Goodson
    100

    Hi Thomas

    OK, I understand what you mean, yes it's possible.

    You probably have a content tree with structure and different types of pages, defined by Document Types:

    HomePage

    • LandingPage

      • ContentPage1
      • ContentPage2
    • LandingPage2

      • ContentPage3

    Each Document Type has a Template and is allowed to be created underneath other different types of Document Types to create your site page structure.

    But you can also have a part of your site structure made up of 'components' that do not have a template, and you can use a 'content picker' property editor on the 'pages' to pick components to use on the particular page.

    Really hard to explain in writing!!

    But if you create a 'Document Type' (on its own without a template) and call it 'Side Menu' - give it a menu like icon, and allow it to have your Title and Content properties.

    Then create another 'Document Type' (on its own without a template) and call it 'Menu Repository' - allow 'Side Menu' Document Types to be created underneath it, no need for any custom properties.

    Then create yet another 'Document Type' called 'Shared Components' and allow it to be created at the root of the site. Give it a folder icon, no need for any properties, and allow 'Menu Repository' items to be created underneath.

    Then go to the content section of the site, and create a 'Shared Components' content item based on the 'Shared Components' Document Type - then underneath that create a 'Menu Repository' item based on the 'Menu Repository' Doc Type.

    (then go back into the Document Type definitions for Shared Components, and prevent it from being created at the root, and prevent Menu Repository' items from being created underneath - it will stop editors at a later date creating multiple items of these types, but still be able to create Site Menus).

    Then create a Side Menu underneath 'Menu Repository' in the content section, and call it Default Side Menu or something, and fill in what your default should be.

    Now create a 'Composition' (this is a Document Type that is then usable in other Document Types) and call it something like Common Page Options.

    Add to this a new property based on a MultiNodeTreePicker - called SideMenuPicker, with alias sideMenuPicker, that has a starting node set as the 'Menu Repository' node, and allows one item of SideMenu type to be picked.

    Then add the composition to all of your 'page' Document Types, to allow any page to pick a Side Menu...

    On your Homepage of your site, pick the 'Default Side Menu'.

    Now in your implementation in your controllers or templates, when you come to write out the SideMenu, you can read the Id of the picked Site Menu Item 'recursively'

    @{
    var sideMenu = Model.Value<IPublishedContent>("sideMenuPicker", fallback: Fallback.ToAncestors);
    var title = sideMenu.Value<string>("title");
    }
    

    If the editor doesn't pick a menu on a page (who wants to have to pick one on every page right?) then it will look up the content tree until it finds one that has been picked, the default one being picked on the homepage, like a global component.

    But if your blog needs a different menu, then on the BlogSection page pick a different menu from the Menu Repository, and the whole blog section will use that...

    When text gets updated in the particular SiteMenu, it is updated across the site wherever it's used.

    .. anyway that's the gist, hopefully, it gives you lots to play with to work out how best to do it for your site, plenty more you can do to enhance this pattern too, and there are variations of approaches, but I think that's what your are describing in your question!

    regards

    marc

  • Thomas 7 posts 87 karma points
    Dec 02, 2021 @ 15:33
    Thomas
    0

    It works! Thank you so much for the detailed description! I really appreciate it.

Please Sign in or register to post replies

Write your reply to:

Draft