Feather: Link selector
The following tutorial demonstrates how to add a Link selector in your widget's 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 Feather: Use Link selectors in Content block widgets.
Add Link selectors
-
Feather automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Feather sets your designer view priority 1. In case you need to have full control over the scripts that are loaded or you want to set custom priority, you can alternatively create your own DesignerView.YourView.json file. If you have a JSON file that matches the convention (even if empty), this automatic scripts registration will not occur. In your DesignerView.<YourView>.json file, add ascripts array. The content of the file should be similar to the following:
-
Feather automatically finds all AngularJS modules you rely on and references the widget designer to them. In case you rely on custom AngularJS modules or have logic that needs an AngularJS controller, you can create your own designerview-<yourview>.js file. If you have a .js file that matches the convention (even if empty), this automatic modules referencing will not occur. In your designerview-<yourview>.js file, place the following snippet right before the definition of your custom view controller:
var designerModule = angular.module('designer');
angular.module('designer').requires.push('sfSelectors');
-
In your DesignerView.<YourView>.cshtml file, place the following tag where you want to render the Link selector:
<sf-link-selector sf-link-html="link" sf-selected-item="selectedItem" sf-editor-content="editorContent"></sf-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 the sf-link-html attribute. You can use the sf-selected-item attribute to access the link item generated from the value of sf-link-html.
Get or set the hyperlink
To access the selected value, you use the sf-link-html attribute. 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. In the widget designer, 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 the sf-selected-item attribute. The getHtmlLink function returns a hyperlink and you can save its outerHTML in the Link property.
Set hyperlinks to anchors
The Link selector has an option to set a hyperlink to an anchor. To do this, you use the sf-editor-content attribute. The attribute value must contain text from which anchors can be extracted. For 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.