Using the uComponents multiple URL picker with Umbraco

Using the uComponents multiple URL picker with Umbraco

• Umbraco CMS

• uComponents
• Umbraco

For the project we're currently working on we needed to create a number of navigation links in the header that the user could select. Each of these links could either be internal Umbraco links or links to external sites.

This is where the uComponents Multiple URL Picker control came in. Using this control the user can select any content node within Umbraco, or setup an external link that may or may not open in a new window.

The Umbraco site we're building is version 4.11.9 set to MVC mode. The uComponents multiple URL control was added to a DocumentType called GlobalSettings under the root where we store site wide information. The control was setup to store the records in CSV format, and used the following Razor script to output the resulting links:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
    IPublishedContent root = Model.Content.AncestorOrSelf(1).Next("GlobalSettings");
    if (root.HasValue("headerLinks"))
    {
        var headerLinks = root.GetPropertyValue("headerLinks");
        string[] links = headerLinks.ToString().Trim('\n').Split('\n');

        if (links.Any())
        {
            <div class="support-links">
            @foreach (var link in links)
            {
                string[] linkItem = link.Split(',');
                <a href="@linkItem[3]" title="@linkItem[4]" class="primary1" target="@(@linkItem[1] == "True" ? "_blank" : "_self")">@linkItem[4]</a>
            }
            </div>
        }
    }
}

This now creates a nice list of links to the relevant urls with the relevant target attribute set. 

<div class="support-links">
      <a href="http://www.bbc.co.uk" title="Live chat" class="primary1" target="_blank">Live chat</a>
      <a href="/tools-support/contact-us/" title="Contact is" class="primary1" target="_self">Contact is</a>
      <a href="/tools-support/branch-finder/" title="Branches &amp; Agencies" class="primary1" target="_self">Branches &amp; Agencies</a>
      <a href="/tools-support/inside-ibb/" title="About us" class="primary1" target="_self">About us</a>
      <a href="http://www.bbc.co.uk" title="Online banking" class="primary1" target="_blank">Online banking</a>
</div>