Umbraco-Link-Picker: A JavaScript repository from Gibe Digital

Umbraco Link Picker

A simple internal or external link picker property editor for Umbraco 7.x

Quick links

About the package
Installation
Usage
Screenshots
License
Get involved!

About the package

This package is for Umbraco 7.x

Features

Integrates with Umbraco linkPicker (for internal or external link selection)
Uses Umbraco linkPicker to define the selected node ID, name, URL and target (for internal links) and name, URL and target (for external links)

Installation

Download

Download and install the package from our.umbraco.org: our.umbraco.org/projects/backoffice-extensions/link-picker

NuGet

PM > Install-Package UmbracoLinkPicker

Create a new DataType in the Developer tab in your Umbraco project, referencing "Link Picker" (alias: "Gibe.LinkPicker"). Add the new DataType to your Document Types to use the Link Picker

Usage

The Link Picker returns JSON like the following example:

{
	id: 1039,
	udi: "umb://document/4fed18d8c5e34d5e88cfff3a5b457bf2"
	name: "Node Name",
	url: "/node-url",
	target: "_blank",
	hashtarget: "",
	classname: ""
}

The url can be used for external URLs and id can be used to get the URL of internal nodes in Umbraco (as URLs can change in Umbraco if the name changes).

If you are using dynamic, you can access the JSON data like this:

// return an external URL
@CurrentPage.propertyName.url

// return an internal URL
@Umbraco.Content(CurrentPage.propertyName.id).Url

If you want to use strongly-typed:

// Strongly typed
LinkPicker link = Model.Content.GetPropertyValue("link");

// ModelsBuilder
var site = Model.Content.Site().OfType();
var link = site.Link;

// From LeBlender grid editor
LinkPicker link = Model.Items.First().GetValue("link");