Qlik SenseからJavaScriptへの変数を取得する

Question

私はJSで新しく、変更しようとしているQlik Senseのこの拡張があります。変数に応じていくつかのピンを指す必要があります。変数$ typeの値が 'A'ならば、値が 'B'であればいくつかのピンを使用します。しかし、私は本当にこの拡張機能がQSからどのように価値を得るのか分かりません。助けてください？

JSに従ってください：

require.config({ 
    paths: { 
    async: '/extensions/GoogleMaps-Sense/lib/async', 
    markerclusterer: '/extensions/GoogleMaps-Sense/lib/markerclusterer' 
    }, 
    shim: { 
    'markerclusterer': { 
     exports: 'MarkerClusterer' 
    } 
    } 
}); 

define(['qlik', './src/properties', './src/styles', 'markerclusterer', './src/abbreviateNumber', 'qvangular', 'async!https://maps.googleapis.com/maps/api/js?key=AIzaSyASz5bdD789VzsLyki1JCKhSnCd5pEPY3Q'], function(qlik, properties, styles, MarkerClusterer, abbreviateNumber, qv) { 
    var BASE_URL = '/extensions/GoogleMaps-Sense/'; 

    if (typeof(Number.prototype.toRad) === "undefined") { 
    Number.prototype.toRad = function() { 
     return this * Math.PI/180; 
    } 
    } 

    if (typeof(Number.prototype.toDeg) === "undefined") { 
    Number.prototype.toDeg = function() { 
     return this * 180/Math.PI; 
    } 
    } 

    return { 
    initialProperties: { 
     version: 1, 
     qHyperCubeDef: { 
     qSuppressZero: true, 
     qSuppressMissing: true 
     }, 
     gmaps: { 
     cluster: { 
      oneStyle: false, 
      maxZoom: 10 
     }, 
     map: { 
      mode: 'cluster', 
      customIcon: null, 
      iconUrl: '', 
      maxZoom: 18, 
      style: 'default' 
     } 
     } 
    }, 
    definition: properties, 
    snapshot: { 
     canTakeSnapshot: true 
    }, 
    paint: function($element, layout) { 

     $element.empty(); 

     this.backendApi.cacheCube.enabled = false; 
     var _this = this; 

     var markers = []; 
     var selectedMarkers = []; 

     var rectangles = []; 
     var selectedRects = []; 

     var columns = layout.qHyperCube.qSize.qcx; 
     var totalheight = layout.qHyperCube.qSize.qcy; 

     var pageheight = Math.floor(10000/columns); 
     var numberOfPages = Math.ceil(totalheight/pageheight); 

     var Promise = qv.getService('$q'); 

     var promises = Array.apply(null, Array(numberOfPages)).map(function(data, index) { 
     var page = { 
      qTop: (pageheight * index) + index, 
      qLeft: 0, 
      qWidth: columns, 
      qHeight: pageheight 
     }; 

     return this.backendApi.getData([page]); 

     }, this) 

     Promise.all(promises).then(function(data) { 
     render(data); 
     }); 

     function render(data) { 

     var useCustomStyle = layout.gmaps.map.style !== 'default'; 
     var hasMeasure = layout.qHyperCube.qMeasureInfo.length >= 1 ? true : false; 
     var hasPopup = layout.qHyperCube.qMeasureInfo.length === 2 ? true : false; 

     //The bounds object, used to determain which part of the map to show based on data 
     var bounds = new google.maps.LatLngBounds(); 

     var mapOptions = { 
      maxZoom: layout.gmaps.map.maxZoom, 
      panControl: true, 
      zoomControl: true, 
      overviewMapControl: false, 
      overviewMapControlOptions: { 
      opened: false 
      }, 
      scaleControl: false, 
      streetViewControl: true, 
      mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, 'map_style'] 
      } 
     }; 

     //Put the map on the page so give some visual feedback 
     var map = new google.maps.Map($element.get(0), mapOptions); 

     if (useCustomStyle) { 

      var selectedStyle = styles.filter(function(d) { 
      return d.key === layout.gmaps.map.style 
      }); 

      var styledMap = new google.maps.StyledMapType(selectedStyle[0].data, { 
      name: layout.gmaps.map.style 
      }); 

      map.mapTypes.set('map_style', styledMap); 
      map.setMapTypeId('map_style'); 

     }; 

     //Create a marker for each row of data 
     data.forEach(function(obj) { 
      obj[0].qMatrix.forEach(function(row, index) { 
      if (row[0].qText == '-') return; 

      //Parse the dimension 
      var latlng = JSON.parse(row[0].qText); 

      //Reverse the order as QS sends long lat 
      var point = new google.maps.LatLng(latlng[1], latlng[0]); 

      //Create our marker - if we have a expression then use that otherwise default to just show locations 
      var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
      var marker = new google.maps.Marker({ 
       position: point, 
       title: '', 
       icon: image, 
       customData: hasMeasure ? row[1].qText : 1, 
       qElem: row[0].qElemNumber 
      }); 

      //If we have popup values for each marker create the popup windows 
      if (hasPopup) { 

       marker.infoWindow = new google.maps.InfoWindow({ 
       content: row[2].qText 
       }); 

       google.maps.event.addListener(marker, 'mouseover', function() { 
       this.infoWindow.open(map, this); 
       }); 

       google.maps.event.addListener(marker, 'mouseout', function() { 
       this.infoWindow.close(); 
       }); 

      }; 

      //Add click handler 
      google.maps.event.addListener(marker, 'click', (function(value) { 
       return function() { 
       _this.selectValues(0, [value], true); 
       highlightMarkers(value) 
       } 
      })(row[0].qElemNumber)); 

      bounds.extend(point); 
      markers.push(marker); 

      }); 
     }); 

     //Fit map to bounds 
     map.fitBounds(bounds); 

     //Clustering enabled 
     if (layout.gmaps.map.mode === 'cluster') { 

      if (layout.gmaps.cluster.oneStyle) { 
      var clusterStyles = [{ 
       opt_textColor: 'black', 
       url: BASE_URL + 'images/singlecluster.png', 
       height: 56, 
       width: 55 
      }]; 
      }; 

      var mcOptions = { 
      imagePath: BASE_URL + 'images/m', 
      styles: clusterStyles, 
      maxZoom: layout.gmaps.cluster.maxZoom 
      }; 

      //Draw clusters onto map 
      var markerCluster = new MarkerClusterer(map, markers, mcOptions); 
      markerCluster.setCalculator(function(markers, clusterStyles) { 

      var index = 0, 
       count = markers.length, 
       total = count; 

      while (total !== 0) { 
       //Create a new total by dividing by a set number 
       total = parseInt(total/5, 10); 
       //Increase the index and move up to the next style 
       index++; 
      } 
      index = Math.min(index, clusterStyles); 

      var measure = 0; 
      for (var i = 0, k = count; i < k; i++) { 
       measure += parseInt(markers[i].customData) 
      } 
      var abbreviatedValue = abbreviateNumber(measure) 
      return { 
       text: abbreviatedValue, 
       index: index 
      }; 
      }); 

     }; 

     if (layout.gmaps.map.mode === 'marker') { 
      markers.forEach(function(d) { 
      d.setMap(map); 
      }) 
     }; 

     if (layout.gmaps.map.mode === 'boxes') { 


      markers.forEach(function(d) { 

      var distance = d.customData > 1 ? d.customData : 10; 
      var lat = d.position.lat(); 
      var lng = d.position.lng(); 
      var boxbounds = new google.maps.LatLngBounds(box(lat, lng, 225, distance), box(lat, lng, 45, distance)) 
      var rect = new google.maps.Rectangle({ 
       strokeColor: layout.gmaps.boxes.strokeFill, 
       strokeOpacity: +layout.gmaps.boxes.strokeOpacity, 
       strokeWeight: +layout.gmaps.boxes.strokeWeight, 
       fillColor: layout.gmaps.boxes.fillColor, 
       fillOpacity: +layout.gmaps.boxes.fillOpacity, 
       qElem: d.qElem, 
       map: map, 
       bounds: boxbounds 
      }); 

      //Add click handler 
      google.maps.event.addListener(rect, 'click', (function(value) { 
       return function() { 
       _this.selectValues(0, [value], true); 
       highlightRects(value) 
       } 
      })(d.qElem)); 

      rectangles.push(rect); 

      }) 

     }; 

     }; 

     //In selection mode - loop over markers to highlight markers scheduled for selection. 
     function highlightMarkers(qElem) { 
     var idx = selectedMarkers.indexOf(qElem); 
     if (idx > -1) { 
      selectedMarkers.splice(idx, 1) 
     } else { 
      selectedMarkers.push(qElem) 
     } 
     markers.forEach(function(marker) { 
      if (selectedMarkers.indexOf(marker.qElem) === -1) { 
      marker.setOpacity(0.5) 
      } else { 
      marker.setOpacity(1); 
      } 
     }); 
     }; 

     //In selection mode - loop over markers to highlight markers scheduled for selection. 
     function highlightRects(qElem) { 
     var idx = selectedRects.indexOf(qElem); 
     if (idx > -1) { 
      selectedRects.splice(idx, 1) 
     } else { 
      selectedRects.push(qElem) 
     } 
     rectangles.forEach(function(marker) { 
      if (selectedRects.indexOf(marker.qElem) === -1) { 
      marker.setOptions({ 
       fillOpacity: +layout.gmaps.boxes.fillOpacity/2, 
       strokeOpacity: +layout.gmaps.boxes.strokeOpacity/2 
      }) 
      } else { 
      marker.setOptions({ 
       fillOpacity: +layout.gmaps.boxes.fillOpacity, 
       strokeOpacity: +layout.gmaps.boxes.strokeOpacity 
      }) 
      } 
     }); 
     }; 

     function box(lat, lng, brng, dist) { 
     this._radius = 6371; 
     var dist = dist/this._radius; 
     var brng = brng.toRad(); 
     var lat1 = lat.toRad(); 
     var lon1 = lng.toRad(); 

     var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + 
      Math.cos(lat1) * Math.sin(dist) * 
      Math.cos(brng)); 

     var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) * 
      Math.cos(lat1), Math.cos(dist) - 
      Math.sin(lat1) * Math.sin(lat2)); 
     lon2 = (lon2 + 3 * Math.PI) % (2 * Math.PI) - Math.PI; 

     return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg()); 
     } 

    } 
    }; 
}); 

Answer 1

私はこれがhttps://github.com/stefanwalther/sense-extension-utils/blob/master/src/variable-utils.js

Answer 2

var app = qlik.currApp(); 
    //get the variable content 
    app.variable.getContent('MYVAR',function (reply){ 
    alert(JSON.stringify(reply)); 
}); 

ソースから撮影

/** 
* Retrieve the values of a list of variables. 
* 
* Since $q.all fails on the first error, we have to resolve all first 
* 
* @param {string[]} `varList` - The variable names. 
* @param {object} `app` - The (Qlik Sense) app. 
* 
* @returns {Promise} 
* 
* @api public 
*/ 
this.getEngineVarListValues = function (app, varList) { 

if (varList && Array.isArray(varList)) { 
    var promises = []; 
    varList.forEach(function (variable) { 
     promises.push(self.getEngineVarValue(app, variable)) 
    }); 
    return $q.all(promises); 
} 
return $q.reject(new Error('getEngineVarListValues variable list passed.')); 
}; 

役立つかもしれないと思う：http://help.qlik.com/en-US/sense-developer/June2017/Subsystems/APIs/Content/CapabilityAPIs/qlik-variable-interface.htm