MDT Deployment Wizard goes JQuery – Combining VBScript and JavaScript

As you are well aware, JavaScript is, what drives our current online world, make it more dynamic then ever. In opposite to this, VBScript is, what drives almost everything in MDT, giving us full flexibility in our deployments, no matter which version of Windows we are using it on. But what most aren’t aware of is, that those languages easily talk to each other.

“Why would I care?” you might ask.

Well, let’s think about the MDT Wizard or hta FrontEnds in general. Pretty often you write them based on VBScript, just because all the referenced files are using VBScript as well. Which is great for some easy dialogs, type in some information, choose from a short list, etc. and then go ahead. But as soon as you get more dynamic, let’s say manipulating the objects like adding Drag&Drop capabilities, fading in new elements to get a better user experience, etc. it gets a lot more difficult. Even worse, if you start doing any asynchronous operations, working with web services etc. On web sites, your are doing this the whole day. You are used to elements, that load and update in the background, without blocking your page. Reading a blog post while you see current information from twitter etc.

Now if your wizard/frontend queries a database or a web service to e.g. show a list of Task Sequences or applications/packages etc., they need to do exactly the same. And yes, this is all possible in VBScript, but you have to put a lot of effort into it, to code this yourself. When using JavaScript, we have all those existing Frameworks and libraries, we can make use of like Prototype, JQuery, etc. That do this type of things out of the box.

What I want to show in this post is, how we can leverage these features from JavaScript in our VBScript based hta. And I use the MDT Wizard as a sample. At the end of this post, we will have a working wizard, that shows us some twitter feeds.

Calling VBScript from JavaScript and vice versa

Let’s first start with some easy samples to demonstrate, that we can actually really call VBScript functions from JavaScript and also the other way round. Let’s have a look on this extremely simplified hta:

So if we click the button, it will call the function “GetInput”, which is written in JavaScript. This function takes the value of the textbox and pass it to a function called “WriteOutput”, which is written in VBScript, and this one just writes this text to a label. Not really rocket science but it shows how easy it is to combine different scripting languages.

Now, let’s get a bit more advanced. We reference the ZTIUtility.vbs from MDT and the JQuery library and have access to two different pretty complex libraries.

In this sample (I will upload it to CodePlex as always so no need to type it down from this screenshots ), I make use of some JQuery specific features. After the document has finished loading, we dynamically bind the click event of the button and execute an anonymous function. In this function, we get the value of the text field, use a MDT function to obfuscate the value (I recently blogged about this and other functions from MDT) slowly fade out an existing value, set a new value and slowly fade it in again.

As you can see, JQuery is using a much simpler syntax to reference objects in our DOM and allows us to implement some event handling on the fly. And if you ever tried to create some animations like this fading out and it using VBScript, you well, don’t even try it .

Extending the MDT Wizard

OK, this was a small, simple hta. How about something more complex? Let’s extend the MDT Wizard and let it make use of this functionality. What I would like to achieve is having a wizard pane, that allows me to display tweets from Twitter.

Another advantage of JQuery is its PlugIn architecture. So even if something is missing in JQuery, you can be sure there is a plugin available, that does exactly what you are missing. So for our example, I use a Twitter PlugIn from SeaOfClouds called Tweet.

After downloading JQuery and Tweet, we open the wizard.hta from MDT and reference this two scripts, plus the stylesheet that comes with Tweet to make it look a bit more pretty. Depending on the version of mshta, we also might need to add the JSON2 javascript, to have JSON support.

Now we need to create a new wizard pane. This pane contains just a textbox to type in some search string, a button to start the search and a div that will be used to store the tweets. In the XY part we tell it to execute a function called “getTweets()”.

In the wizard.hta, I add a new JavaScript part to define this “getTweets()” function. The function binds the Tweets plugin to the div we have specified in the wizard pane. Each time it is called, it will get the value from the textbox, replace it with some default text if nothing has been entered and then call Twitter to get some Tweeds.

The line with “$.support.cors = true;” is used to solve a small problem we might experience when calling an external URL. As with most scripting languages used within a browser, JavaScript has the “Same Origin Policy”. As we start the hta locally on the computer, it might not really “want” to talk to Twitter as it’s not “local”. But JQuery can also help us here and this one-liner gets around this problem.

If everything went well, we now can start the MDT wizard with the following line

and then should see some Tweets

And now you can use the text box to search in Twitter

You can download this demo project from CodePlex. It’s not really a production ready sample, but hopefully gives you some new ideas. I will soon post an interesting solution that is based on this idea. If you have any feedback, please get back to me.