Web-based Active Directory user search and an interactive user map [VBScript + JavaScript]

Background

When I started at Bauer Media, they were using an ancient inhouse-made intranet with no ongoing support (written in Classic ASP/VBScript). Although I knew VBA, I didn't know much about building dynamic websites or JavaScript - which is always a great opportunity to learn something new.

First of all, they used to have many different (and inconsistent) data sources for staff information. I merged all data into AD and pointed intranet search to LDAP. Then I happened to find building plans in digital format, and got an idea to create a clickable map of our staff. I had been slowly updating the old intranet, fixing broken features, implementing new, refreshing its ancient look, but it was eventually decided that both AU and NZ will get a new intranet built on Sharepoint.

I like Sharepoint in general, but our new intranet implementation wasn't... let's say fortunate. And as it was all driven from AU, we (which means I) were not allowed to change things. I didn't want to shut my baby down, so I reduced its functionality just to user search and the map. Due to many UX problems, missing features and no further development on the new platform, my map is still in use.

User search page

The user search are mostly just ADODB calls to AD, passing parameters from a webform. Most of the code is VBScript (on IIS). It works, but I would like to rewrite it in MeteorJS in the future.

Staff can find other active NZ users, get their basic details, see their photos and a minimap. If they click on a desk number, a bigger version of the map pops up.

As LinkedIn doesn't like my animated GIFs, you can find them here and here.

Prepare the map (Illustrator)

I had never worked with Illustrator before, so it took me a few painful attempts to create clickable objects (as we have 400 desks in our office). The paths has to be closed (if you want to apply 'fill' and be able to click on a whole desk, not just its borders), objects are sorted into layers (to apply styles easily), desk paths grouped together, the groups have to be named (I am using G for ground floor and M for the first floor, followed by 3 digits). Then you can save it as SVG (if you use export instead of save as, it won't produce right results), and a crucial save settings is CSS Properties: Style Elements to create style classes. There is also a bug when Illustrator sometimes decides to rename your groups (adding _n_ suffix to your IDs). There is a workaround, or you have to remove the suffix manually. I used to link SVG, but that won't give you direct access to its DOM and it was quite hard to work with. My latest version has the map embedded in the .asp file. Don't forget to fix Illustrator styles (remove decimals from pixel sizes, rename fonts if required, and I also delete some of its default styles and apply my own - they are not always named same as they were the previous export; so creating documentation on how to maintain the map is quite hard).

Website structure

There is a page that contains the actual map (that I have recently rewritten in pure JavaScript). It ajax-calls another page (VBScript) which makes queries to Active Directory and returns a forged JSON object. There is one part I couldn't figure out in JS/VBS: loading staff photos. I found C# code online that does the job at the moment, but it would be probably better to pre-load all the photos upfront and return them in JSON. Caching could be another option, but I will probably leave it until I have some time to write the backend in MeteorJS (NodeJS) - as that would let me simply sync photos through client's minimongo database.

These are some screenshots of the map. Check the linked GIF above to see more.

Implementation notes

AD extensionAttribute1 contains the actual desk number. It is updated manually by me, our helpdesk or a few other people. I also created a simple Excel form for them.