https://community.qlik.com/t5/Integration-Extension-APIs/How-to-use-leonardoui-popover-in-extension/m-p/1688694#M12558 <P>I want to use code similar to the example that I found on the github page&nbsp;(<A href="https://qlik-oss.github.io/leonardo-ui/popover.html" target="_blank">https://qlik-oss.github.io/leonardo-ui/popover.html</A>)&nbsp;but I get an error on leonardoui.popover() that it is undefined which I think means I need to reference the library.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ex2.png" style="width: 999px;"><img src="https://community.qlik.com/t5/image/serverpage/image-id/30797iD97DD6838320832A/image-size/large?v=v2&amp;px=999" role="button" title="ex2.png" alt="ex2.png" /></span></P><P>I tried adding it to the define section of my code hoping that it would be a global object similar to ‘qlik’, but that did not work.</P><LI-CODE lang="javascript">define( [ "qlik","leonardoui","jquery","./script","./properties","./helper","text!./style.css" ], function ( qlik,leonardoui,$,script,props,utils,cssContent) {</LI-CODE><P>&nbsp;</P><P>So..do I have to download the entire leonardoui package from github and bundle it with every extension that I want to be able to use the leonardoui methods or is there a way to reference a global version of leonardoui that presumably runs within Qliksense by default?</P><P>&nbsp;</P><P>Example From Documentation that I am trying to replicate:&nbsp;(<A href="https://qlik-oss.github.io/leonardo-ui/popover.html" target="_blank">https://qlik-oss.github.io/leonardo-ui/popover.html</A>)</P><LI-CODE lang="javascript">var popoverTriggers = document.querySelectorAll( ".example-box .popover-trigger" ); popoverTriggers = [].slice.apply( popoverTriggers ); // convert to array popoverTriggers.forEach( function ( element, idx ) { element.addEventListener( "click", function() { var popover = leonardoui.popover( { content: element.nextElementSibling.innerHTML, closeOnEscape: true, dock: idx === 0 ? "bottom" : "right", alignTo: element } ); // Popover was shown var closeButton = popover.element.querySelectorAll( ".close-button" )[0]; closeButton.addEventListener( "click", function() { popover.close(); } ); } ); } );</LI-CODE><P>&nbsp;</P> Sat, 16 Nov 2024 02:51:17 GMT devan9876 2024-11-16T02:51:17Z https://community.qlik.com/t5/Integration-Extension-APIs/How-to-use-leonardoui-popover-in-extension/m-p/1688694#M12558 <P>I want to use code similar to the example that I found on the github page&nbsp;(<A href="https://qlik-oss.github.io/leonardo-ui/popover.html" target="_blank">https://qlik-oss.github.io/leonardo-ui/popover.html</A>)&nbsp;but I get an error on leonardoui.popover() that it is undefined which I think means I need to reference the library.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ex2.png" style="width: 999px;"><img src="https://community.qlik.com/t5/image/serverpage/image-id/30797iD97DD6838320832A/image-size/large?v=v2&amp;px=999" role="button" title="ex2.png" alt="ex2.png" /></span></P><P>I tried adding it to the define section of my code hoping that it would be a global object similar to ‘qlik’, but that did not work.</P><LI-CODE lang="javascript">define( [ "qlik","leonardoui","jquery","./script","./properties","./helper","text!./style.css" ], function ( qlik,leonardoui,$,script,props,utils,cssContent) {</LI-CODE><P>&nbsp;</P><P>So..do I have to download the entire leonardoui package from github and bundle it with every extension that I want to be able to use the leonardoui methods or is there a way to reference a global version of leonardoui that presumably runs within Qliksense by default?</P><P>&nbsp;</P><P>Example From Documentation that I am trying to replicate:&nbsp;(<A href="https://qlik-oss.github.io/leonardo-ui/popover.html" target="_blank">https://qlik-oss.github.io/leonardo-ui/popover.html</A>)</P><LI-CODE lang="javascript">var popoverTriggers = document.querySelectorAll( ".example-box .popover-trigger" ); popoverTriggers = [].slice.apply( popoverTriggers ); // convert to array popoverTriggers.forEach( function ( element, idx ) { element.addEventListener( "click", function() { var popover = leonardoui.popover( { content: element.nextElementSibling.innerHTML, closeOnEscape: true, dock: idx === 0 ? "bottom" : "right", alignTo: element } ); // Popover was shown var closeButton = popover.element.querySelectorAll( ".close-button" )[0]; closeButton.addEventListener( "click", function() { popover.close(); } ); } ); } );</LI-CODE><P>&nbsp;</P> Sat, 16 Nov 2024 02:51:17 GMT https://community.qlik.com/t5/Integration-Extension-APIs/How-to-use-leonardoui-popover-in-extension/m-p/1688694#M12558 devan9876 2024-11-16T02:51:17Z