You are on page 1of 43

http://community.qlikview.com/wikis/qvwb9/default.

aspx
Step 1. Installation
This part of the Walk Through shows hows to install the QlikView WorkBench installer.

The Installer
The first step is to run the QlikView WorkBench Setup.exe file, which you downloaded from
here.

The fourth step will ask you to select what type of installation you would like. The rest of this
documentation will assume that you have installed the Complete version.

The QlikView WorkBench is installed to your Program Files folder, although you can change this
in the installtion wizard, but it is typically
C:\Program Files\QlikView\WorkBench
Having installed the QlikView WorkBench, you will see the following folders at the above path

The folders will be populated depending on which features you installed. If you installed the
Templates they will be placed in your Visual Studio Template folders under My Documents

Complete
We recommend that you select the complete installation as it includes everything you need to
fully develop QlikView enabled websites.
Installed features include:
Feature
ASP.NET 2.0 Server Controls

Visual Studio.NET 2008 Support*


Visual Studio.NET 2005 Support*
Reference Website

Themes
JavaScript Libraries

Support Shortcuts

Description
Installs the Assembly containing the ASP.NET 2.0
Server Controls component of the QlikView
WorkBench for use in the Visual Studio Editions
mentioned above. You will need to reference this
Assembly later in the Walk Through
Installs website and project templates for Visual
Studio.NET 2008.
Installs website and project templates for Visual
Studio.NET 2005.
Installs the QlikView WorkBench Reference Website,
which is a fully functioning website demonstrating (with
code examples) all of the controls in the QlikWeb
WorkBench. This is highly recommended for getting to
know the controls better.
A collection of pre-built css style sheets.
Installs the QlikView WorkBench JavaScript files which
contain libraries to simplify and enhance
commmunication with QlikView Server. Note that these
are also contained as part of the ASP.NET 2.0 Server
Controls and SharePoint Web Parts.
Installs shortcuts on the Start -> All Programs -> menu
to online support documentation, including an online

version of the Reference Website


*Please note that Visual Web Developer Express only support Website templates.
Edit

Compact
If you select to install the Compact version then the following features ARE NOT installed:
Reference Website
JavaScript files
Website and Project templates

Custom
With the custom installation, you may choose the features that you require

Uninstalling
You can uninstall the QlikView WorkBench either from the Add/Remove Programs Console or the
menu item in Start -> All Programs ->QlikView>QlikView WorkBench.

Step 2. Creating a Web Site


This part of the Walk Through will show you how to create a Website using the QlikView
WorkBench website template

A New Website
Open Visual Studio and from the File menu create a new Website

You will be presented with a New Website dialog. Select the correct Language (such as C#) and
the "QlikView WorkBench Website (CS)" Template file.

You may be presented with a .NET 3.5 prompt, which you can decline unless you wish to make
use of features supported by .NET 3.5 (the QlikWeb WorkBench is built against the .NET
framework 2.0).

The Solution Explorer


The website has now been created and you can see this in the "Solution Explorer". If you can't
see the Solution Explorer, you can bring it up from the View menu

The Solution Explorer shows the structure of the website and because of the template, some key
files (shown in the highlighted boxes) have been created for you. These are:
Some JavaScript files - this is advanced and covered elsewhere on this site
Themes, which contains style sheets for the objects only in the QlikView WorkBench
A full web config file - this file isn't actually used by the website, but it does contain many
more advanced QlikView WorkBench entries, which you can copy from here and paste
into the web config file. However, this is out of the scope of this Walk Through and more
information can be found elsewhere on this site
A web config file - this file defines key global properties of the site and has the basic
entries that the QlikView WorkBench needs.

Saving the Website's Solution


TIP!
Unless you specify, Visual Studio 200x will save a 'Solution' file for your website in a project folder
under MyDocuments. When you reopen the website again in Visual Studio, it uses this Solution
file to understand the structure of your website. However, if the solution file is in under the
MyDocuments folder, it makes it difficult to pass the website solution as a whole to other
developers as you need to get files from different folder locations.
So, we recommend that you save the Solution file in the same directory as the website.
Click on the root of the Solution

Select Save As from the menu

And choose the website's location. In future you can open this website by double clicking on the
solution file.

Step 3. Adding a Data Source


This step shows you how to add and configure the DataSource Control. This is a
special control that allows the web page to communicate with QlikView Server.

Bring up the Default.aspx web page in Design Mode. This page has some introductory text to
help you get started with the QlikView WorkBench, of which a lot is covered in this walk through.
Select all the text and delete it.
From the Toolbox, select the Data Source control

Drag this control onto the web page. When you do this, you will see the Data Source control and
a Smart Tag. Although this Data Source is visible in Design Mode, when you actually run the web
page it will be invisible. A Smart Tag is a feature of Visual Studio which presents to you the most
common or essential properties that you need to set on the control. To bring up the Smart Tag at
any time, click on the arrow tab on the top right corner of the control.

Defining the QlikView Application


Since the Data Source opens the communication with QlikView Server, you must define the
underlying QlikView application. You'll see in the image above that the Application file has not
been set.
In this example we are going to use the Entertainment QlikView application, which is also used in
the Reference Site. If you have already used the reference site, then this file should already be in
place. If not, then you need to locate it.
On installing the workbench you will see a Reference Website folder, normally at:
C:\Program Files\QlikView\WorkBench\Visual Studio.NET\Reference Website
In there is a zip file called QlikViewWorkBench_ReferenceWebSite.zip
In this zip file there is a folder called _qww and in there you will see the Entertainment.qvw file.

On the Smart Tag, click on the small button to the right of the 'QvApplicationFile (qvw file)' box
and navigate to your application. This will typically be in the following folder
C:\Program Files\QlikView\Examples\QvsDocuments
Frequent Support Issue
Please ensure that the application you select is located in a folder that is accessible by QlikView
Server (in other words - the folder should be defined on the 'Folders' tab of your QlikView Server
Control Panel)
You can also just type the application name in - you do not need to enter the 'qvw' extention.

The Properties View


All QlikView WorkBench controls have a QlikView WorkBench section in Visual Studio's Property
window, which just relates to properties (for the selected control) that can be set, such as the
application's name. In most instances these properties do not need to be changed, but they do
allow for more advanced configurations, which are discussed elsewhere on this website.

The Object Browser


A useful feature of the QlikView WorkBench is the Object Browser, which shows the underlying
application's sheet and object structure along with the object's ID. This means that you do not
need to keep looking at the application to find the object's ID.

To see this click on the 'Browse Application Structure' link on the Smart Tag.

You will then see a parsing window for a few moments.

You will then be displayed with the application's sheets and objects structure

Step 4. Building a web page


[Edit Tags]

<< Step 3. Adding a Data Source


Step 4 will take you through the steps to create a QlikView enabled web page with a few objects:
some listboxes, buttons and a chart. It will also show you how to configure some aspects of the
controls both in Design and Source View Mode.

Non-QlikView Controls
When you autogenerate a zero-footprint page in QlikView, you will be shown an interpretation of
the actual sheet in the application. However, on public sites you may want to show other
information such as RSS feeds and generally make the QlikView content appear fully integrated
into the website. This is something that the autogenerated pages can't do, but which the QlikView
WorkBench can, by letting you mix up content and controls.

In this example we'll add a simple label to the web page. Select and drag on a Standard Label

In the properties, set it's Text property

Adding QlikView WorkBench


Controls
In the cell below we'll now add a Listbox. From the QlikView WorkBench tab, select ListBox

and drag it on

The Listbox needs to know which Listbox it corresponds to in the underlying QlikView application.
As it's not been set yet, you are made aware of this with the warning text.

Setting the Datasource


With the release of 9.0 it is possible to have multiple QlikView applications on the same web
page. This means that you can effectively mash-up QlikView applications.
The Smart Tag shows a field, "DataSourceID", which is where you define which DataSource (and
hence application) the QlikView WorkBench object needs to connect to. If you leave this blank it
will default to the first DataSource on the page.

Setting the ObjectID


Like the Data Source, the Listbox has a Smart Tag. If you click the button next to the ObjectID's
entry, the Object Browser will appear, but this time it will be filtered to only show Listbox objects.
We want the Director listbox, so we navigate to this and choose it. Alternatively you can type the
ObjectID if you know it, but you must ensure that you type it exactly the same as in the
application as they are case sensitive .

Title Automatically Set


The caption area of the ListBox (title, colour, functions etc) are automatically pulled from the
QlikView Application. Read here to understand more about the Native QlikView Objects.

Designer
Being a visual design environment, you can resize the width of the Listbox, by grabbing the right
side handle and moving it in

Property Viewer
The Listbox also has a Property viewer, which is slightly different to the Data Source's as it has
different properties. You can see here that the ObjectID has been completed and so too has the
width

Here you also type in the Height and it will be reflected in the designer

Now add a second Listbox

The Source View


A web page can be viewed in a Design View Mode, which visually shows the page or in a Source
View Mode, which shows the actual ASP.NET code equivalent of the Design Mode. So the
changes made in one view will always be reflected in the other. To see this, click on the Source
button along the bottom the web page

You can see that the last Listbox added is highlighted, with the Director Listbox configured below.
The Director Listbox entry shows the properties that we set previously such as the ObjectID,
DataSource and dimensions.
As such, you can also directly type here the properties that you want to define. Because the
QlikView WorkBench is fully integrated into Visual Studio, when you begin to type with an
control's tag you get intelli-sense, that is, Visual Studio shows you all of the available properties
and methods that the control has, as you type. This makes coding against controls much more
accessible as you're not guessing what properties you can set

You'll find that after using the conrols and Visual Studio for a while that you may find that you use
the Design View Mode less and the Source View Mode more as it is quicker.

If you then go back into the Design View Mode and look at LBGENRE's Property Viewer that
what's just been typed out has been correctly set

Running
the
page

in
Visual
Studi

o
Now that a few objects are on the page we can 'Run' the website from Visual Studio. You can do
this in a number of ways. You can press F5, or click the Run button on the toolbar

or from the Debug menu item

You now have a few simple QlikView Listboxes on your webpage

Adding Navigation Buttons


In QlikView Enterprise you have full access to the application's toolbar, so you can easy clear and
undo/redo your selections. However, on a zero-footprint website you don't have access to these
functions and the internet browser's backwards and forwards buttons move through the pages
you have visited; not the selections you have made. So, you need to take this into consideration
and in the application ensure that you create 3 buttons that can perform these operations - in the
Entertainment application these are objectIDs BUBACK, BUCLEAR and BUFORWARD.
These can then be added to the webpage.

Completed Site
With the buttons added and also a chart, the website is now fully functional.

Disabled Script Debugging Message

Depending on your Internet Browser settings, you may get a warning about Script Debugging
being disabled. Simply click Yes to continue.

To stop this, in Internet Explorer, go to the Internet Options

Next, uncheck the Disable script debugging entry

Step 4. Building a web page

Step 4 will take you through the steps to create a QlikView enabled web page with a few objects:
some listboxes, buttons and a chart. It will also show you how to configure some aspects of the
controls both in Design and Source View Mode.

Non-QlikView Controls
When you autogenerate a zero-footprint page in QlikView, you will be shown an interpretation of
the actual sheet in the application. However, on public sites you may want to show other
information such as RSS feeds and generally make the QlikView content appear fully integrated
into the website. This is something that the autogenerated pages can't do, but which the QlikView
WorkBench can, by letting you mix up content and controls.

In this example we'll add a simple label to the web page. Select and drag on a Standard Label

In the properties, set it's Text property

Adding QlikView WorkBench


Controls
In the cell below we'll now add a Listbox. From the QlikView WorkBench tab, select ListBox

and drag it on

The Listbox needs to know which Listbox it corresponds to in the underlying QlikView application.
As it's not been set yet, you are made aware of this with the warning text.

Setting the Datasource


With the release of 9.0 it is possible to have multiple QlikView applications on the same web
page. This means that you can effectively mash-up QlikView applications.
The Smart Tag shows a field, "DataSourceID", which is where you define which DataSource (and
hence application) the QlikView WorkBench object needs to connect to. If you leave this blank it
will default to the first DataSource on the page.

Setting the ObjectID


Like the Data Source, the Listbox has a Smart Tag. If you click the button next to the ObjectID's
entry, the Object Browser will appear, but this time it will be filtered to only show Listbox objects.
We want the Director listbox, so we navigate to this and choose it. Alternatively you can type the
ObjectID if you know it, but you must ensure that you type it exactly the same as in the
application as they are case sensitive .

Title Automatically Set


The caption area of the ListBox (title, colour, functions etc) are automatically pulled from the
QlikView Application. Read here to understand more about the Native QlikView Objects.

Designer
Being a visual design environment, you can resize the width of the Listbox, by grabbing the right
side handle and moving it in

Property Viewer
The Listbox also has a Property viewer, which is slightly different to the Data Source's as it has
different properties. You can see here that the ObjectID has been completed and so too has the
width

Here you also type in the Height and it will be reflected in the designer

Now add a second Listbox

The Source View


A web page can be viewed in a Design View Mode, which visually shows the page or in a Source
View Mode, which shows the actual ASP.NET code equivalent of the Design Mode. So the
changes made in one view will always be reflected in the other. To see this, click on the Source
button along the bottom the web page

You can see that the last Listbox added is highlighted, with the Director Listbox configured below.
The Director Listbox entry shows the properties that we set previously such as the ObjectID,
DataSource and dimensions.
As such, you can also directly type here the properties that you want to define. Because the
QlikView WorkBench is fully integrated into Visual Studio, when you begin to type with an
control's tag you get intelli-sense, that is, Visual Studio shows you all of the available properties
and methods that the control has, as you type. This makes coding against controls much more
accessible as you're not guessing what properties you can set

You'll find that after using the conrols and Visual Studio for a while that you may find that you use
the Design View Mode less and the Source View Mode more as it is quicker.

If you then go back into the Design View Mode and look at LBGENRE's Property Viewer that
what's just been typed out has been correctly set

Running the page in Visual Studio

Now that a few objects are on the page we can 'Run' the website from Visual Studio. You can do
this in a number of ways. You can press F5, or click the Run button on the toolbar

or from the Debug menu item

You now have a few simple QlikView Listboxes on your webpage

Adding Navigation Buttons

In QlikView Enterprise you have full access to the application's toolbar, so you can easy clear and
undo/redo your selections. However, on a zero-footprint website you don't have access to these
functions and the internet browser's backwards and forwards buttons move through the pages
you have visited; not the selections you have made. So, you need to take this into consideration
and in the application ensure that you create 3 buttons that can perform these operations - in the
Entertainment application these are objectIDs BUBACK, BUCLEAR and BUFORWARD.
These can then be added to the webpage.

Completed Site
With the buttons added and also a chart, the website is now fully functional.

Disabled Script Debugging Message


Depending on your Internet Browser settings, you may get a warning about Script Debugging
being disabled. Simply click Yes to continue.

To stop this, in Internet Explorer, go to the Internet Options

Next, uncheck the Disable script debugging entry