Change specific stream icons (with adding RequireJS and jQuery to hub)

[sirpod90]

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

[sirpod90 · Accepted solution]

For everybody who like to do the same, here is my solution:

• Create following subfolder: "C:\Program Files\Qlik\Sense\Client\hub\external\jquery"
• Copy "jquery.min.js" to the created folder
• Edit "C:\Program Files\Qlik\Sense\Client\hub.html"
  • Add following code

<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>

• Restart all services for changes to take effect 

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