0 Replies Latest reply: Oct 12, 2017 6:43 AM by Richard Bartley RSS

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

    Richard Bartley

      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.