Skip to main content

Implementing uComponents Multiple URL picker in Umbraco

Set up Ucomponents in Umbrao:

1) Download the uComponents package

2) Install the Package in Umbraco

Set up a Datatype to reference:

1) Create a New Data type, for Example: "Multiple Media Picker"

2) Select the Type as "Ucomponents Multi Url Picker"

3) Choose "Media" as allowed types

4) Data format "HTML"

Set up your Document type:

1) Create a new field in your document type, for example "pickDocuments"

2) Set the field to be a Type: "Multile Media Picker"

Create a New Macro:

See Previous post for an Example for a break down of this code:

@inherits umbraco.MacroEngines.DynamicNodeContext
@using uComponents.Core
@using uComponents.DataTypes.UrlPicker.Dto;

if (Model.HasValue("pickDocuments2"))
// 1) Get the documents List
        var urlPicker = Model.GetPropertyValue<UrlPickerState>("pickDocuments2");

//2) Get Type and display full string:
// 3 Get the XML and clean it up; we need to remove the minus sign as node-id for example does notwork
var xml = @Library.ToDynamicXml(Model.GetPropertyValue<UrlPickerState>("pickDocuments2").Replace("-", ""));

foreach(var value in xml)
// Ger the Node referenced in the XML
var thisNode = Library.NodeById(value.nodeid);

double KBsize = 0;
double MBsize = 0;
double FileSize = Int32.Parse(@thisNode.umbracoBytes);
KBsize = FileSize / 1024;
MBsize = FileSize / 1048576;
// Round KB Size to 2 Decimal Points
KBsize = Math.Round(KBsize, 2);
// Format Date
string outDate = @library.FormatDateTime(@thisNode.createDate, "dd/MM/yyyy");
// 7) Write out the Link
   <p>&bull; <a href="@thisNode.Url">@thisNode.Name (@thisNode.umbracoExtension) | File Size:  @KBsize KB | Date Updated:  @outDate</a>

if (@thisNode.shortDescriptionOfTheDocument != "" && @thisNode.shortDescriptionOfTheDocument != null)
  <div class="thinline"> </div>



Popular posts from this blog

Create a .NET Contact Form that Gets the Last Url Visited in C# Can also be Used in Umbraco

This is a Simple Contact From done in C# .Net and also can be used in Umbraco.  Paste the code in to Visual Web Developer for a better view. The important bits are coment in the second file.  One of the Commented out lines highlights how to get the mailto address from an Umbraco field. The code Below includes the myContactForm.ascx.cs codebehind file and the myContactForm.ascx file. 1) The myContactForm.ascx file:  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ContactFormforPublications.ascx.cs" Inherits="usercontrols_ContactFormPublications" %> <div class="contact-form" id="contactForm" runat="server">     <h3>Request a Publication</h3>     <div class='int'>         <form runat="server">         <asp:Panel DefaultButton="contactFormSubmit" runat="server">         <fieldset>             <div class='

Umbraco 7 - C# Razor - Passing a parameter variable from a Template to a Partial View.

Passing a parameter variable from a Template to a Partial View Example - Passing a Page Id to a Partial View. In the example below we are passing 3 page Ids (1090. 1091, 1092) to a partial view.  The Partial View will display the details for each of these nodes on a home page.  See final output below. 1) In your Template: @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1090}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1091}}) @Html.Partial("HomePageLinksToLandingPages", new ViewDataDictionary{{ "pageId", 1092}}) 2) The Partial View: @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ var thisPageId = 1090; var stringPage = @ViewData["pageId"]; thisPageId = Convert.ToInt32(stringPage); } <div class="col-md-4"> <arti