Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

Announcements
Qlik Certification Exam Sale - 40% off. Register by June 30, 2020. GET DETAILS
Highlighted
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
Highlighted
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

View solution in original post

16 Replies
Highlighted
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

Highlighted
Valued Contributor

Re: Image sheet Navigation

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

Highlighted
Not applicable

Re: Image sheet Navigation

Thanks Reddy...         

Highlighted
Honored Contributor II

Re: Image sheet Navigation

Always Welcome!

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

}




Highlighted
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

Highlighted
Honored Contributor II

Re: Image sheet Navigation

Hi Sai Madhu,

I will create one for you as a demonstration.

Highlighted
Not applicable

Re: Image sheet Navigation

thank u very much

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