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

Versions Compared

Key

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

Table of Contents
classcontents

Overview

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

Code widget examples

The following types of code widgets are available by default in Yellowfin.

Code Widget type

Description

Signal List

Add a signal list to a dashboard. 

Custom HTML

Drag this widget anywhere on your canvas, and then jump to Code Mode to instantly start coding HTML within the widget’s tags.

Associated ReportsAdd relevant reports as links rather than displaying them.

Create your own widget

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.



Yellowfin Code Widgets

Here's how to use the out-of-the-box Yellowfin Code Widgets



Anchor
customhtml
customhtml

Custom HTML

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.

Using the Custom HTML Code Widget

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.

Note

Ensure that you have the ‘Code Mode’ role function enabled for this to work properly.


  1. Click on the Widgets button on the left.

  2. From the Code Widgets section in the list that appears, drag the Custom HTML widget onto the canvas.


  3. Switch to Code Mode through to toggle on top of the dashboard.



  4. From the list of objects on the left, click on the Custom HTML object to highlight or navigate to the exact code section. Tip: this object list displays all objects added to the dashboard and is used to find the exact code for a particular object so it can be edited.
  5. Once located, enter your HTML code into the widget’s code.
  6. If you navigate back to Visual Mode, you will be able to see the output of your HTML content.



Anchor
signalwidget
signalwidget

Signals List code widget

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.


Widget interaction

Users of your published dashboard will be able to see this list of signals, and interact with it.

  • Open a Signal: Click on a signal in the list to navigate to its detail page.



  • View Signal List page: Click on Explore All to redirect users to the Signal List page, where they can further interact with the list, such as by rating or watching Signals, and assigning owners. If any filters are applied to the Signal List widget, they will be carried over to the Signals List page.



  • Scroll list: Easy to scroll through the widget list; there is no restriction on the number of Signals displayed here.

Configuring the Signals List Widget

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.

  1. Click on the Widgets button, and expand the Code Widgets section (expanded by default).
  2. Drag the Signal List widget onto the canvas.



  3. Upon doing so, the Properties panel will be updated to show properties of this widget.



  4. You can select filters values to filter the signal widget list. The available options allow you to view Signals according to:



    1. Time: view signals according to a pre-selected time range, such as those occurring in the last 30 days. Choose Anytime if you do not want to limit signals according to time.
    2. Signal Analysis jobs: this filters Signals that were detected by a specific analysis configuration job.
    3. Signal Status: this includes Signals added to your watch list, ones that were recently viewed, those that have been closed, or dismissed signals.
    4. Signal Type: display signals of a specific type, such as only show Spikes and Drops. 
    5. Views: display signals that were detected within a specified view.
  5. Note that the list will be saved according to the filters applied. This ‘filtered’ list will appear on the published dashboard.
  6. Refer to the properties section for a description on all properties related to this widget and how to configure them.

Signal widget properties

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.