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.
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.
Note that the code editor supports auto-saving, so users do not have to manually save any code changes.
Notes:
The diagram below explains the features of Code Mode.
|
The object list on the left side displays all objects added to the dashboard. You can perform the following actions using this list:
Users get alerted to errors or mistakes in code with an error icon, as shown below.
This section includes an example of a simple dashboard functionality using Code Mode. It includes code snippets that you may also use for yourself in your dashboard.
Scope: to create a report selector on a dashboard canvas that changes a chart based on the user’s selection.
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.
As of Yellowfin 9.5, a widget's UUID has been renamed. The new publish-uuid provides a persistent identifier across dashboard edits and versions. After upgrading to Yellowfin 9.5 or later and upon editing a dashboard, any old UUIDs — widget-uuid — will be automatically updated to pubish-uuid. If a dashboard is not edited, the older widget-uuid will remain functional.
This page has been updated to reflect the updated UUID, publish-uuid. For Yellowfin users on older versions, we recommend you upgrade, or use the name attribute in place of publish-uuid in the interim. |
For non-developer audience, here’s how to create this functionality by yourself:
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.
This code snippet essentially displays a heading, and two “action links” to display the reports. |
<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> |
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. In the example below, you can see that the publish-uuid value can be used directly. |
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({ visibility: 'hidden' }); /* Use external libraries and custom scripts */ requirejs(['jquery'], function($) { link1.addEventListener('click', (e) => { $(report1).css({ visibility: 'visible' }); $(report2).css({ visibility: 'hidden' }); }); link2.addEventListener('click', (e) => { $(report1).css({ visibility: 'hidden' }); $(report2).css({ visibility: 'visible' }); }); }); |
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.