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

Versions Compared

Old Version 10

changes.mady.by.user Wendy R

Saved on

compared with

New Version Current

changes.mady.by.user Wendy R

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated the code example with temporary workaround.

...

Section


Column



Column


Number

Description

1

Use these buttons to switch between the Code Mode or Visual Mode. 

2

This code editor allows you to write or edit dashboard code.

3

This button navigates to you to the HTML section of the code editor.

4

This button navigates to you to the JavaScript section of the code editor.

5

This button navigates to you to the CSS section of the code editor.

6

This list of objects shows all dashboard objects added to the canvas. Learn more. 





...

Anchor
codeobjectlist
codeobjectlist

...

  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 publish-uuid of any objects: Yellowfin will automatically change that upon pasting into the editor.

    Note

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


    Code Block
    languagexml
    <text-title publish-uuid="59bee07d-e354-486b-a395-0dbbc6886a7b" width="202" height="34" left="41" top="170" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 4"><b xmlns="http://www.w3.org/1999/xhtml"><font color="#009eec">Code Mode Demo</font></b>
 </text-title>
 <text-simple class="link" name="Link 1" publish-uuid="0b286f5f-6dce-46c2-b7a4-d2832b035c29" width="102" height="29" left="41" top="214" 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" publish-uuid="7a6f61b3-fd46-4952-9ee9-dbe2efd1b622" width="108" height="36" left="41" top="243" line-spacing="normal" character-spacing="0" rotation="0" opacity="100" style="z-index: 7">See Report 2</text-simple>



  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:

    Note

    This code defines a function in which Link 1 will display Report 1, and Link 2 shows Report 2. In the example below, you can see that the publish-uuid value can be used directly.


    Code Block
    languagejs
    
let link1 = this.apis.canvas.select('Link 1');
let link2 = this.apis.canvas.select('7a6f61b3-fd46-4952-9ee9-dbe2efd1b622');
  
let report1 = this.apis.canvas.select('Report 1');
let report2 = this.apis.canvas.select('Report 2');
 
 
$(report2).css({ displayvisibility: 'nonehidden' });
 
/* Use external libraries and custom scripts */
 
requirejs(['jquery'], function($) {
    link1.addEventListener('click', (e) => {
        $(report1).css({ displayvisibility: 'initialvisible' });
        $(report2).css({ displayvisibility: 'nonehidden' });
    });
    link2.addEventListener('click', (e) => {
        $(report1).css({ displayvisibility: 'nonehidden' });
        $(report2).css({ displayvisibility: 'initialvisible' });
    });
});



  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.

...