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

Error rendering macro 'rw-search'

null

Versions Compared

Old Version 7

changes.mady.by.user user-3484a

Saved on

compared with

New Version 8

changes.mady.by.user Wendy R

Saved on

Key

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

...

Code Mode allows developers to customize or extend dashboards and presentations with unlimited functionality and design flexibility with the use of common coding languages. Code of all dashboard objects, dragged onto canvas in Visual Mode, is visible though this editor. Developers can enhance object functionality, customize it, and create their own UI objects and functionality from scratch here. Code Mode is also essential for editing certain code widgets, such as the Custom HTML widget, or Action Button functions.

Yellowfin also provides some tools and resources to create your own code widgets. Use Dashboard Code Mode to test parts of your widgets, and take a look at our page of additional resources for developers working with code widgets.

Bilateral Editor

Code Mode edits are instantly visible in Visual Mode, so any interactive functionality added through JavaScript, or any customizations made to widget properties through HTML, or to the overall canvas design through CSS, will all be automatically synchronized with the visual editor and made available on it. Similarly, any changes made on Visual Mode will be instantly reflected in Code Mode.

...

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


Info
titleNote

Yellowfin also provides some tools and resources to create your own code widgets. Use Dashboard Code Mode to test parts of your widgets, and take a look at our page of additional resources for developers working with code widgets.