Qlik Community

Ask a Question

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Support Cases coming to Qlik Community Oct. 4! Start chats, open cases, explore resources: READ DETAILS
cancel
Showing results for 
Search instead for 
Did you mean: 
rbartley
Specialist
Specialist

In Qlik Sense Mashup calculation condition message sometimes displayed as i (information) icon

Dear all,

I have built a mashup page which includes a filter panel, two charts and two buttons which control which chart should be displayed (by using the bootstrap tab functionality).  The charts have a calculation condition to ensure that the chart displays a message if the minimum selections have not been made.  The first chart, which is set as active when the page is loaded (class="tab-pane active......" ) displays the full message, but when I switch between the charts, an icon is displayed instead, which shows the message when clicked on.  When I inspect the element, I cannot see any difference in the code generated by Qlik, so I'm not sure what is going on here.  Also if I make both charts active on load (again set both tab panels to class="tab-pane active......"), the message is displayed rather than the icon.  I would like to always see the message and never the icon.  Any ideas?

<!-- main section -->

<div id="modalWrapper" >

  <div  id="main" role="main" >

  <a id='butClose' class="closeButtonA" href='javascript:top.history.back();' target='_parent' onclick='closeChart();'><i  id='butClose'  class='closeButton fa fa-times-circle-o fa-5' title='Close chart window to return to previous page'></i></a>

  <div id="nonchartDiv">

  <div id="buttonDiv" class="container-fluid" >

  <div class="toolBarDiv  no-print row" data-toggle="buttons" >

  <ul class="btn-group paddedtopDiv col-md-5 col-sm-12 col-xs-12" role="tablist" data-toggle="buttons">

  <li role="presentation" class="btn btn-default  actionButton  active">

  <a href="#tabComparison" role="tab" class="actionButton" data-toggle="tab">Period Comparison</a>

  </li>

  <li role="presentation" class="btn btn-default  actionButton">

  <a href="#tabAllPeriods" class="actionButton" role="tab" data-toggle="tab">All Periods</a>

  </li>

  </ul>

  </div>

  </div>

<!-- filter panel -->

  <div class="container-fluid">

  <div id="toolbarDiv " class="row solid filterpanelDiv" >

  <div id="divFilter" >

  <div  class="qv-layout-small filter filterpanelDiv col-md-8 col-sm-12 col-xs-12 qvobject" id="filterPrice">

  </div>

  </div>

  </div>

  </div>

  </div>

<!--end of nonchartDiv-->

<!-- charts -->

  <div id="divChartContainer" class="chartContainer container-fluid" >

  <div role="tabpanel" id="tabCharts" class="tab-content  chart row solid">

  <div role="tabpanel" id="tabComparison" class="tab-pane active chart row solid">

  <div class="dataportalChart col-md-12 col-sm-12 col-xs-12 qvobject "   id="lineYearComparison">

  </div>

  </div>

  <div role="tabpanel" id="tabAllPeriods" class="tab-pane chart row solid">

  <div class="dataportalChart col-md-12 col-sm-12 col-xs-12 qvobject "   id="lineEvolution">

  </div>

  </div>

  </div>

  </div>

  </div>

</div>

Below is the view when the page is loaded (OK)

Warning message - OK.PNG

Chart code generated by Qlik:

<div class="qv-object-content ng-isolate-scope" qv-object-content="" component="object.content" options="options" object="object" backend-api="object.backendApi" layout="layout" ext="object.ext" selections-api="object.selectionsApi" tooltip-api="object.tooltipApi" throbber-api="object.throbberApi" on-init="onInit"><div qv-errorhandler="" class="object-error ng-scope soft-error" ng-class="error.class" tid="object.Error">

  <div class="object-error-content">

  <div class="object-error-title">

  <span class="ng-binding"></span>

  <i class="object-error-more icon-info" qva-activate="showMore($event)"></i>

  </div>

  <!-- ngIf: error.message --><div ng-if="error.message" class="object-error-message ng-binding ng-scope">Please select at least one Product Group plus one Market/Stage and one  Year</div><!-- end ngIf: error.message -->

  </div>

</div>

</div>

And now, when I select the second button (Not OK)

Warning message - NOK.PNG

Chart code generated by Qlik:

<div class="qv-object-content ng-isolate-scope" qv-object-content="" component="object.content" options="options" object="object" backend-api="object.backendApi" layout="layout" ext="object.ext" selections-api="object.selectionsApi" tooltip-api="object.tooltipApi" throbber-api="object.throbberApi" on-init="onInit"><div qv-errorhandler="" class="object-error ng-scope soft-error" ng-class="error.class" tid="object.Error">

  <div class="object-error-content">

  <div class="object-error-title">

  <span class="ng-binding"></span>

  <i class="object-error-more icon-info" qva-activate="showMore($event)"></i>

  </div>

  <!-- ngIf: error.message --><div ng-if="error.message" class="object-error-message ng-binding ng-scope">Please select at least one Product Group and one Market/Stage</div><!-- end ngIf: error.message -->

  </div>

</div>

</div>

I have found that I can force the message to be displayed and the information icon to be hidden by overriding the css display settings:

.object-error-message

{

display:block!important;

}

.icon-info

{

display:none!important;

}

But I would prefer not to do so if there is another option.  I assume that there is.

0 Replies