multinode tree picker for footer navigation

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Nicky 10 posts 89 karma points

Oct 17, 2017 @ 09:59
0

Multinode Tree Picker for footer navigation

Using Umbraco And Getting Started

Umbraco 7
Hi all,

I'm trying to create a footer navigation using the MultiNode Tree Picker. I want the user to be able to select page's on the homepage document type and show it on all page's. I watched the video Insert umbraco page field dialog from umbraco.tv. This works great for a text string.

The code I currently have is:
```
<h3>@Umbraco.Field("footerTitle", recursive: true)</h3>
<ul>
    <li>&copy; 2017</li>
    @{
        var footerNav =  Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("footerNav")
        foreach (var item in footerNav)
        {
        <li><a href="@item.Url">@item.Name</a></li>
        }
    }
</ul>
```
footerTitle is showing on all pages but how can I show the footerNav items on all pages?

Thank you in advance.
Copy Link
Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib

Oct 17, 2017 @ 13:55
100
So if your picker content is only set on the homepage then you'll need to query against the homepage to get that content. At the moment you are using Model.Content which queries against the current page.

Depending on what version of Umbraco you have installed you can either use (for newer version):
```
var footerNav =  Model.Content.Site().GetPropertyValue<IEnumerable<IPublishedContent>>("footerNav");
```
For older version you'll need to use
```
var footerNav =  Model.Content.AncestorOrSelf(1).GetPropertyValue<IEnumerable<IPublishedContent>>("footerNav");
```
Site() is just an extension method that does the same as the second example. What they do is go to the root ancestor of your site (the homepage) and query the data from there.

You can then put this in your master template and it should shown on every page. You can find more about querying content in the docs.
Copy Link
Nicky 10 posts 89 karma points

Oct 17, 2017 @ 14:14

0

Thanks Dan!

works like a charm

Copy Link
Damian Chambers 23 posts 87 karma points

Dec 28, 2017 @ 15:18

0

Just what I was looking for. Thanks

Copy Link
Arunabha Das 38 posts 151 karma points

Mar 06, 2018 @ 06:29

0

Hi,

How I will use Multinode Tree Picker as recursive.

My scenario needs recursive footer items. I am using 7.6.6 version of umbraco.

Earlier I was using - var mainNavigationItems = Umbraco.Field("mainNavigationItems", altText: "0", recursive: true).ToString().Split(',');

Copy Link
Paul Wright (suedeapple) 277 posts 704 karma points

Oct 17, 2017 @ 14:01

1

I usually use the "related links" datatype for this kind of stuff, as it then allows the user to mix up external links, linkTargets, and set an alternative caption/title.

But a MNTP works just fine, if you want to contrain it to just umbraco content nodes.

Copy Link
Nicky 10 posts 89 karma points

Oct 17, 2017 @ 15:07
0
Got another question for you guru's. I also want to be able to add a logo with a url with related links or link picker. I created an Archetype with 2 properties:
- logo (media picker)
- link (related links).
I'm trying the same trick as provided above:
```
@{
    var footerLogos = Model.Content.Site().GetPropertyValue<IEnumerable<IPublishedContent>>("footerLogos");
    @foreach (var item in footerLogos)
     {
         <a href="@item.GetPropertyValue("link")">
             <img src="@item.GetPropertyValue("logo")"/>
         </a>
     }
}
```
But when it renders it give me this back:
```
<a href="Umbraco.Web.Models.RelatedLinks">
    <img src="1197">
</a>
<a href="Umbraco.Web.Models.RelatedLinks">
    <img src="1196">
</a>
```
Is there something I'm not seeing?

Hope you guys can help me out!
Copy Link
Paul Wright (suedeapple) 277 posts 704 karma points

Oct 17, 2017 @ 15:10

0

@item.GetPropertyValue("logo")

Swap to...

@Umbraco.TypedMedia(item.GetPropertyValue("logo")).Url

That should give you a clue for your link problem too ;-)

Copy Link

Nicky 10 posts 89 karma points

Oct 18, 2017 @ 07:00

Unfortunately this doesn't work. The code I'm using is

<section class="archetype__block">
    @{
        var footerLogos = Model.Content.Site().GetPropertyValue<IEnumerable<IPublishedContent>>("footerLogos");

        foreach (var item in footerLogos)
        {
            <a href="@Umbraco.TypedMedia(item.GetPropertyValue("link")).Url">
                <img src="@Umbraco.TypedMedia(item.GetPropertyValue("logo")).Url"/>
            </a>
        }
    }
</section>

But it says Object reference not set to an instance of an object. See provided screenshot

enter image description here

Copy Link

Nicky 10 posts 89 karma points

Oct 18, 2017 @ 07:26

Well I got it working now... This is the code I ended up using

    @{
    var footerBlocks = Model.Content.Site().GetPropertyValue<ArchetypeModel>("footerLogos");

    foreach (var fieldset in footerBlocks)
    {
        var relatedLinks = fieldset.GetValue<RelatedLinks>("link");

        var logo = fieldset.GetValue<IPublishedContent>("logo").Url;

        foreach (var relatedLink in relatedLinks)
        {
            var linkTarget = (relatedLink.NewWindow) ? "_blank" : null;

            <a href="@relatedLink.Link" target="@linkTarget">
                <img src="@logo" alt="@relatedLink.Caption"/>
            </a>

        }

    }
}

It's working but is this the way to go?

Copy Link

Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib

Oct 18, 2017 @ 07:57
0
I've not used RelatedLinks datatype much, but code looks fine to me. The only thing I'd change is doing a null-check on logo. You may get occasions where the associated image has been deleted or something that can cause it not to exist, then you'll be accessing the Url property on a null reference and it will go "booom!" :)

So something like this would avoid that:
```
var logo = fieldset.GetValue<IPublishedContent>("logo");

if (logo != null)
{
    foreach (var relatedLink in relatedLinks)
    {
        var linkTarget = (relatedLink.NewWindow) ? "_blank" : null;

        <a href="@relatedLink.Link" target="@linkTarget">
            <img src="@logo" alt="@relatedLink.Caption"/>
        </a>

    }
}
```
Or you could fallback to a default image or a non-image link in those (hopefully rare) instances.
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?