Use a Link selector

The following sample demonstrates how to add a Link selector in your widget designer. The Link selector generates hyperlinks to a website, a page from this site, a specific anchor in the text, or an e-mail address. For more information on how to use the Link selector, see Use Link selector in Content block widget.

Adding a link selector

1. In your DesignerView.YourView.json file you have to add a scripts array. The content of the file should be similar to:

{ "priority": 1, "scripts" : [ "client-components/selectors/multi-site/sf-multi-site-service.js", "client-components/selectors/pages/sf-page-service.js", "client-components/selectors/tools/sf-link-service.js", "client-components/selectors/tools/sf-link-selector.js" ], "components" : ["sf-services", "sf-selectors", "sf-multisite-page-selector" ] } ```

**NOTE**: For more information on the scripts that you must load, see [List of selectors scripts](List-of-selectors-scripts).

2. In your designerview-yourview.js place the following snippet right before the definition of your custom view controller:

var designerModule = angular.module('designer'); angular.module('designer').requires.push('sfSelectors'); ```

3. In your DesignerView.YourView.cshtml place the following tag where you want to render the Link selector:

```

**NOTE**: If you use the _Link selector_ in a text editor, you can select a word or a phrase to convert into a hyperlink. The selected word or hyperlink must be passed to **sf-link-html** attribute. You can use **sf-selected-item** attribute to access the link item generated from the value of **sf-link-html**. 

Getting or setting the hyperlink

You can use the sf-link-html attribute to access the selected value. You must add a property in your widget controller that stores the generated hyperlink:

public string Link
{
    get;
    set;
}

Add the following code in your designer's controller:

designerModule.controller('YourViewCtrl', ['$scope', 'propertyService', 'sfLinkService', function ($scope, propertyService, linkService) {
	$scope.feedback.showLoadingIndicator = true;

	//Makes call to the controlPropertyService to get the properties for the widgets.
	propertyService.get()
		.then(function (data) {
			if (data) {
				$scope.properties = propertyService.toAssociativeArray(data.Items);
				$scope.link = jQuery($scope.properties.Link.PropertyValue);
			}
		},
		function (data) {
			$scope.feedback.showError = true;
			if (data)
				$scope.feedback.errorMessage = data.Detail;
		})
		.then(function () {
			$scope.feedback.savingHandlers.push(function () {
				var htmlLinkObj = linkService.getHtmlLink($scope.selectedItem);
				$scope.properties.Link.PropertyValue = htmlLinkObj[0].outerHTML;
			});
		})
		.finally(function () {
			$scope.feedback.showLoadingIndicator = false;
		});
}]); 

In the code above, you use the propertyService to load the properties from the widget. Next, you create a scope property to hold the value of the Link property. Then in the designer of your widget you can select what type of hyperlink to create. When you click Save the getHtmlLink function of the sfLinkService is called and you pass the value of sf-selected-item attribute. The getHtmlLink function returns a hyperlink and you can save its outerHTML in the Link property.

The Link selector has an option to set a hyperlink to an anchor. To do this, you can use the sf-editor-content attribute. The attribute value must contain text from which anchors can be extracted. Fox example, you can set the editorContent property in the scope of your designer's controller to have the following value:

$scope.editorContent = "<h2 id='myTitle'>Hello World</div> Some text <span id='mySpan'>some span text</span>";

As a result, the anchors myTitle and mySpan appear in the Anchors dropdown box on the Anchor tab.