Case Study UN: Hierarchical selections and dropdown field generation

[Yianni_Ververis]

UN was one of my most challenging projects in many aspects. This was not just a simple mashup or a simple webpage that uses the Capabilities Api and app.getObject() to display Qlik Sense objects. It was an entire solution that required many teams to be involved and share their expertise.

One of the most interesting problems I faced, was the structure of the qvf. In order for most of the charts to work, there had to be a group of selections made and in some cases, in a specific order.

For this example, I will talk about the chart on the Indicators page.

First we have to select the field "domain" and then get all of the available "Tier" in order to populate the drop down.

app.obj.app.field('DomainName').select([value], false, false)
.then(function(){
     me.getTier();
});

Then to get the HyperCube for the Field "Tier"

  me.getTier = function () {
       api.getFieldDataQ('Tier').then(function (data) {
          $scope.Tier = _.filter(data, function(obj){
          return (obj[0].qState!=='X' && obj[0].qState!=='L')?true:false;
     });
       $scope.selectTier($scope.Tier[0][0].qNum);
  });
  }

and populate the drop down with Angular's ng-repeat

<div class="dropdown" id="dropdownTier">
  <label>Select Tier:</label>
  <button class="btn btn-default dropdown-toggle btn-block text-left" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  {{selection.Tier}}
  <span class="caret pull-right"></span>
  </button>
  <ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownTier">
  <li ng-repeat="item in Tier" ng-class="(selection.Tier==item[0].qNum) ? 'active' : ''"><a ng-click="selectTier(item[0].qNum)">{{ item[0].qText }}</a></li>
  </ul>
  </div>

Like this

Then we select the first one so get the the data from the field "seriesName" as indicators for only that tier

$scope.selectTier = function (value) {
  $scope.selection['Tier'] = value;
  app.obj.app.field('Tier').selectValues([value], false, false)
  .then(function(){
  me.getIndicator();
  })
  }

me.getIndicator = function () {
  api.getHyperCubeQ(['IndicatorID','SeriesName'],[]).then(function(data3){
  $scope.SeriesName = _.filter(data3, function(obj3){
  return (obj3[1].qState!=='X' && obj3[1].qState!=='L')?true:false;
  });
  if (!$scope.SeriesName.length) {
  $scope.selectionDisplay.SeriesName = "No Data";
  $scope.selection.SeriesName = null;
  } else {
                        $scope.selectIndicator($scope.SeriesName[0][0].qNum, $scope.SeriesName[0][1].qText);
  }
  })
  }

and populate the indicator drop down

  <div class="dropdown" id="dropdownSeriesName">
  <label>Select Indicator:</label>
  <button class="btn btn-default dropdown-toggle btn-block text-left" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  {{ selectionDisplay.SeriesName }}
  <span class="caret pull-right"></span>
  </button>
  <ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownSeriesName">
  <li ng-repeat="item in SeriesName" ng-class="(selection.SeriesName===item[1].qText) ? 'active' : ''"><a ng-click="selectIndicator(item[0].qNum, item[1].qText)"> {{ item[0].qText }}-{{ item[1].qText }}</a></li>
  </ul>
  </div>

Like this

Last, select the indicator to get the final chart

The entire thing takes about 3 seconds to load but there is no delay to the common user because while the selections are made the object is loading and the canvas is drawn.

The Angular Service Api that I use for HyperCubes is here

capabilities-api-angular-template/api.js at master · yianni-ververis/capabilities-api-angular-templa...

URL: https://genderstats.un.org/#/indicators

Yianni