Like what you see? Have a play with our trial version.

Error rendering macro 'rw-search'

null

Versions Compared

Old Version 2

changes.mady.by.user user-3484a

Saved on

compared with

New Version 3

changes.mady.by.user user-3484a

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

For this we will add two action links to one side. Each link will display a different chart. When the user clicks on the other link, the chart will change.


Tutorial

For non-developer audience, here’s how to create this functionality by yourself:

  1. Add a canvas tab to your dashboard.
  2. Open the reports panel and drag 2 reports onto the canvas. 
  3. Layer them on top of one another. You can use the report properties panel to make them of the exact same size, and position them at the same location. (This way the reports will switch at the exact same location when the user interacts with the dashboard.)
  4. Rename the first report you wish to display to ‘Report 1’, and the other to ‘Report 2’.
  5. Switch to Code Mode. You will be able to see the relevant code for both reports in the HTML section already.

  6. Copy and paste the following code snippet into the HTML editor (right before the closing </canvas-area> tag). You do not need to change the widget-uuid of any objects, Yellowfin will automatically change that upon pasting into the editor.

    [This code snippet essentially displays a heading, and two “action links” to display the reports.]

    Code Block
    languagexml
    
<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="d14afcb3-7466-403f-934e-cbd69f985da2">
    <report-output widget-uuid="b71ce67b-85a7-4a13-bfe7-5886e59390dd" report-uuid="02fd254f-cceb-4828-8a97-595e4446ddb7" height="400" top="15" left="265" name="Report 1" width="400" display-type="CHART" chart-uuid="94dcf460-87e6-4a29-8aac-72685417d7d7" style="z-index: 4"></report-output>
    <report-output widget-uuid="eb19e17a-9f6b-49bc-9da5-0be429f26628" report-uuid="d4d185cc-d4ee-4373-b09f-ff307b4b3890" height="400" top="32" left="265" name="Report 2" width="400" display-type="CHART" chart-uuid="9b732c6a-0f22-47f5-a332-3c1f45158197" style="z-index: 3"></report-output>
    <text-title widget-uuid="59bee07d94aec2dc-e3541477-486b4eb3-a395af8e-0dbbc6886a7b1651741e1bb8" width="202" height="34" left="4132" top="17015" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 4" name="Title"><b xmlns="http://www.w3.org/1999/xhtml"><font color="#009eec">Change reports<Reports</font></b>
 < </text-title>
 <text <text-simple class="link" name="Link 1" widget-uuid="0b286f5f3a126af7-6dce5f53-46c244e0-b7a4b17f-d2832b035c29b09a37d8e51f" width="102125" height="2928" left="4130" top="214101" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 5">See Report 1</text-simple>
<text-simple class="link" name="Link 2" widget-uuid="7a6f61b3454ddce8-fd46f9af-49524134-9ee9b2b3-dbe2efd1b622bea6baee887b" width="108129" height="3625" left="4130" top="243129" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 7">See Report 2</text-simple>
</canvas-area>



  7. You may switch back to visual mode to see the effects of the code snippet that shows a heading and 2 links/text.

  8. Back in Code Mode, navigate to the JavaScript section, and copy the following code segment there:

    [This code defines a function in which Link 1 will display Report 1, and Link 2 shows Report 2.]

    Code Block
    languagejs
    
let link1 = this.apis.canvas.select('Link 1');
let link2 = this.apis.canvas.select('Link 2');
  
let report1 = this.apis.canvas.select('Report 1');
let report2 = this.apis.canvas.select('Report 2');


$(report2).css({ display: 'none' });
 
/* Use external libraries and custom scripts */
 
requirejs(['jquery'], function($) {
	    link1.addEventListener('click', (e) => {
    	        $(report1).css({ display: 'initial' });
    	        $(report2).css({ display: 'none' });
	    });
	    link2.addEventListener('click', (e) => {
    	        $(report1).css({ display: 'none' });
    	        $(report2).css({ display: 'initial' });
	    });
});



  9. Now preview your code to test it. Click on the More button on top of the dashboard editor and select Enter Preview Mode.
  10. You will see the dashboard you designed with only the first report displayed. Click on ‘See Report 2’, to see the report change, and vice versa.

...