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.

1. 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:

   {
   "priority": 1,
   "components" : ["sf-link-selector" ]
   }

   For more information on the scripts that you must load, see Feather: List of selectors scripts reference.

2. 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');

    

3. 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.

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:

Add the following code in your designer's controller:

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.

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:

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