Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

Not applicable

Image sheet Navigation

Hi All..... This is the code for getting the image on the sheet it i click the image-button the alert is coming but when i use the id it wont go to the next sheet 

$element.append('<img src="/extensions/panelLayout/images/Dashboard.png" onclick = alert("Hi") />');

Tags (1)
1 Solution

Accepted Solutions
reddys310
Honored Contributor II

Re: Image sheet Navigation

Hi Sai Madhu,

Even while using an image instead of a button or a div, the code and logic remains the same. Make use of the same Jquery function to navigate to the sheet you need. if you use the URL you are hard coding the to which sheet you are navigating. What if you happen to add a new sheet? Then your code will not work as it is not dynamic. So the kindly follow the way I have done in my extension to achieve what you need.

Best Regards,

Sangram Reddy

16 Replies
reddys310
Honored Contributor II

Re: Image sheet Navigation

Hi Sai Madhu,

2 ways to do it

Use this :


1st way: I would not do it this way, but its possible!

$element.append('<a href="URL to Move to"><img src="Image source" width="100" height="132" ismap></a>');

So here, try setting the href of <a> tag dynamically based on the properties pannel.

2nd way: I think this is the best way

$element.append('<img src="/extensions/panelLayout/images/Dashboard.png" onclick = "navigate(SheetID)" />');


function navigate(id){

// code here to navigate to the sheet needed.

}

Hope this helps!

- Sangram Reddy

paul_scotchford
Valued Contributor

Re: Image sheet Navigation

You can also use the sheet navigation extension found in Qlik Branch

Not applicable

Re: Image sheet Navigation

Thanks Reddy...         

reddys310
Honored Contributor II

Re: Image sheet Navigation

Always Welcome!

Not applicable

Re: Image sheet Navigation

Hi reddy i was tried below the code its not working

$element.append('<img src="/extensions/clips/images/sheet1.png" onclick = "navigate(SheetID)" />');

function navigate(id){

// code here to navigate to the sheet needed.

}




Not applicable

Re: Image sheet Navigation

hi reddy,

image will be displayed on the Sheet but When i click the image button it wont navigate the another sheet

reddys310
Honored Contributor II

Re: Image sheet Navigation

Hi Sai Madhu,

I will create one for you as a demonstration.

Not applicable

Re: Image sheet Navigation

thank u very much

reddys310
Honored Contributor II

Re: Image sheet Navigation

Hi Sai Madhu,

So here it is. I have created a sample navigation extension for you to refer to. This will help you build your extension.

I have placed this on sheet 4 of the app and can be used to navigate to next sheet, previous sheet or any other sheet based on its ID. I haven't created any customizing properties but you can add some for example : for a button you could have an input field to navigate to any sheet or URL, change text dynamically, change colors , layout options and stuff. As this is a sample I haven't spent enough time to do all of these.

Capture.PNG

Also, I have attached the zipped file of the extension for you to refer to. So Work away.

Hope this helps solve your issue.

- Sangram Reddy.

Community Browser