Extending Yellowfin with HTML, CSS & Javascript

Thie course teaches attendees how to apply existing HTML, Javascript and CSS knowledge to Yellowfin Code Mode, the Javascript API and Javascript Charts.

    No events to show


      This course will build upon participants' base-level of understanding of HTML5, CSS and Javascript and apply this knowledge to Yellowfin. This course will be delivered via instructor-led remote learning and will blend theory, demonstrations and hands-on exercises.

      Learning Objectives

      When the participant completes this course they will be able to:

      • Describe the purpose of the various sub-apis within the Javascript API
      • Describe how the Code Editor can be used with canvas dashboards and presentations

      • Use HTML, CSS and Javascript to create highly interactive dashboards

      • Describe how the Javascript API can be used to embed Yellowfin content

      • Embed content using the Javascript API using the advanced method

      • Describe how Javascript charts can be created using existing Javascript charting libraries

      • Leverage extenal Javascript libraries (such as D3.js, Google Charts, etc.) to create custom charts in Yellowfin


      Target Audience

      This course is aimed at attendees with a working knowledge of HTML, CSS and Javascript and wish to apply their existing skills in a Yellowfin context.


      This course assumes students have a working knowledge of HTML, CSS and Javascript. This course does not teach Javascript, HTML and CSS; instead, it teaches students to apply existing skills to Yellowfin.

      To gain skills to meet the prerequisites for this course, the following free course from Coursera is recommended.

      This self-paced course will lead attendees through core concepts to prepare them for the second part of the course.

      Delivery Format

      Each course day will involve a virtual classroom session that runs over 4 hours to maximise participant engagement
      and learning effectiveness.

      The course will be delivered using a blended learning approach that combines the following teaching methods:

      • Short pre-class reading or exercises to prepare participants for the virtual classroom sessions
      • Live virtual classroom sessions delivered using an advanced online training and collaboration platform and dedicated Slack channel.
        • Short in-class practical exercises using small virtual breakout groups of two or three participants to collaboratively practice specific skills and techniques
        • In-class mini-projects that allow participants to combine a number of specific skills and techniques to create an example of real world analytics content

      The virtual classroom sessions include frequent practical interactive sessions and short breaks. The course is taught by trainers who are experienced teachers and experts in the Yellowfin Suite and the broader analytics profession.

      Topic Outline

      Module 1: Introduction to Extending Yellowfin

      • Recap of key concepts from HTML, CSS and Javascript course
      • Overview of Yellowfin extensions
        • Dashboard canvas and code mode
        • Embedding Yellowfin content
        • Javascript Charts
      • Overview of the components of the Yellowfin Javascript API
        • Base API
        • Dashboards API
        • Sub Tabs API
        • Report API
        • Filters API / Filter Object API
        • LoaderEvents API
        • Widget API

      Module 2: Dashboard Code Mode

      • Introduction to Yellowfin Dashboards
        • Sub-tabs
        • Entities
        • Global entities
      • Visual Mode vs Code Mode
      • Exercise: Creating a simple code mode dashboard using existing code
      • Visual Mode Styling and CSS
      • Adjusting styling on the Code Mode CSS Tab
      • Introduction to Jquery
      • Adding simple events to canvas elements
      • Introduction to the Javascript API
      • Applying filter values by selecting elements
      • Introduction to the Filters API
      • Interaction between Filters API and Standard Filters
      • Exercise: Creating a simple button to apply a filter value
      • Exercise: Altering canvas elements to reflect filter selection
      • Exercise: Applying filters from data in table
      • Introduction to the Reports API
      • Triggering drills, listening to drills, getting the dataset
      • Creating custom HTML widgets
      • Exercise: Creating a custom drop-down filter menu
      • Exercise: Creating a custom button to reset filters
      • Using a dataset to display a value in a textbox
      • Exercise: Substitute Text with Report Data
      • Other Examples
      • Exercise: Pop-up Help Menu
      • Exercise: Auto-refresh timer

      Module 3: Embedding Yellowfin Content

      • Introduction to embedding content in Yellowfin
      • Embed Links vs Advanced API Embedding
      • Embed Link options (report)
      • Embed Link options (dashboard)
      • Exercise: Embedding content using Embed Links

      Module 4: Javascript Charts

      • Introduction to Javascript Charts
      • Exercise: Creating a Javascript Chart using existing code
      • Online charting libraries (D3.js, Google Charts, ChartJS, C3.js)
      • Exercise: Charting Libraries
      • Introduction to generateChart
      • Introduction to Require
      • How a Javascript chart works
      • Working with an online code sample
      • Exercise: Simple chart
      • Modify chart elements (make axis thicker)
      • Exercise: Modify simple chart
      • Creating charts from scratch
      • Exercise: Sankey Chart (Google Charts)
      • Triggering dashboard actions from Javascript charts
      • Exercise: Applying filters from Javascript charts