Copied to clipboard

Flag this post as spam?

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


  • mizzle 47 posts 169 karma points
    Jan 08, 2019 @ 15:15
    mizzle
    0

    Widgets/macros in Umbraco 7?

    What's the Umbraco 7 standard for widgets (optional page sections and elements that can be re-ordered on a page)?

    In Umbraco 6 I used Macro Containers, but that DataType is gone in the latest versions of 7. What replaced it?

    I don't want to use the grid system. It won't do what I need it to do, which is make adding content as code-free and simple as possible for the users. If I used the grid, it would require adding classes to sections and I can't trust users to do so properly.

  • Tim Geyssens 6419 posts 15036 karma points MVP 2x c-trib
    Jan 08, 2019 @ 20:42
    Tim Geyssens
    0

    CHeck out this article https://skrift.io/articles/archive/building-with-components/ that migth be what you are looking for

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 08, 2019 @ 20:43
    Nicholas Westby
    0

    I don't know that you have to allow users to add classes to sections when using the Umbraco Grid.

    That being said, I personally use Archetype.

    I will probably move over to Nested Content at some point, but Nested Content still can't do some things that Archetype can do, so I'm holding off for a bit.

    If you are starting from scratch, I'd probably recommend Nested Content, as it does most things that are needed. Last I checked, the main things that were missing were disabling items without deleting them (possible with a plugin) and moving nested items up a level or items into a nested item (in Archetype, this feature is called Cross-Archetype Dragging).

    If you go with Archetype, I wrote an article a while back that may help: https://skrift.io/articles/archive/building-umbraco-websites-with-archetype-widgets-and-ditto/

    The concepts are very similar for Nested Content too.

  • mizzle 47 posts 169 karma points
    Jan 08, 2019 @ 21:07
    mizzle
    0

    I'm completely ignorant about Nested Content, but from what I've seen it looks like it forces you to hard code an "if not null" for each Nested Content element on the template page of whatever page you're working on?

    So if I have two available content widgets -- Two-Column Section and Photo Gallery, for example -- I'd have to "look" for both of them on each page template?

    The best thing about Macro Container was that all the macro elements were independent of each other. I applied the Widgets Picker field to a Master template and everything -- no macros or ten macros -- rendered in that section as different .cshtml files. If they were valid in the .cshtml file they showed up, if they weren't valid they only broke that one section but the rest of the site was unharmed. Adding new macros to the section was as easy as making the macro available under the Macro Container settings.

    Can this be done with Nested Content? I'd rather not have to download any packages or additional content to accomplish what I need.

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 08, 2019 @ 21:21
    Nicholas Westby
    0

    Yeah, Archetype and Nested Content would allow you to do that. I'm not sure where you go the impression that you had to hard code an "if not null". There are many ways to go about it.

    For example, you can do it by convention. So if your Nested Content item has an alias of "photoGallery", you then create a file at `~/Views/Partials/Widgets/PhotoGalery.cshtml".

    Or you can leave it up to each widget to indicate the path to the CSHTML file that will render it (e.g., by creating a base class or interface with a ViewPath string property).

    Or you can render the data as JSON and then handle everything on the frontend (e.g., with Angular, AngularJS, Vue, React, plain JavaScript, or whatever).

    There are a great many ways you can do this. These plugins just give you the ability to create complex lists/hierarchies of heterogeneous data, which you can for example use to create widgets.

    Here's a screenshot of how you can create these widgets in the content section of Umbraco (from the article I mentioned above):

    Archetype Widgets

    It has three widgets. You click the "+" button and you can add more widgets to that page.

  • mizzle 47 posts 169 karma points
    Jan 08, 2019 @ 21:58
    mizzle
    0

    I'm completely lost.

    The documentation for Nested Content is this:

    var items = Model.GetPropertyValue<IEnumerable<IPublishedContent>>("myPropertyAlias");
    
    foreach(var item in items)
    {
        <h3>@item.GetPropertyValue("heading")</h3>
        @Umbraco.Field(item, "bodyText")
    }
    

    It looks like this is rendering the content from the Nested Content directly onto the page, not loading a list of partials connected to .cshtml files. That's where I got the impression that everything would have to be loaded individually, in order to connect the Document Type chosen in the Nested Content section to a .cshtml file to render it.

    Is there a step-by-step guide to Nested Content that works with the absolute base version of the property?

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 08, 2019 @ 22:24
    Nicholas Westby
    100

    It looks like this is rendering the content from the Nested Content directly onto the page, not loading a list of partials connected to .cshtml files. That's where I got the impression that everything would have to be loaded individually, in order to connect the Document Type chosen in the Nested Content section to a .cshtml file to render it.

    The documentation is just showing the most basic possible implementation. You could do something like this if you want to make this work with widgets (I don't have an IDE in front of me, so I can't guarantee this will compile):

    var items = Model.GetPropertyValue<IEnumerable<IPublishedContent>>("myPropertyAlias");
    
    foreach (var item in items)
    {
        var viewPath = "~/Views/Partials/Widgets/" + item.DocumentTypeAlias + ".cshtml";
        @Html.Partial(viewPath, item);
    }
    

    This is essentially the same code I mentioned elsewhere in this thread for Archetype.

    Say you had a rich text widget. You would then create a file at ~/Views/Partials/Widgets/richText.cshtml that contains something like this:

    @model IPublishedContent
    
    <div class="rich-text">
        @Html.Raw(Model.GetPropertyValue<string>("text"))
    </div>
    

    That will then render your rich text widget. You can add additional widgets without having to modify the file that contains the for loop for the widgets. Any time you add a new widget, you just add a new CSHTML file.

  • mizzle 47 posts 169 karma points
    Jan 09, 2019 @ 14:14
    mizzle
    0

    This works! It's still probably going to be a learning curve for me, but this definitely sets me off in the right direction. Thank you!

  • mizzle 47 posts 169 karma points
    Jan 17, 2019 @ 15:58
    mizzle
    0

    A follow-up question:

    I've been implementing Nested Content for my widgets, but I've noticed that errors within the Nested Content elements don't behave as Macros within Macro Containers used to do. Before, the entire page would render except for the broken macro -- now, if any Nested Content widget contains any error at all, the entire page gets broken.

    It's good that the error provided explains where the problem lies, but I would prefer a full-page render with a small section error, simply because it's impossible to make a site completely user friendly and a little error for one widget is a lot less frightening than a full website break.

    What checks could I apply to individual nested content sections that would allow the page to render fine, but section errors to appear?

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 17, 2019 @ 17:04
    Nicholas Westby
    1

    Add a try/catch in your for loop and output something in the catch that indicates there's an error (probably also a good idea to log that error using LogHelper.Error).

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 08, 2019 @ 21:27
    Nicholas Westby
    0

    FYI, here is some code from one of the websites I'm working on that contains Archetype widgets:

    @* Render each widget. *@
    @foreach (var widget in widgets)
    {
    
        // Validate the path to the partial view for this widget.
        var view = widget.Widget.ViewPath;
        if (!System.IO.File.Exists(Server.MapPath(view)))
        {
            <!-- Skipping widget, @(widget.Widget.GetType().Name) (no matching file found to render it). -->
            continue;
        }
    
        // Render the widget.
        @Html.Partial(view, widget)
    
    }
    

    You can see that it's just a matter of looping through each widget and rendering each of them. In the base class for all widgets, I have this:

    public virtual string ViewPath
    {
        get
        {
            var typeName = GetType().Name;
            return $"~/Views/Partials/Widgets/{typeName}.cshtml";
        }
    }
    

    So it figures out the partial view for the widget based on a convention, but also allows each widget to change this if it has some special reason for doing so (e.g., if multiple widgets share the same view logic, they could then share the same CSHTML file).

    Nested Content should be very, very similar to this.

    And this is just how I do it on this site. You have a lot of control in deciding how you want to display the data.

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 08, 2019 @ 21:30
    Nicholas Westby
    0

    BTW, I use Ditto to map Archetypes to C# classes. That's why I'm using the class name to figure out the CSHTML filename rather than the Archetype fieldset alias.

  • Chriztian Steinmeier 2698 posts 8107 karma points MVP 3x admin c-trib
    Jan 08, 2019 @ 22:41
    Chriztian Steinmeier
    0

    Hi mizzle,

    Just want to throw in my 2 cents as I've tried both Archetype and Nested Content along with some other approaches; but what I've found gives the greatest flexibility in terms of editor-friendliness & ease of use from a developer's perspective (and I'm mosty a frontend guy) is this package called Embedded Content Blocks - it's really flexible and does some really clever things out-of-the-box:

    • If you use it to replace a Nested Content property, it converts the content.
    • It has built-in "label templates" for many standard property-types so the previews usually "just work".
    • It's very easy to use specific partials for rendering the blocks.
    • You can specify a secondary tab from the Document Type as a "settings" tab; convenient for not-so-often used stuff.
    • Items can be turned on and off without needing to manually check anything in the code for rendering.

    /Chriztian

  • Nicholas Westby 1894 posts 6333 karma points c-trib
    Jan 08, 2019 @ 23:11
    Nicholas Westby
    0

    This is probably also worth looking into for anybody else that happens across this thread: https://our.umbraco.com/packages/backoffice-extensions/stacked-content/

    As best as I can tell, the main difference between this and things like Nested Content is that it allows (forces?) you to edit content in a sidebar. Seems like that would have some pros and cons.

    And yet another one: https://our.umbraco.com/packages/backoffice-extensions/content-list/

    I'm not sure how either of those handle nesting (e.g., a slideshow widget containing multiple slides).

Please Sign in or register to post replies

Write your reply to:

Draft