Visualize: Ad Hoc View Filter Parameters

by Yuriy Bablyukh

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<a>Select data points to <b>drill-down</b> the view over time.</a><br><br>
<input id="backButton" name="goBack" type="button" value="< Back"/>

<div id="field" class="selected"></div>
<div id="measure" class="selected"></div>

<div id="firstContainer"></div>
<div id="secondContainer"></div>

CSS

.selected {
  display: inline;
  font-size: 1.3em;
  color: #3C1A06;
}

#field {
  margin-right: 20px;
}

#firstContainer {
  height: 350px;
  margin-bottom: 10px;
}

#backButton {
  display:none;
  outline: none;
  position: relative;
  float: right;
  top: -10px;
  margin-right: 10px;
  margin-bottom: 5px;
  font-size: 1.15em;
  border: 1px solid #524236;
  border-radius: 20px;
  background-color: #E8E6DF;
  color: #3C1A06;
}

JavaScript

var firstView = "/public/viz/Adhoc/Store_Sales3";

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser"
  }
}, function(v) {
  function renderView() {
    $("#backButton").hide();
    first = v.adhocView({
      resource: firstView,
      container: "#firstContainer",
      linkOptions: {
        events: {
          click: function(ev, data, defaultHandler, extendedData) {
            console.log(data);
            var measureSelected = data.Measures;
            var categorySelected = data.product_category;
            $("#field").html("<span>Field: <b>" + data.product_category + "</b></span>")

            updateView(measureSelected, categorySelected)
          }
        }
      },
      beforeRender: function(elemToLinkPairs, test) {
        consoleDiv.log("Before Render", elemToLinkPairs);

        elemToLinkPairs.forEach(function(pair) {
          if (pair.element != "undefined" && pair.element !== null) {
            pair.element.style.textDecoration = "underline";
            pair.element.style.cursor = "pointer";
          }
        });
      },
      success: function() {
        console.log("Available filters")
        console.log(first.data().metadata.inputParameters);
      },
      error: function(e) {
        console.log(e);
      }
    });
  }

  renderView()

  function updateView(measure, category) {
    var showCostView = "/public/viz/Adhoc/Store_Cost4";
    var showSalesView = "/public/viz/Adhoc/Store_Sales4";

    $("#backButton").show();
    if (measure[0] === "store_cost") {

      $("#measure").html("<span>Measure: <b>Store Cost</b></span>")
      var costView = v.adhocView({
        resource: showCostView,
        container: "#firstContainer",
        params: {
          product_category_1: [category]
        },
        error: function(e) {
          console.log(e);
        }
      });

    } else {
      $("#measure").html("<span>Measure: <b>Store Sales</b></span>")
      var salesView = v.adhocView({
        resource:...