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:
   //@urlPicker.GetType()
   //@urlPicker
 
// 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);


try{
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>
</p>

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

}
}
}