wavemaker

Continuing from our previous post Leveraging vCD + vCO + Wavemaker Part 1, I am now going to show you how to integrate the vCenter Orchestrator workflow we created earlier into Wavemaker to present a simple web application to an end user. If you can not wait to go through all the steps, jump to the bottom for the video of the final product.

You will need to download Wavemaker 6.4.3 RC versus the 6.3.3 GA because there is a specific UI feature that I have utilized to provide a better user experience. You will need to register for a free account to download the development builds and I have been told 6.4.3 should GA pretty soon.

Once you have downloaded Wavemaker, you will need to install it on your system and you maybe asked to perform an additional library download, just follow the instructions and you ready to create your first Wavemaker application. After the installation, go ahead and start the Wavemaker application and it will automatically launch a web browser which will be your workspace. You will need to use either Firefox or Internet Explorer, as it does not work with Chrome.

In case you get lost below or would like to just get this working right away, I have exported my project and it can be downloaded it here. You can simply import the .zip file and make the necessary changes to the project to fit your environment.

Start off by creating a new project and give your project a name and just use the default theme and then click ok.

Next, at the top screen click on "Services" and then "Web Service" since vCO is exposed as a webService API which we will import into Wavemaker.

We need to specify the URL of your vCO server, it should be in the following format:

http://vco.primp-industries.com:8280/vmware-vmo-webcontrol/webservice?WSDL

and then provide a name for your service, in the example, I named it "vCOReference".

Once the vCO service has been imported, click on "Canvas" and then "Palette". We will now add widgets for our web application. Add the following in this order: Picture (if you wish), Text, Button and Grid. It should look something like the following:

Most of these should be pretty self explanatory widgets. The Grid (dataGrid) is used to display your data result.

If you decide you would like to add a logo/banner, click on the "Source" tab at the top and then click on "Resources". Here you will be able to add any additional resources to your project such as a images.

Once you have uploaded your image, select the picture widgets in your canvas and click on "source" icon to the right side of the screen. Here you can now bind to the image you just uploaded and click "Bind", there is also a green icon on the upper right hand corner to show you whether or not the binding is the proper type.

You should see the image being displayed in the picture widget.

Now click on the Text widget in your canvas and go ahead and provide a name for the variable and also a caption which is located on the right side of the screen. In the example, I named both fields "username", you can provide a different name but be sure to keep track of the variable name as it is used later on.

If you recall earlier, I mentioned I am using a specific UI widget that requires Wavemaker 6.4.3 RC, which is the LoadingDialog widget and allows us to display a busy dialog for various events. This is just one of the many features in 6.4.3 release. Go ahead and add this to the canvas and it is under "Dialogs". We will also configure the "widgetToCover" and specify "dojoGrid1" which is just the name of our dataGrid.

Next we will need to add several variables that will call the vCO services and store our results. To add these new variables, you will click on the "Insert" option at the very top. It is also helpful to be in the "Services" tab next to "Model" to see the variables that have been created in your navigation pane.

The first variable that we will add is called "varResult", this will be a regular variable that will be used to store our results. Make sure the following properties on the right side of the screen are set:

name = varResult
type = StringData
isList = checked

The second variable to be created will be a "Service Variable" and will named "getResult" which will retrieve the results from vCO using the getWorkflowTokenResult API method. Make sure the following properties on the right side of the screen are set:

name = getResult
servcice = vCOReference
operation = getWorkflowTokenResult

The third variable will be a "Timer" variable which is located under "Advanced" and will be named "resultTimer". This is needed as the results are not available immediately after executing the workflow and we set a 3sec timer to then retrieve our results.

Make sure the following properties on the right side of the screen are set:

name = resultTimer
delay = 3000 (in MS, you may need to tweak this based on your env)
repeating = unchecked

We will also need to specify the action to trigger when the timer fires, this is defined under "Events" for the resultTimer variable. Set the onTimerFire to "getResult" Service Variable that we defined earlier. When the timer goes off, it will retrieve the results of our workflow

The fourth and final variable that we will need to add is also a "Service Variable" which will execute the workflow by calling the executeWorkflow API in vCO. We will name it "runWF". Make sure the following properties on the right side of the screen are set:

name = runWF
service = vCOReference
operation = executeWorkflow

Now we need to bind our parameters which will be used to provide input to the various variables and/or vCO API methods.

The first one will be the "getResult" variable and you will need to expand down to "parameters" on the right side of the screen. Here you should see three parameters which will need to be populated: password, username and workflowTokenId.

Click on "username" and then a new window will pop-up. Select "Expression" and then select "username" and provide the username that will be used to connect to vCO and ensure there are double quotes around the string and click Apply when finished.

Click on "password" and do the same exact thing and provide the password that will be used to connect to vCO and click Apply when finished.

Click on "workflowId" and instead of selecting "Expression", select "Simple" and drill down into the "runWF" Service Variable and select "id". As part of the executeWorkflow return object, a WorkflowTokenType is returned and the "id" property is what is needed for us to retrieve the results of the workflow. Click "Bind" to finish the parameter binding for this service variable.

Note: There is a green box on the upper right hand of the screen which validates the property binding type, this can be helpful when binding parameters.

After you have finished binding those three parameters, you should now see the following:

Lastly for this service variable, we will also need to create an event trigger. Select "onResult" and click on "Javascript" which will allow us to insert some javascript logic upon the result of the data.

You will now be taken to the "Source" tab and a new javascript function will automatically be created for you called "getResultResult" assuming you have followed the naming standards in the example. You will need to add the following lines of javascript to the function:

The script clears any previous output on the dataGrid and then retrieves the data which is returned as a single string and replaces all the characters we do not want. It then splits using the ";" as the delimiter and adds each entry to our dataGrid.

Once you have pasted the javascript, go ahead and click back on the "Cavnas" tab. In addition to the first even trigger, we will also set "onSuccess" to loadingDialog1.hide which will hide the busy dialog after the results are available to be displayed on the dataGrid.

Now we need to configure the event triggers for "runWF" service variable. The first is "onBeforeUpdate" and we will set that to loadingDialog1.show which will display the busy dialog while the workflow is being executing. The second will be "onResult" and that will be configured to call the "resultTimer" timer variable and retrieve our results after the workflow has been executed.

Next we will need to configure the "submit" button event and we will again create a custom javascript which will call our "runWF" service variable.

Note: This technically could have been easier to bind to the parameters of the "runWF" service variable, but I found a bug that prevented this from working. A work around was provided by Michael Kantor, a Wavemaker developer and the bug has been reported and hopefully will be fixed before the GA version of 6.4.3 is released.

You will need to add the following lines of javascript to the function:

Here you will need to substitute the username/password to your vCO server and the workflowId which can be obtained by following this blog post. The workflowInputs requires the name of the workflow input variable name and assuming you followed the previous article, you can keep the same name and "this.username.getDataValue()" will extract the string from the username text widget you added. If you changed the name of the variable, you will need to update this accordingly.

Okay, we are almost there. The last widget we need to add an event trigger to is the dataGrid and for "onClick" we will also create a new javascript.

You will need to add the following lines of javascript to the function:

This single line of javascript will open a new window when a user clicks on one of the dataGrid cells.

Now lastly, we just need to bind our dataGrid to our "varResult" variable that contains the results. Select the dataGrid widget and click on "dataSet" and bind to "varResult" and ensure you see a green icon on the upper right hand side of the window.

You can also name the column header, by default it is called "DataValue" and you can change it to "orgUrls" if you like. To do so, right click on the dataGrid and select "editColumns".

We are all done now! We just need to compile the application by click on the "Run" icon at the very top. After the application compiles, it will open a new window to your new Wavemaker application.

Here is a quick video demonstration of the application using:

Leveraging vCD + vCO + Wavemaker Part 2 from lamw on Vimeo.

So there you have it, creating your own custom web portal application using Wavemaker, vCenter Orchestrator and vCloud Director vCO Plugin! As you can see the possibilities are endless and with a little javascript knowledge, you can create any type of portal that goes beyond just VMware products!

I would like to give a big thanks to Christian Johannsen, Michael Kantor and especially Craig Conover in assisting me with creating my first Wavemaker application. These guys are truly rock stars with vCO and/or Wavemaker! For more information about Wavmeker, definitely check out documentation/examples and the Wavemaker community forums.

In addition, there are some other great examples of utilizing Wavemaker written by my colleagues:

A few weeks back I had a discussion with Maish Saidel-Keesing and Jason Boche on twitter about whether or not a user can be part of multiple vCloud organizations, and the answer is yes. Maish followed up with the question of whether it was possible to have users access a single URL and be forwarded to their correct organization URL. The answer of course is yes and I suggested one could build a simple intranet/webapp utilizing the vCloud API to query for a given user and to dynamically generate the organization URLs for that user.

I thought that was the end of that conversation until a little later in the day when I noticed an interesting blog post vCO - wavemaker, your cloud webservice (part I) by Christian Johannsen showing how to create a simple web application using VMware's recent acquisition of Wavemaker and vCenter Orchestrator. A little light bulb went off and my curiosity got the best of me giving me an idea. I wanted to see if it was possible to leverage vCenter Orchestrator, the new vCloud Director plugin for vCO and Wavemaker to create a simple web application that would solve the above use case.

In this first of two part post, I will first demonstrate how to create a vCO workflow using the new vCloud Director plugin. If you can not wait, go to the bottom of this post to check out video of the final results.

Here is an example of my vCloud Director lab setup in which there are multiple organizations with multiple users in each organization.

As you can see, we show that "coke-admin" user is part of multiple organizations "Coke" and "MysterDrink".

Next let's take a look at our vCO server and configuration (I'm using the vCO virtual appliance). I will assume you have installed and configured the new vCloud Director plugin for vCO. If not, take a look at here for the documentation.

Now let's launch the vCO Client, you can access this by just pointing your browser to your vCO Server if you are using the vCO virtual appliance and clicking on "Start Orchestrator Client".

You will now login to your vCO Server using either the default credentials or an account you created within your director services (AD,LDAP).

To verify that the vCloud Director plugin for vCO was configured correctly, click on the "Inventory" tab on the left and you should be able to expand out your vCloud Director inventory.

Now you are ready to create your workflow, click on the "Workflows" tab on the left.

Create a new directory to help organize your custom workflows. Right click on Library to create a new director. In this example I am calling it "vCloud Director Custom".

Next, right click on the director that was just created and create a new workflow. In this example I am calling it "getUserOrgUrls".

Right click on the new workflow that was just created and click on "Edit" which will allow us to start creating our workflow.

Let's define our input parameter which will be the name of the user inquiring about the organizations he/she is part of. Click on the orange button to create a new input variable, the type will be "string" and in this example I named the variable "userName" which will be used a little bit later in the workflow creation.

Let's define our output parameter which will be a list of organizations URLs the user is part of. Click on the green button to create a new output variable, the type will be "array/string" and in this example I named the variable "OrgUrls" which will also be used later in the workflow.

Next click on "Schema" tab and add a "Scriptable Task" and "End workflow" element to the workflow.

Then click on the Connector Tool next to the Validate button and connect the starting element to "Scriptable task" and to "End workflow" element.

Now we will create a simple vCO script to actually perform the query of the "userName" and return a list of "orgUrls". Click on the "Scriptable task" element and you should see a new screen load at the bottom like the following.

Next we will bind our input variable, click on the on the icon next to the X and select "userName" variable which we created earlier.

Next will bind our output variable, click on the on the icon next to the X and select "orgUrls" variable which we created earlier.

To verify that both your input and output variables were binded, correct, you can click on the "Visual Binding" tab and it should look like the following.

Lastly, we will insert our vCO script. Click on "Scripting" tab and insert the following snippet.

I would like to thank both Christian Johannsen and Christophe Decanini for their assistance on the vCO script. These guys are rock stars when it comes to vCO and you should definitely follow them on twitter if you are not already.

Next we will validate the script to ensure all input/output parameters were used correctly and we do not have any known syntax errors in the script. Click on the "Validate" button at the top and you should get no warnings/errors.

Okay, we are all done now! Let's go ahead and give our new workflow a test run. Here is a quick video on executing our getUserOrgUrl workflow:

Leveraging vCD + vCO + Wavemaker Part 1 from lamw on Vimeo.

As you can see, we can easily leverage vCO and the new vCloud Director plugin to perform a variety of tasks not only limited to orchestrated-based operations but even simple queries as well. In my next post, I will show you how to integrate this with Wavemaker to present a simple web application for end users to consume. Stay tuned!