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

Umbraco Razor Sort Nodes Ascending or Descending

Umbraco Razor get Querystring

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