qWidget

wiAction Component

The directive wiAction allows you to add actions to any element (very similar to the concept of actions in QlikView 11).

Basic Usage

You can add the wi-action directive to any Html-element, a button, a div, a link, etc.

Example:

<ANY
    wi-action="back">
</ANY>

Result: If the user clicks on the element the last selection in the current app will be called.

Multiple Actions

Multiple actions triggered by the same event can be defined by delimiting the actions with a semicolon (;).

<ANY
    wi-action="field.selectAlternative('Dim1',true);field.lock('Dim1')">
</ANY>

First select the alternatives in the field Dim1, then locks the selections in field Dim1.

Available Actions

The following actions are available:

Selections

Action Description
back Back to the last selection in the current app.
forward Next selection in the current app.
clearAll Clear all selections in the current app.
lockall Lock all selections in the current app.
unlockAll Unlock all selections in the current app.
selectValues Select values of the current object (see examples below)

Parameters:
dimNo - Dimension index number (zero based)
values - Array of value indices to select
toggleMode - defines if toggling should be enabled (true by default).

Example:
wi-action="selectValues(0,0,true);"
wi-action="selectValues(0,{{row[0].qElemNumber}},true);"

Bookmarks

Action Description
bookmark.apply Apply a bookmark.

Parameter:
id - Id of the bookmark

Example:
wiAction="bookmark.apply('Xzraf')"
bookmark.create Create a bookmark.

Parameters:
name - Name of the bookmark
description - Description of the bookmark.

Example:
wiAction="bookmark.create('My new Bookmark', 'This is the description.')"
bookmark.remove Deletes a bookmark.

Parameter:
id - Id of the bookmark.

Example:
wiAction="bookmark.remove('ZwAkr')"

Field Methods

Action Description
field.clear Clear a field selection.

Parameter:
name - Name of the field

Example:
wi-action="field.clear('Dim1')"
field.clearOther Clear all fields except the selected one.

Parameter:
name - Name of the field
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.clearOther('Dim1', true)"
field.lock Lock a field selection.

Parameter:
name - Name of the field.

Example:
wi-action="field.lock('Dim1')"
field.select Select field values.

Parameters:
name - Name of the field
values - Array of values to select
toggle - Enable/disable toggling
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.select('Dim1', [1,2,3], true, false)"
field.selectAll Select all values in a field.

Parameters:
name - Name of the field
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.selectAll('Dim1', true)"
field.selectAlternative Select alternative values in a field (Bug in 0.96, not working).

Parameters:
name - Name of the field
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.selectAlternative('Dim1', true)"
field.selectExcluded Select excluded values in a field.

Parameters:
name - Name of the field.
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.selectExcluded('Dim1', true)"
field.selectMatch Select matching field values.

Parameters:
name - Name of the field
match - Match string
softlock - If true, locked selections can be overridden.

Examples:
wi-action="field.selectMatch('Dim1', 'A', true)"
wi-action="field.selectMatch('Customer', 'A*', true)"
field.selectPossible Select possible values in a field.

Parameters:
name - Name of the field.
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.selectPossible('Dim1', true')"
field.toggleSelect Toggle a field selection.

Parameters:
name - Name of the field.
match - Match string.
softlock - If true, locked selections can be overridden.

Example:
wi-action="field.toggleSelect('Dim1', 'A', true)"
field.unlock Unlock a field selection.

Parameter:
name - Name of the field.

Example:
wi-action="field.unlock('Dim1')"
Action Description
nextSheet Go to the next sheet
prevSheet Go to the previous sheet
gotoSheet Go to a sheet with the given Id

Parameters:
id - Id of the sheet

Example:
wi-action="gotoSheet('zBIAzG')"

Variables

Action Description
variable.setContent Set the content of a variable.

Parameters:
name - Name of the variable
content - New content of the variable

Example:
wi-action="variable.setContent('vVariable', 'myValue')"
variable.create Create a variable

Parameters:
name - Name of the variable

Example:
wi-action="variable.create('vNewVariable')"

Action Examples

Html:

<wi-sys-info content="bookmarks">
    <ul class="wiList">
        <li ng-repeat="bookmark in bookmarks">
            <b>{{bookmark.qData.title}}</b>
            [<a href="javascript:void(0);" 
                wi-action="bookmark.apply('{{bookmark.qInfo.qId}}')">Apply</a>]
            | 
            [<a href="javascript:void(0);" 
                wi-action="bookmark.remove('{{bookmark.qInfo.qId}}')">Delete</a>]
            <br/>
        </li>
    </ul>
</wi-sys-info>

Result:

Icon to Go to the Next sheet

Html:

<i wi-action="nextSheet"
    class="fa fa-arrow-right fa-4x nextSheetIcon">
</i>

Css:

.nextSheetIcon {
    color:#999;
    cursor:pointer;
}

Result:

Selecting Values: Create a Simple Select-Box

This example demonstrates how to create a simple select-box.

Data:
The typical sample-dataset (Ctrl+0+0) is assumed.
Dimension: Dim1

Html:
Iterate through all values and display in boxes:

<div class="selectBox" ng-repeat="row in layout.qHyperCube.qDataPages[0].qMatrix">
    <!-- Parameters for wiAction -->
    <!-- 1st: dimNo, so always 0 in this example -->
    <!-- 2nd: -->
    <!-- 3rd: 
    <div wi-action="selectValues(0,{{row[0].qElemNumber}},true)">
        {{row[0].qText}}
    </div>
</div>

Css:

.selectBox {
    border: 1px solid #ccc;
    width:200px;
    padding:10px 10px 10px 10px;
    margin-top:2px;
    cursor:pointer;
}
.selectBox:hover {
    background-color:#60A729;
    color:#fff;
}

Result:

(Default view)

(Hovering over the fields)

Select a Value Using a Button

This is just a very simple qWidget with a single button which select a hardcoded value in the dimension Dim1:

Data:
The typical sample-dataset (Ctrl+0+0) is assumed.
Dimension: Dim1

Html:

<button 
    wi-action="selectValues(0,{{layout.qHyperCube.qDataPages[0].qMatrix[0][0].qElemNumber}},true)">
    Select A in Dim1
</button>

Result:
This selects the first item in Dim1 (according to the sort-rule).