Feather: Use content selectors outside of widget designer views

In some cases, you may want to use content selectors separate from widgets. For example, you may want to implement your own custom controls or views. The following tutorial demonstrates how to use a content selector outside of a widget's designer view. In this example, you work with a controller with a view that contains a fully functional Angular single page application with a selector for dynamic items. For more information, see AngularJS.

You register the controller with a route, so it can be used in classic MVC mode. You can also use the widget in pure or hybrid mode.For more information about MVC modes, see For developers: MVC modes.

Create MVC controllers

1. Create a controller that has only one action that returns a view.:

   using System;
   using System.Linq;
   using System.Web.Mvc;
   using Telerik.Sitefinity.Mvc;
    
   namespace SitefinityWebApp.Mvc.Controllers
   {
       public class AppController : Controller
       {
           public ActionResult Index()
           {
               return View();
           }
       }
   }

   As with any MVC controller, you must inherit the Controller class and add an Index action that returns the default view.

2. Register a route to invoke the controller.

To add a route that invokes the controller when an URL is requested, put the following sample code in your Global.asax file in the Application_Start method:

```C#
protected void Application_Start(object sender, EventArgs e)
{
    Bootstrapper.MVC.MapRoute(
        "Classic",
        "app",
        new { controller = "App", action = "Index"}
    );
}
```

In the view you create, you must reference all required scripts and bootstrap your AngularJS application. Inside the application, you place the content selector's directive.

1. Register the scripts and style sheets as demonstrated by the code below:

   @using Telerik.Sitefinity.Frontend.Mvc.Helpers   

   @using Telerik.Sitefinity.Modules.Pages;

     

        

   @Html.StyleSheet(Url.WidgetContent("Mvc/Scripts/Bootstrap/css/bootstrap.min.css"))

        

   @Html.StyleSheet(Url.WidgetContent("assets/dist/css/sitefinity-backend.min.css"))

        

   <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />

        

   <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />

        

   @Html.Script(ScriptRef.JQuery, "top", false)

        

   @Html.Script(Url.WidgetContent("Mvc/Scripts/Angular/angular.min.js"), "top", false)

        

   @Html.Script(ScriptRef.KendoAll, "top", false)

        

   @Html.Script(Url.WidgetContent("Mvc/Scripts/Angular/angular-resource.min.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("Mvc/Scripts/Angular/angular-route.min.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("Mvc/Scripts/Bootstrap/js/ui-bootstrap-tpls.min.js"), "top", false)

        

   @Html.Script(Url.Content("~/Telerik.Sitefinity.Frontend/ServerContext.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("Mvc/Scripts/Designer/modal-dialog.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("Mvc/Scripts/server-data.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("client-components/selectors/common/sf-services.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("client-components/selectors/dynamic-modules/sf-data-service.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("client-components/selectors/common/sf-selectors.js"), "top", false)

        

   @Html.Script(Url.WidgetContent("client-components/selectors/common/sf-list-selector.js"), "top", false)

    

   @Html.Script(Url.WidgetContent("client-components/selectors/dynamic-modules/sf-dynamic-items-selector.js"), "top", false)

2. Register the JavaScript file containing the Angular controller of the application:

   <script src="~/Mvc/Scripts/App/app.js"></script>

   NOTE: Inside the Mvc/Scripts folder, you must have a folder with the name of your MVC controller. In the code above, the folder is named App.

3. Add the markup of the application.
   In the markup, you must declare that Angular bootstraps a new app with the module app. Inside the module, you place a controller, named MainCtrl:

   ```html

    

       <div ng-app="app">

    

           <div ng-controller="MainCtrl">

    

               <span>Dynamic items selector</span>

    

               <sf-list-selector sf-dynamic-items-selector sf-item-type="dynamicType"></sf-list-selector><br />

    

           </div>

    

       </div>

    

       ```

   
   
   In addition, you add the dynamic item selector with item type dynamicType. For more information, see Feather: Dynamic items selector.

You must declare a new module with its dependencies. The module must have a controller with a property in the scope that contains the full name of the dynamic type whose items you want displayed:

In the sample above, Telerik.Sitefinity.DynamicTypes.Model.SomeModule.SomeType is the dynamic type. You can get your type name from the code reference, provided on the module builder's administration page. For details, see For developers: Dynamic modules.

If your Sitefinity CMS website has more than one language and you want to select items that are published in a culture different than the default one, you must configure the services module as demonstrated below:

The context object has a property uiCulture containing the short name of the desired culture. You can bind this object to an HTML input element. For example:

Thus, you can change the value of the use interface culture without refreshing the page.