topic Re: PopOver not working in Widgets? in Integration, Extension & APIs

PopOver not working in Widgets?

Wed, 10 May 2017 08:48:25 GMT

I am trying to use a popover within a widget in Qliksense.

Neither the example from UI Overview | Leonardo‌ nor the examples from http://help.qlik.com/en-US/sense-developer/3.2/Subsystems/APIs/Content/leonardo-ui/leonardoui-sense-components.htm#anchor-4 ‌ are working for me.

The buttons appear but on clicking them nothing happens.

QlikSense Version is 3.2.

Are Popovers within widgets not working generally?
Or is there some special trick to get it working?

Thanks for your help!

Re: PopOver not working in Widgets?

Wed, 10 May 2017 12:07:40 GMT

Hi Sebastian,

Can you share the code of that widget?

Re: PopOver not working in Widgets?

Wed, 10 May 2017 12:20:01 GMT

It is exactly the same code as mentioned in the examples.

Example A:

<button class="lui-button  popover-trigger">Open popover (light)</button>
<div class="popover-content" style="display: none;">
  <div class="lui-popover" style="width: 400px;">
    <div class="lui-popover__header">
      <div class="lui-popover__title">Popover title</div>
    </div>
    <div class="lui-popover__body">
      Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
    </div>
    <div class="lui-popover__footer">
      <button class="lui-button  lui-popover__button">Cancel</button>
      <button class="lui-button  lui-popover__button  close-button">OK</button>
    </div>
  </div>
</div>

Example B:

<div>
  <div>
  <button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate">Open popover (trigger)</button>
  </div>
  <div>
  <button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate" x-variant="inverse">Open popover (trigger, inverse)</button>
  </div>
  <div>
  <button class="lui-button" ng-click="$ctrl.openPopover($event)">Open popover (service)</button>
  </div>
  <div>
  <button class="lui-button" ng-click="$ctrl.openPopover($event, 'inverse')">Open popover (service, inverse)</button>
  </div>
  <div>
  <button class="lui-button" ng-click="$ctrl.openToPosition($event)">Open popover (service, position to coordinate)</button>
  </div>
  <div>
  <button class="lui-button" ng-click="$ctrl.openCustom($event)">Open popover (service, custom positioning)</button>
  </div>
</div>

Re: PopOver not working in Widgets?

elva_lester — Wed, 04 Oct 2017 16:26:36 GMT

I'm not sure if you still need this, but I do have a popover extension working. I hope it helps.

Re: PopOver not working in Widgets?

Thu, 05 Oct 2017 06:39:56 GMT

thanks for your help, I also have a working extension with PopOvers. However, my question was about PopOvers in Widgets.

Re: PopOver not working in Widgets?

elva_lester — Thu, 05 Oct 2017 17:12:06 GMT

I actually got it working in Widgets first. All you have to do is copy the contents of the popover-template.html into the HTML window of the Widget editor. Then select an app and the popover should work.