Code Mode can be used on Canvas dashboards to enhance the capabilities of that dashboard.
The “Code Editor” role function needs to be enabled, this can be found under “Dashboard” in the role settings page.
As well as turning on the role function, the “Dashboard Code Mode” option needs to be turned on in the Admin Console. This can be found at Administration -> Configuration -> System -> Security.
If this setting is turned off while you have a Code Mode dashboard, the Code Mode dashboard will no longer run.
Once Code Mode has been enabled and you edit a dashboard, you will see this toggle in the dashboard toolbar:
Clicking on “Code” will take you to Code Mode.
When switching into Code Mode, you will see 3 tabs: the HTML, JS and CSS tabs.
The HTML tab shows the current canvas tab represented in HTML. Each item on a canvas has a corresponding HTML tag.
The following canvas has two elements on it — a report and a rectangle used as a border:
The HTML for this canvas is as follows:
<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="aee7c574-3ad3-4ac0-a366-7810861d91eb"> |
Any changes that are made to the attributes of these tags in the HTML tab will be synchronized to the Canvas visual editor. If you remove the chart-uuid attribute and change display-type to “REPORT”, this will be updated in the visual editor.
From Yellowfin 9.5, publish-uuid replaces the older widget-uuid. This page has been updated to reflect the updated UUID. For Yellowfin users on older versions, we recommend you upgrade, or use the name attribute in place of publish-uuid in the interim. |
<report-output publish-uuid="ffe09245-8739-416c-b039-05fff6427242" report-uuid="c83357db-8aef-4ec7-ab72-fce34de9ee77" height="475" top="46" left="54" name="Agency Benchmark" width="897" display-type="REPORT" on-click="none" style="z-index: 3;"></report-output> |
From Yellowfin 9.5, publish-uuid replaces the older widget-uuid. This page has been updated to reflect the updated UUID. For Yellowfin users on older versions, we recommend you upgrade, or use the name attribute in place of publish-uuid in the interim. |
While many of the elements that can be added to a canvas will have different attributes, they will all share the following attributes.
Initial width of the widget in pixels.
Initial height of the widget in pixels.
Initial left position of the widget in pixels.
Initial top position of the widget in pixels.
Name of the widget, this can be used as an identifier to easily select the widget from the DOM.
Unique ID for the widget. This can be used for selecting items from the canvas.
Unique ID for the widget. This should not be used for selecting items from the canvas. We recommend using the name attribute in place of widget-uuid if you’re using an earlier version of Yellowfin 9.
The JS tab allows you to write JavaScript that will be executed when a user navigates to your tab. When you first navigate to this tab, it will contain the following code:
// Declare variables or insert code here |
This function is called when a SubTab is rendered on the page and will be called every time the SubTab becomes visible again. This is a good spot to add any event listeners to the page that you might require.
This can be added to the Code Mode object by using:
this.onRender = function() { //Your logic here } |
This is called when the SubTab is removed from the page, this will happen when a user navigates to a different tab.
This method should be used for removing any event listeners or objects that you don’t wish to persist when moving to a new tab.
let subTabAPI = this.apis.subtab; |
The “this” object will contain an “apis” parameter. This object will contain the following objects:
These can then be retrieved like so:
this.apis.canvas; |
One of the main advantages of using Code Mode is you can access the Reports APIs, however the ReportAPIs are not passed as part of the this.apis object as they are loaded dynamically as required. Once a report is going to be rendered the Dashboard will create its Report API.
If you are attempting to fetch the ReportAPI for a report that is visible on the current SubTab, you can use the CanvasAPI select or selectAll functions to select the report element on the page and retrieve the API from there. The select and selectAll are functions that will create a selector to be passed into the canvas elements querySelector and querySelectorAll functions.
In this example, we’ve given our report the name “report_1”. We can now use the canvasAPI select function to select that element, and then get the reportAPI from it.
let reportElement = this.apis.canvas.select('report_1'); |
The second approach is using a dashboard getAllReports() or getReportsForSubTab() combined with the dashboard.loadReport() function. This is outlined in the DashboardAPI.
You can update an element's HTML attributes from your code in the JS tab, however these changes will not be saved to the database like changing them in the HTML tab would. It will however cause that element to update.
The CSS tab contains any styling that you wish to apply to your SubTab. Any CSS applied here will have no effect on the rest of the page. When a user navigates away from the SubTab, this CSS will be removed from the page.
This example takes a report that is on the dashboard and toggles its visualisation every 5 seconds.
<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="aee7c574-3ad3-4ac0-a366-7810861d91eb"> |
From Yellowfin 9.5, publish-uuid replaces the older widget-uuid. This page has been updated to reflect the updated UUID. For Yellowfin users on older versions, we recommend you upgrade, or use the name attribute in place of publish-uuid in the interim. |
this.onRender = function () { |
<canvas-area xmlns="http://www.w3.org/1999/xhtml" canvas-uuid="a4c909fb-70d1-44f1-a95a-17a0eada6bf6"> |
From Yellowfin 9.5, publish-uuid replaces the older widget-uuid. This page has been updated to reflect the updated UUID. For Yellowfin users on older versions, we recommend you upgrade, or use the name attribute in place of publish-uuid in the interim. |
this.outputTypes = []; //Create an array of outputKeys and what report API they came from for easy removal |
table.codeModeExampleTable { |