Present Code Widgets

Overview

Code widgets are custom UI objects designed to allow users to bring external app experiences into presentations and create re-usable low code/no code widgets for other presentation authors. Yellowfin includes multiple out-of-the-box code widgets and action buttons, which are both explained in this section.

Code widget examples

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

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

Data storytelling feed widget

Yellowfin 9.6 offers a data storytelling feed widget that works like a news feed for Yellowfin presentations. The widget displays a list of the most recent stories from a folder or sub folder location that you choose. 

With this widget, presuming you have the access required, you can:

• add one or more data storytelling feeds to a dashboard or a presentation and customize their display;
• manage data storytelling templates for regular use (to save time setting up filters etc); and,
• create new stories from templates.

Add data storytelling feeds to a presentation

When you add a data storytelling feed to your dashboard, you can apply all the usual formatting, such as the size of the object and any background formatting. You can also control a variety of data storytelling-specific display options, outlined in the table below. 

Steps to add a data storytelling feed

1. On a presentation of your choice, click on the Widgets tool on the left
   
   
2. Use your mouse to drag the Data Storytelling Feed option onto your slide
   
   
   
3. In the Data Storytelling Properties panel on the right, select a folder and, if required, any sub folder that contains storytelling content
   
4. Check that the feed is populated with stories and adjust any of the options in the Data Storytelling Properties panel to customize the feed
   
   

Manage storytelling templates

A storytelling template lets you create new content based on existing stories that you have access to view. This is useful when you create similar content regularly. For example, if you publish a new story every month with an embedded table and charts containing last month’s sales figures, you can make this into a template for future use. 

Templates are managed from within the storytelling widget during presentation or dashboard editing. Follow the steps below to select and deselect storytelling templates.

Steps to manage templates

1. Ensure you’re editing a presentations with a data storytelling feed already added
2. Click on the Edit Template List button at the bottom of the feed
   Checkboxes will appear next to each item in your scrollable feed:
   
3. Use the checkboxes to select (or deselect) any stories you wish to use as templates
4. Click on the Save List button
   

Create new storytelling content from templates

You can create new storytelling content directly from a presentation or a dashboard. Using an existing template means content, such as any filters, images and text, will be copied into a new story. 

For regular content that you produce, this saves time in recreating filters for tables and charts that you wish to include. Instead, you can tweak the existing content and filter values to suit your updated content. When you update a filter in a new story, the original template remains unchanged, leaving your original story intact.

TIP: Make sure the presentation already has a data storytelling feed on it and that you’re viewing the presentation in either publish or preview mode.

From the feed on a presentation or a dashboard, you can:

• create new content based on an existing template; or,
• create a new, empty story

All new content will automatically be stored in the same sub folder that the feed is already set to use. This means it will automatically be added to your data storytelling feed on the presentation slide or dashboard as soon as you’ve published it.

Steps to create new storytelling content from templates

1. Ensure you’re viewing a presentation with a data storytelling feed already added, either in preview mode or already published
   
2. In the bottom left corner, click on the Add to Feed button to display the Create New Feed Item dialog box
   Any stories you selected to use as templates will be displayed as a list in this dialog box:
   
   
3. Either click on one of the existing templates listed to create a copy of an existing story, or click on the Create Blank Story button in the bottom right corner to create a new, empty story without any content
   The story will appear in edit mode, with Copy added to its title:
   
   
4. Adjust any filters and content according to your requirements (for more information on writing stories, start here)
   
   
5. Click on the Publish button at the top of the story
6. Save the story to the same folder location as the original story (and, depending on your feed settings, the same sub folder location) if you wish to display it in your story feed, then click on the Publish button
   
7. Close the published story to return to your dashboard with the data storytelling feed you added earlier
   The new story will appear at the top of the feed:
   

Signal 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 presentation. This is a quick and easy way to incorporate automatically discovered insights that are relevant to the content on a presentation. 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 presentation 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 slide.
   
   
   
   
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 presentation.
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.

Custom HTML

This widget allows you to add custom HTML anywhere on the presentation slide. HTML added through this widget is displayed on all modes of the presentation. 

Although HTML is supported in the Present 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 presentation.

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.

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 slide.
   
   
   
   
3. Switch to Code Mode through to toggle on top of the presentation.
   
   
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 presentation 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.

Video widget

The video widget was introduced with Yellowfin 9.6. It provides an easy way to add videos to dashboards and presentations using a URL as a video source. The video widget can be used to share videos from popular video platforms including YouTube, Dailymotion, Vimeo and TED (Talks).

Add a video to a presentation

In Present preview and publish modes, all videos can be viewed like any embedded video.

In Present edit mode, videos cannot be viewed, and videos from Vimeo and TED won’t display a custom preview image.

1. On a presentation slide of your choice, click on the Widgets tool on the left
   
2. Use your mouse to drag the Video option onto your slide
   
   
3. In the properties panel on the right, click on the Video URL field and paste a URL to a video (for example, https://www.youtube.com/watch?v=yKP7jQknGjs)
   Depending on the video platform, the video placeholder on your dashboard will change to either a preview image, like this:
   
   ...or a generic graphic, like this:
   
   
4. If you wish to resize the video, drag and drop any corner of the widget placeholder
5. Click on the dashboard’s Preview button
6. Click on the video to trigger it to play