Code Widgets are custom UI objects, designed to allow users to bring external app experiences into dashboards and create re-usable low code/no code widgets for other dashboard authors. Yellowfin also includes multiple out-of-the-box Code Widgets and Action Buttons, which are both explained in this section.
Note: these widgets are only supported in the canvas layout. These cannot be added to other types of dashboard layouts.
The following types of code widgets are available in Yellowfin out-of-the-box.
Code Widget type | Description |
---|---|
Add a Signal List to a dashboard. | |
Drag in this widget anywhere on your canvas, and then jump to Code Mode to instantly start coding HTML within the widget’s tags. | |
Expand this section to add buttons that perform actions and functions on a dashboard. |
Yellowfin supports the use of custom code widgets that developers can code and package together. These can be added to the dashboard by importing them through the plugin manager. They will then appear in the Code Widget list for selection during the dashboard building process.
Here's how to use the out-of-the-box Yellowfin Code Widgets.
This widget allows you to add custom HTML anywhere on the dashboard canvas. HTML added through this widget is displayed on all modes of the dashboard.
Although HTML is supported in the dashboard’s code editor, the actual output of custom HTML in Code Mode will not render on Visual Mode. To see the actual output, you must preview the dashboard.
Custom HTML Code Widgets allow you to see the output of custom HTML content added in Code Mode, in Visual Mode without previewing it.
This widget is designed to be used by users with coding knowledge, specifically HTML, CSS, and JavaScript. This is because it requires the use of Code Mode to edit the widget.
Ensure that you have the ‘Code Mode’ role function enabled for this to work properly. |
If you have Yellowfin Signals as part of your analytics suite, you can use this widget to add a contextual Signals List to your dashboard. This is a quick and easy way to incorporate automatically discovered insights that are relevant to the content on a dashboard. The Signal List widget will be updated to reflect new Signals discovered in real time (that is, Signals detected when the analysis is run, and if the widget filters are set to display them).
This list employs the use of color-coded Signals, that accentuate insights with positive results as blue, and those with negative results as orange.
Users of your published dashboard will be able to see this list of signals, and interact with it.
This tutorial shows you how to add a Signals List widget, and configure it by applying filters to view Signals based on your preference. This allows you to control the Signals that will appear in this list.
These are properties specific to the Signal List Widget.
Property name | Description |
---|---|
Name | Allows you to update the name of the signal widget. |
Filters | This section offers multiple filters that you may update your signal widget list by. These are covered in the Signal filter section above. |
Style | |
Dark theme | Enable this toggle to display the Signal widget in a dark theme, or disable it to keep the light theme. |
Size & location | |
X | Specify the x coordinates of the top left corner of the signal widget, in order to position it exactly on your dashboard canvas. |
Y | Specify the y coordinates of the top left corner of the signal widget, in order to position it exactly on your dashboard canvas. |
Height | Specify the height of the currently selected signal widget, in pixels, in order to resize it exactly. Note that the Signal widget width does not have a configuration field as it is not adjustable for this widget. |
Lock widget | Enable this toggle to lock the signal widget in its location. This stops you from moving or resizing it. This holds true even when selecting multiple widgets on the canvas. Note that the quick chart can still be customized. |