Visualize: customized input controls in dashboard

customized input controls

by Yuriy Bablyukh

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>
<p>Date:
  <input type="text" id="datepicker">
</p>
<div id="filters"></div>
<div id="container"></div>

CSS

#container .jr-mInput.jr-mInputControlSingleValueText,
#container .jr-mInput.jr-mInputControlSingleValueNumber,
#container .jr-mInput.jr-mInputControlSingleValueDate,
#container .jr-mInput.jr-mInputControlSingleValueDatetime,
#container .jr-mInput.jr-mInputControlSingleValueTime
{
  color: #32a20a;
  font-size:14px;
  font-weight: bold;
}
#container .jr-mInput-alert{
      background-color: #f3ecec;
      color:#b73737;
      font-size:11px;
      font-weight: normal;
}

#container .jr-mInput .jr-mInput-label{
  color: #1a6f00;  
}

.jr-mInput.jr-mInputControlMultiSelectCheckbox .jr-mInput-check-label.jr,
.jr-mInput.jr-mInputControlSingleSelectRadio .jr-mInput-radio-label.jr,
.jr-mInput.jr-mInputControlBoolean .jr-mInput-boolean-label.jr {
  color: #218c00;
}



.jr-mInput.jr-mInputControlMultiSelectCheckbox .jr-mInput-check.jr,
.jr-mInput.jr-mInputControlSingleSelectRadio .jr-mInput-radio.jr {
  padding: 0.4em;
}

.jr-mInput.jr-mInputControlMultiSelectCheckbox .jr-mInput-check.jr:hover,
.jr-mInput.jr-mInputControlSingleSelectRadio .jr-mInput-radio.jr:hover {
  background-color: #bbe8c0;
}

.jr-mInput.jr-mInputControlSingleSelectRadio.jr-isDisabled .jr-mInput-radio.jr:hover,
.jr-mInput.jr-mInputControlMultiSelectCheckbox.jr-isDisabled .jr-mInput-check.jr:hover {
  background-color: white;
}

#container .jr .ui-state-default,
.jr .ui-widget-content .ui-state-default,
.jr .ui-widget-header .ui-state-default {
  background: #0087f5;
}

#container .jr-mMultiselect-toggle-label.jr {
  color: #000000;
  font-weight: 600;
}

#filters .jr-mSelectlist-item.jr {
  color: #218c00;
  background-color: inherit;
}

#container .jr-mSelectlist-item.jr :hover,.jr-mSingleselect-dropdown .jr-mSelectlist-item.jr:hover, .jr-mSingleselect-dropdown .jr-mSelectlist-item.jr-isSelected.jr {
  color: #21610d;
  background-color: #bbe8c0;
}


#container .jr-mSelectlist-item.jr.jr-isSelected{
  color: #21610d;
  background-color: #89e693;
}


#container .jr-mSingleselect-input.jr,...

JavaScript

$(function() {
   $("#datepicker").datepicker();
 });

 var reportUri = "/public/Samples/Dashboards/2._Performance_Summary_Dashboard";

 visualize({
   auth: {
     name: "superuser",
     password: "superuser"
   }
 }, function(v) {
   var inputControls = v.dashboard({
     container: "#container",
     resource: reportUri
   });



 });