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

sirpod90 — Sat, 16 Nov 2024 07:12:01 GMT

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

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

sirpod90 — Wed, 09 Jan 2019 08:30:53 GMT

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

topic Re: Change specific stream icons (with adding RequireJS and jQuery to hub) in App Development

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

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