Building a web page

To build a web page, proceed as follows:

  1. Double-click the Default.aspx web page to open it and enter Design mode.

  2. Select View > Toolbox to open the QlikView area.

  3. Select QvObject in the Toolbox and drag it to the web page. The control and a Smart Tag are opened. A Smart Tag is a Visual Studio feature that presents the most common properties of the object that have to be set. To view the Smart Tag at any time, click the arrow tab in the top right corner of the control.

    Note: If QvObject is not available in the Toolbox, see QlikView Control for information on how to add it manually.
  4. Press CTRL+S to save the Default.aspx web page.

Smart Tag Settings

The following object properties are available in the Smart Tag:

QlikViewDocument Select a document to connect to on QlikView Server.
ObjectType Select an object type from the QlikView document. This filters the list for ObjectID (see below).
ObjectID Select an object from the QlikView document.
Height Set the height of the object on the web page.
Width Set the width of the object on the web page.
If there are no documents in the QlikViewDocument drop-down list, the QvAjaxZfcPath path setting might be incorrect; see QlikView Settings.

Property Viewer

The object also has a properties view. Right-click the control to display the Properties pane, and make sure the control is highlighted. Only the properties under the QlikView Object and QlikView Settings headings are relevant to the object.

QlikView Object

The following object properties, in addition to the ones described in Smart Tag Settings, are available:

InlineStyle

See Inline Styles.

 

Tag A custom tag can be defined for the object and used in, for example, JavaScript. This can be used for customizing a QvObject, marking a QvObject for special action, distinguishing between one QvObject and another one at runtime, and so on. The tag information can be used to better integrate a QvObject.
Note: The tag is added as an attribute of the div tag of the QvObject.

The following example shows a function that returns an array of page elements (representing QvObjects) that have the tag that was passed as input:

<script type="text/javascript"> GetAllQvObjectsByTag = function(tag) { var tagObjs = []; var divs = document.getElementsByTagName("div"; for (var i = 0; i < divs.length; i++) { if (divs[i].getAttribute("Tag") == tag) { tagObjs.push(divs[i]); } } return tagObjs; } </script>

QlikView Settings

The properties defined in the QlikView Settings group affect all QlikView objects on the web page.
Anonymous Set this property to True to allow the compiled web page to automatically assign the users opening the web page to Anonymous. It also affects the fetching of documents and objects during design.
CustomIcons

Custom images can be used to substitute caption icons. The following caption icons can be replaced by custom icons:

  • Lock (icon code: LOC)
  • Unlock (icon code: ULC)
  • Clear Other Fields (icon code: CO)
  • Select Excluded (icon code: SE)
  • Select Possible (icon code: SP)
  • Select All (icon code: SA)
  • Search (icon code: SEARCH)
  • Send to Microsoft Excel® (icon code: XL)
  • Clear (icon code: CD)
  • Print (icon code: PR)

The syntax of custom image is icon code:icon url. Custom icons must use relative paths. Separate each custom icon with a comma, if more than one is used.

Note: For additional information on custom icons, see the JavaScript API documentation.
CustomInitialization Set this property to True to enable custom functions (or to make other adaptations, see the JavaScript API documentation) to run.
See Customizations for an example of how to use this property.
QvAjaxZfcPath Presents the path to the AJAX directory on the QlikView Web Server (QVWS and IIS, if configured). For example, /QvAjaxZfc/, if using a local web server, or http://QvWebServer/QvAjaxZfx/ (http address), if using a remote server. This property can only be edited in the Web.config file.

Source View

A web page can be viewed in Design mode or Source mode. The latter shows the actual web page code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <%@Register assembly="QlikViewWorkBench" namespace="QT.QWW.WebControls" tagprexif="qww" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> <qww:QvObject ID="QvObject1" runat="server" QlikViewDocument="Presidents (Local)" /> </form> </body> </html>

The <qww:QvObject... tag is the code created by inserting the QvObject on the web page. Properties can be specified here. Thanks to full integration with Visual Studio, there is also the advantage of IntelliSense®, that is, Visual Studio presents the available properties and methods of the control.

Customizations

If custom JavaScript functions are to run after the QlikView object has been rendered, add these functions in the BodyOnLoadFunctionNames array. To call the function MyInit, add the following line in the JavaScript for the page:

Qv.InitWorkbench({ View: 'Films', Host: 'Local', BodyOnLoadFunctionNames: 'MyInit'});

To add a custom function that is executed when a specific QlikView object is changed, use the function GetObject. In the following example, the number of values that are Enabled when a change is made are presented:

<script type="text/javascript"> var mydoc; var myobject; MyInit = function() { mydoc = Qv.GetDocument("Films"); myobject = mydoc.GetObject("LB1458"); myobject.SetOnUpdateComplete(MyListIsUpdated); } MyListIsUpdated 0 function() { alert("Number of enabled values: " + myobject.Data.GetEnabled().Length; } Qv.InitWorkBench({View: 'Films', Host: 'Local', BodyOnLoadFunctionNames: 'MyInit'});

If custom functions are to be executed (or other adaptations are to be made, see the JavaScript API documentation), proceed as follows:

  1. Set the QvObject property CustomInitialization to True, see QlikView Settings.

  2. Add an adjusted Qv.InitWorkbench code row, containing the needed parameters. A function, MyInit, is executed at start-up, in the following example:

    Qv.InitWorkbench({ View: 'Films', Host: 'Local', BodyOnLoadFunctionNames: 'MyInit'})

For more information on the arguments that can be passed using functions, see the JavaScript API documentation.

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?