Home / Fuel UX

Fuel UX

8232 points
Michael Clark's picture

 

Overview

Fuel UX is the user interface toolkit used by the Marketing Cloud and ExactTarget's Marketing Cloud apps. Based on leading open-source JavaScript technologies including Bootstrap, jQuery and RequireJS, Fuel UX uses familiar technologies and techniques to make it easy to build apps that deeply integrate with the look and feel of the Marketing Cloud. Beyond simple user interface controls, Fuel UX also includes powerful components that make it possible to embed parts of the Marketing Cloud in third-party applications.

Fuel UX includes a suite of UI controls and components (data-bound composite controls) that make it easy to build rich client experiences above the Fuel platform.

Controls

  • Checkbox - Customized look and feel of checkbox elements
  • Combobox - Combines input and dropdown for for flexible data selection
  • Datagrid - Renders data in a table with paging, sorting, and searching
  • Datepicker - Combines input and dropdown for easy selection of dates
  • Pillbox - Manages selected items with color-coded text labels
  • Preloader - Fully css-driven loading animation for visual indication of wait times
  • Radio - Customizes look and feel of radio button elements
  • Scheduler - Composite form control to quickly schedule events
  • Search - Combines input and button for integrated search interaction
  • Select - Extends button dropdown with additional functionality for setting and retrieving the selected items
  • Spinner - Provides convenient numeric input with increment and decrement buttons
  • Tree - Provides a visual display of hierarchical node data
  • Wizard - Defines a multi-step process to be completed in a specific order

For further information on using these controls, check out the Getting Started Guide .

Twitter Bootstrap Components

Since Fuel UX leverages  Twitter Bootstrap , various styles, components and plugins are also available.

Versions

The current public versions of Fuel UX is 2.5.0 (Twitter Bootstrap 2.3.2).

Simply type the major version into the URL to get the latest minor version. For example, using 2.5 in the URL as you see below will always load the latest 2.5.x revision, which is 2.5.0. You can use 2.5.0 in the URLs below for example, to use a specific revision. Future versions will be documented here.

Release DateFuel UX Ver.Twitter Bootstrap Ver.Release Comments
9/28/20122.0.02.1.1Initial Release
10/5/20122.0.12.1.1Loader.js fix
10/31/20122.0.22.1.1Bug Fixes
11/1/20122.1.02.2.1Upgrade Twitter Bootstrap to 2.2.1
11/10/20122.1.12.2.1Bug Fixes
01/04/20132.22.2.2 NEW CONTROL: Tree
NEW CONTROL: Wizard
NEW CONTROL: Checkbox
NEW CONTROL: Radio Buttons
NEW CONTROL: Select Dropdown
Upgrade to latest Bootstrap (2.2.2)
Add reload method to datagrid
Add stretchHeight option to datagrid
Add rich methods for getting/setting selected item to combobox
Add enable and disable methods to combobox
Add enable and disable methods to search control
Fix triggering of superfluous spinner events
02/18/20132.3.02.3.0Add custom filter support to datagrid
Use select control for datagrid page size dropdown
Add stepclick event to wizard support cancelling clicks on steps
Improve rounded corners of combobox button to better match Bootstrap
Improve support for installation with Yeoman
Upgrade Bootstrap from 2.2.0 to 2.3.0
08/02/20132.3.12.3.2Reset datagrid to first page on filter change
Fix datagrid operation inside HTML form
Fix datagrid header wrapping for narrow columns
Improve datagrid class specificity for inner controls
Fix datagrid race condition with next and previous buttons
Improve datagrid fault tolerance around paging operations
Improve sample datasource to handle null values when searching
Fix select control value selection when value contains spaces
Fix checkbox operation inside datagrid and form-inline
Fix checkbox operation for IE8
Fix tree text wrapping issue
Fix spinner issue when passing a string as a value
Fix button group operation inside wizard step
Backport tooltip options fix from Bootstrap 3
Upgrade Bootstrap from 2.3.0 to 2.3.2
09/24/20132.4.02.3.2 NEW! FuelUX Intelligent Dropdowns
Tree Control – Fixed event when unselecting last item
Tree Control – Added supports for decorating folders with markup
Tree Control – Added updated event
Tree Control – selectFolder method fixed
Tree Control – Collapse method added
Select Control - Fixed for leftover resizing element
Updated to use GruntJS 0.4.x
Wizard Control - selectItem method now supports set current step
Wizard Control - Horizontally scrolls when many steps are present
Pilbox Control - Added many conveniece methods
Convenience methods added to Radio and Checkbox Controls
Datagrid Control - New option "noDataFoundHTML" added to datagrid control
Datagrid Control - Supports custom class on a column
Datagrid Control - Fixed initial page size on datagrid
11/06/20132.5.02.3.2 NEW! Fuel UX Preloader
NEW! Fuel UX Date Picker
NEW! Fuel UX Scheduler
  • Standardized control boilerplate
  • Implemented noConflict in all controls
  • Checkbox + Radio
    • Removed scrolling to top of page when clicked
  • Spinner
    • Removed “changed” trigger on first hover
  • Select
    • Added hidden input element
  • Radio
    • Fixed input selection problem
  • Wizard Control
    • Unlimited steps
    • Added data attribute that disables navigation to previous steps
    • Changed API initialization from “mousedown” to “mouseover”
12/19/20132.5.12.3.2
  • Pillbox Control
    • Added remove event
    • Added add event
  • Datepicker Control
    • Can be initialized with null date
    • Date parsing is now done with Moment.JS
      • Moment.JS can be uploaded via require or via global namespace
    • Select Control
      • Fixed sizing issue when "Fuelux" CSS class was not on html tag
1/10/20142.5.22.3.2
  • Better Bower support
    • Now brings in just the dist folder instead of the entire repo
  • Loader bugfix
    • Removes "moment not defined" error
  • Spinner Control
    • Fixed problems with floating-point step values
  • HDPI support for fuelux icons
2/14/20142.6.02.3.2
  • NEW FEATURE! Row Selection for the datagrid control
    • enableSelect option enables single row selection
    • multiSelect option enables multiple rows to be selected
    • itemSelect option & itemDeslected events for when rows are selected/deselected
  • Added boarder to wizard content by default
  • Checkbox bug fix
  • Radio bug fix
  • Datepicker performance improvements
  • Documented "highlight" class for checkbox / radio control, used to modify appearance
  • Better documentation for checkbox, pillbox, and radio controls
    • Reveals previously undocumented useful functions

Themes

Fuel UX extends Twitter Bootstrap and provides its standard theme by default.  You can customize  themes to create unique Fuel UX controls.  

ExactTarget also provides the IMH theme to allow your Fuel UX controls to mirror ExactTarget's Marketing Cloud design:

Files

Github Repo: http://github.com/ExactTarget/fuelux-imhtheme

pillbox with IMH theme
Pillbox with IMH Theme

Fuel UX 

Files

Github Repo: http://github.com/ExactTarget/fuelux

pillbox with Fuel UX theme
Pillbox with Fuel UX Theme

Product Group: