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

Error rendering macro 'rw-search'

null

Versions Compared

Old Version 8

changes.mady.by.user Wendy R

Saved on

compared with

New Version 9

changes.mady.by.user Wendy R

Saved on

Key

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

...

  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.

    Note

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


    Code Block
    languagexml
    <text-title widget-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" widget-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" widget-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.


    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.

...

titleNote

...


Create your own widget

Yellowfin gives you full freedom to implement your own widget, with our JS API providing the tools that developers need to extend the functionality of Yellowfin to suit individual business needs. These can be added to the dashboard by importing them through the plugin manager. They will then appear in the list of code widgets for selection during the dashboard building process. Take a look at the guide to creating a code widget for further information and resources.