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.
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.
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 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. |
<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> |
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. |
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' }); }); }); |