Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hello everybody,
we have quit a few of streams and for a better overview I would like to mark specific streams with an other icon in the hub.
My plan was to change the style class to a different LUIicon with a line of code of jQuery and find replace statement.
But the problem is QlikSense does not use jQuery in the hub. I tried to modify require.config in the hub.html to load jQuery as well, but the than the hub returns an error and does not load, or it ignores the line of code from jQuery.
hub.html
<script>require.config( {baseUrl: "../resources", urlArgs: "1234567890123"} )( ["hub/hub", "hub/external/jquery/jquery"] );</script>
$( document ).ready(function() {
console.log( "start jQuery" );
$( "i" ).find( "span.lui-icon--stream:contains('TEXT')" ).css( "color", "red" );
});
How can I get jQuery work with reqierjs?
Is there an other solution to this problem?
Thanks & regards
Tobias
For everybody who like to do the same, here is my solution:
<script src="../resources/hub/external/jquery/jquery.min.js"></script> <script> var $j = jQuery.noConflict(); var checkExist = setInterval(function() { if ($j( "i.lui-icon--stream" ).length) { console.log("Exists!"); $j("span.lui-list__text:contains('STRING_TO_FIND')").parent().find( "i.lui-icon--stream" ).removeClass( "lui-icon--stream" ).addClass( "lui-icon--stream-mystyle" ); clearInterval(checkExist); } }, 100); </script>
In my example I search for all Stream containing "STRING_TO_FIND" and remove the original CSS-class "lui-icon--stream" and add my custom class (defined in "C:\Program Files\Qlik\Sense\Client\hub\external\leonardo-ui.css")
Furthermore I had to include the jQuery code into a "setInterval" function to wait for the elements to get rendered before manipulating them.
Any comments and suggestions to this solution are welcome 🙂
Regards Tobias
For everybody who like to do the same, here is my solution:
<script src="../resources/hub/external/jquery/jquery.min.js"></script> <script> var $j = jQuery.noConflict(); var checkExist = setInterval(function() { if ($j( "i.lui-icon--stream" ).length) { console.log("Exists!"); $j("span.lui-list__text:contains('STRING_TO_FIND')").parent().find( "i.lui-icon--stream" ).removeClass( "lui-icon--stream" ).addClass( "lui-icon--stream-mystyle" ); clearInterval(checkExist); } }, 100); </script>
In my example I search for all Stream containing "STRING_TO_FIND" and remove the original CSS-class "lui-icon--stream" and add my custom class (defined in "C:\Program Files\Qlik\Sense\Client\hub\external\leonardo-ui.css")
Furthermore I had to include the jQuery code into a "setInterval" function to wait for the elements to get rendered before manipulating them.
Any comments and suggestions to this solution are welcome 🙂
Regards Tobias