Introduction

First, thank you all for your feedback to my first post, regarding the Extending the LightSwitch HTML client with a cascading push menu.

Today I will show you, how to use an ODATA v3 Controller for ActiveDirectory search operations within a LightSwitch application. For this I will use the sample A simple ODATA v3 Controller for ActiveDirectory search operations one of my colleagues presented some time ago.

As he already mentioned, it would be fine way to use this controller with select2 and JayData as we already did in a different scenario described in [NoBrainer] Using JayData with jQuery select2 plugin in LightSwitch HTML.
At this point: many thanks to Igor Vaynberg for this great control!

So lets try to build a search box for selecting a user from an Active Directory …

Let’s start

Ok, first create your Visual Studio solution (I used Visual Studio 2013 Update 2). Of course, it is a LightSwitch HTML solution.

Next, create a table called whatever (I called it ‘ADUser’) with following columns (this is only for example, so you can add other columns):

After this, create a Browse Data Screen and AddEdit Details Screen and link them to your table:

Don’t forget to link your AddEdit screen with the Browse screen, in case you are not creating it directly from the Browse screen! ;-)

Next, goto ‘Package Manager Console’ of your Visual Studio, select your server project in the dropdown and type

Install-Package Microsoft.AspNet.WebApi.WebHost

Then, create 2 folders in the server project of your LightSwitch solution, called ‘Models’ and ‘Controllers’ (note: there is of course no magic behind these folder (names), you can actually name them any way you want or just leave it at all – but when having more controllers and models it might be helpful to keep the overview).

Add a class named ‘ActiveDirectoryUser’ to the Models folder. Here you can define any Active Directory property you want to use.
I defined the common used properties:

using System;
using System.ComponentModel.DataAnnotations;

namespace LightSwitchApplication.Models
{
    public class ActiveDirectoryUser
    {
        [Key]
        public string cn { get; set; }
        public string description { get; set; }
        public string distinguishedName { get; set; }
        public int groupType { get; set; }
        public string name { get; set; }
        public string sn { get; set; }
        public string givenName { get; set; }
        public string department { get; set; }
        public string displayName { get; set; }
        public string mail { get; set; }
        public string objectGUID { get; set; }
        public string objectSID { get; set; }
        public string sAMAccountName { get; set; }
        public int sAMAccountType { get; set; }
        public Int64 uSNChanged { get; set; }
        public Int64 uSNCreated { get; set; }
        public DateTime whenChanged { get; set; }
        public DateTime whenCreated { get; set; }
    }
}

Next, right-click on the Controllers folder and click Add -> Controller and select the ‘Controller scaffolder’ dialogue:

Call your new controller ‘ActiveDirectoryUsersController’ and select your Model class:

The scaffolder code is somehow a bit boring, hence the scaffolder. So I did not repeat it here in full epic, but you can download the complete code following the link at the end of the post.

Hint
In our controller class we need some additional settings from our web.config. So, open the web.config and add following to the appSettings (as described in the original article about the AD search controller):

<add key="ldapConnection.Path" value="LDAP://your ldap-path" />
<add key="ldapConnection.AuthenticationType" value="Secure" />
<add key="ldapConnection.Username" value="your user with AD access" />
<add key="ldapConnection.Password" value="very secret password" />

(And yes, you should definitely encrypt the web.config after putting in the password!)

Next, open WebApiConfig.cs in the App_Start folder in your server project where we have to define our service route (my service is called ‘utilities.svc’ but you can choose any other naming …) and add following code:

using System.Web.Http;
using System.Web.Http.OData.Extensions;
using System.Web.Http.OData.Builder;
using System.Web.Http.OData.Batch;
using Microsoft.Data.Edm;
using System.Diagnostics;

namespace LightSwitchApplication
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Routes.MapODataServiceRoute(
                    routeName: "Utilities.svc"
                    ,
                    routePrefix: "Utilities.svc"
                    ,
                    model: GetModel("Utilities")
                    ,
                    batchHandler: new DefaultODataBatchHandler(GlobalConfiguration.DefaultServer)
                );
            config.MapHttpAttributeRoutes();
        }
        private static IEdmModel GetModel(string ContainerName)
        {
            ODataConventionModelBuilder builder = new ODataConventionModelBuilder();
            builder.ContainerName = ContainerName;
            Controllers.ActiveDirectoryUsersController.ModelBuilder(builder);
            return builder.GetEdmModel();
        }
    }
}

(Adding BATCH support is certainly optional, but does not cost much …)

Ok, all basics are done. Now, let’s add select2 and JayData to our application. For this, download select2 and JayData at NuGet via Install-Package Select2.js and Install-Package JayData and add following files to your ‘Scripts’ folder in your solution:

Now we have to initialize our JayData context.
We use a dynamically generated context as described in [NoBrainer] Changing LightSwitch HTML Cascading choiceLists with JayData. To do this, create a common.js file with following code and add this to your script folder:

var svcAdUrl = msls.application.rootUri + '/utilities.svc/$metadata';
var ctxAdData = '42';
$(document).ready(function () {
    $data.initService(svcAdUrl)
        .then(function (context) {
            ctxAdData = context;
        });
});

Add a reference to this js file to the default.htm.

We use the infamous ubiquitous placeholder to detect proper initialisation of the context.

Create some wire-up code

Add a new file to your ‘Scripts’ folder, called ‘dfchls.js’ and add this code:

var dfchls = {
    addAdSearchBox: function ($element, contentItem, options) {
        try {
            //check if options are set:
            if ((undefined === options) || (null === options)) {
                var options = {}
            }
            checkSelect2Options(options);
            //render custom control:
            var $divMaster = $("<div class='dfchlsMasterDiv' />");
            $element.append($divMaster);
            addDivRow($divMaster, contentItem, options);
        }
        catch (e) {
            console.log(e.message + "; description:" + e.description);
        }
    }
}

function checkSelect2Options(options) {
    if (!options.hasOwnProperty("placeholder")) { options["placeholder"] = 'Search User'; }
    if (!options.hasOwnProperty("quietMillis")) { options["quietMillis"] = 1000; }
    if (!options.hasOwnProperty("minimumInputLength")) { options["minimumInputLength"] = 3; }
    if (!options.hasOwnProperty("dataType")) { options["dataType"] = 'json'; }
    if (!options.hasOwnProperty("page_limit")) { options["page_limit"] = '10'; }
    if (!options.hasOwnProperty("dropdownCssClass")) { options["dropdownCssClass"] = 'bigdrop'; }
    if (!options.hasOwnProperty("width")) { options["width"] = '100%'; }
}

function getActiveDirectoryData(data, searchTerm) {
    //ctxAdData is defined and set in common.js
    var promise = null;
    var tableProperties = { table: 'ActiveDirectoryUsers', id: 'sAMAccountName', name: 'displayName' };
    var idField = tableProperties['id'];
    var displayField = tableProperties['name'];
    data.results = [];
    ctxAdData.prepareRequest = function (r) {
        r[0].requestUri += "('*" + searchTerm + "*')";
    }
    promise = ctxAdData[tableProperties['table']]

    .forEach(function (dataItem) {
        data.results.push({
            id: dataItem[idField],
            text: dataItem[displayField] + " - " + dataItem["department"],
            username: dataItem["sAMAccountName"],
            displayname: dataItem["displayName"],
            email: dataItem["mail"],
            department: dataItem["department"],
            firstname: dataItem["givenName"],
            lastname: dataItem["sn"]
        });
    });
    return promise;
}

function addDivRow($divMaster, contentItem, options) {
    checkSelect2Options(options);
    var $divChild = $('<div class="dfchlsChildDiv" />');
    var $input = $("<input data-role='none' type='text'>");
    $divChild.append($input);
    $divMaster.append($divChild);
    var placeholderText = options["placeholder"];
    $input
        .select2({
            placeholder: placeholderText,
            quietMillis: options["quietMillis"],
            minimumInputLength: options["minimumInputLength"],
            page_limit: options["page_limit"],
            width: options["width"],
            query: function (query) {
                var items = [];
                getActiveDirectoryData(items, query.term)
                    .then(function () {
                        query.callback(items);
                    });
            }
        })
        .on("change", function (e) {
            contentItem.screen.findContentItem("UserName").value = e.added.username;
            contentItem.screen.findContentItem("Email").value = e.added.email;
            contentItem.screen.findContentItem("Department").value = e.added.department;          
        });    
    addAttributeDataRole($divMaster, 'select2-focusser select2-offscreen');
}
//this function is for render and display needs:
function addAttributeDataRole($ctrl, classToFind) {
    try {
        $ctrl.find("input[type=text]").each(function () {
            var $this = $(this);
            //select input boxes with CssClass select2-focusser.
            //These are inputs rendered by select2-Control and are 
            //used for item searching. Adding attribute "data-role=none" prevent input from being wrapped by jQuery-mobile:

            if ($this.hasClass(classToFind)) {
                $this.attr('data-role', 'none');
            }
        });
    } catch (e) {
        console.log(e.message + "; description:" + e.description);
    }
}

Add a reference to this js file to the default.htm.
The default.htm must now have at least the following references:

    <script type="text/javascript" src="scripts/common.js"></script>
    <script type="text/javascript" src="scripts/select2.min.js"></script>
    <script type="text/javascript" src="scripts/dfchls.js"></script>
    <script type="text/javascript" src="scripts/jaydata.min.js"></script>
    <script type="text/javascript" src="scripts/jaydataproviders/odataprovider.min.js"></script>

And for eye-candy, use css these files:

    <link href="content/select2-light.css" rel="stylesheet" />
    <link href="content/select2-remove-arrow.css" rel="stylesheet" />

We have to add our new control to our AddEdit screen. Add a new Data item, select ‘local property’ and call it ‘SearchAdUser’. Drag your new property in the screen designer and select ‘Custom Control’ for this property:

Now, edit the render method for this new custom control:

myapp.AddEditADUser.SearchAdUser_render = function (element, contentItem) {
    // Write code here.
    dfchls.addAdSearchBox($(element), contentItem, null);
};

Done

That’s it!
Now, you can search for any user in your company!

Of course, you can use the Lightswitch dark theme as well. For this, use the select2-dark.css:

Download

You can download the complete code from our GitHub Account at biz.dfch.LS.LdapExample.

That’s all for now, folks!