Themer Guide

Flex allows you to theme your own app interfaces with your own html markup. You can create your own music controls, song displays, app content views, cart features, and more. It is entirely possible for you to create totally new and custom interfaces for your flex app without any advanced javascript programming knowledge.

Fundamental Theming Principle

Flex operates at the core using the Model View ViewModel (MVVM) architecture. This means that there is a convenient separation between the html markup that you create, and the back-end programming that powers the framework. For a themer, this means that it's easy to write just html & css to achieve any desired look or layout, and then let flex populate your created layout with real data and interactive features.

How It Works

Flex utilizes Knockout.js as the core library which actually binds internal application data and features to the created html structures. Therefore, all of the binding options, features, and syntax that are described in this documentation are also well documented on the knockoutjs.com website.

Here is a quick example of how it works in practice:

<div class="your-cart-totals">
  Total Items: <span data-bind="text: cart().items.length">0</span>
  Total Price: <span data-bind="text: cart().total">$0.00</span>
</div>
In the example above, you have some basic html code which can be themed and placed anywhere on your webpage. You'll notice that we added a special html attribute called "data-bind" to some of the <span> tags. This attribute is what tells flex to step in and do some processing. The value of the "data-bind" attribute in this example tells flex to update the text contents of those <span> elements with the appropriate cart data. Even more, whenever the cart is updated, the new cart values will also be updated in those <span> elements automatically.

Here is another example:

<div class="cart-buttons">
  <a class="view-cart" href="#" data-bind="click: cart.show">View Cart</a>
  <a class="checkout-now" href="#" data-bind="click: cart.checkout">Checkout Now</a>
</div>
In the example above, we use the "data-bind" attribute to tell flex to show the shopping cart when the "View Cart" link is clicked, and to begin the checkout process when the "Checkout Now" link is clicked. There are many more data points and interfaces that you can tie into with the "data-bind" attribute on your own. Those interfaces are listed at the bottom of this page.

Security Implications

Although the "data-bind" attribute tells flex (or fundamentally, knockout.js) how to bind data with your html, flex waits for you to specifically tell it to do so before actually pulling the trigger. This is to protect sites that are using the flex framework and that also accept and display user submitted html from being exploited.

Note: If you accept and display user submitted html, you need to make sure you filter out the "data-bind" attribute from submitted html to be sure that a malicious user cannot tap into it.

So in order for the "data-bind" attribute to actually do anything for you, you need to specifically tell flex to process it. You can do this with a jQuery selector; and target every element individually, or many elements at once.

So building on the examples shown above, we are going to add a small bit of javascript to the end of our example that shows how to turn flex "on" for the html elements with the "data-bind" attribute.

<div class="your-cart-totals bbflex-bind">
  Total Items: <span data-bind="text: cart().items.length">0</span>
  Total Price: <span data-bind="text: cart().total">$0.00</span>
</div>

<div class="cart-buttons bbflex-bind">
  <a class="view-cart" href="#" data-bind="click: cart.show()">View Cart</a>
  <a class="checkout-now" href="#" data-bind="click: cart.checkout()">Checkout Now</a>
</div>

<!-- This javascript is needed to actually make the bindings happen! -->
<script type="text/javascript">
  flexloader.execute(function($) {
    $(".bbflex-bind").bbflex('applyBindings');
  });
</script>

You'll notice that we added a new class "bbflex-bind" to some of our container elements. We just used this class to make it easy for us to select them at the same time with a single jQuery selector. The .bbflex('applyBindings') jQuery method is what actually causes flex to process all of the "data-bind" attributes within those selected elements.

It's also important to note that the jQuery command is wrapped in a function and executed with the flexloader.execute() method. We do this to ensure that the $ variable is referenced to the correct instance of jQuery, and that the flex app is loaded before the commands are issued.

Getting Started

In order to start building your own compelling interfaces for features in your flex app, you'll want to browse through the different interfaces and properties that are available to you via flex bindings:

flexloader.execute(function($) { $(".selections").bbflex('applyBindings'); });

All of the following application interfaces are part of the model which is bound via the jquery bbflex binding method demonstrated above. Click one to learn more:

Now Playing

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The nowplaying() data-bind accessor will give you access to all of the information related to the currently playing/selected song from the application. With it, you can build themed content around the song the user is currently listening to and interacting with. We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Song Title: nowplaying().title String

This property provides access to the song title of the currently playing or active beat in the application.

Example:
Beat Name: <span data-bind="html: nowplaying().title">Loading...</span>

Note: You should use the "html" binding rather than the "text" binding since the song title will already be html encoded by the framework.


Song Producer: nowplaying().artist String

This property provides access to the name of the producer for the currently playing or active beat in the application.

Example:
Producer Name: <span data-bind="html: nowplaying().artist">Loading...</span>

Note: You should use the "html" binding rather than the "text" binding since the producer's name will already be html encoded by the framework.


Image: nowplaying().image String

This property provides access to the hosted url for the full size (250px by 250px) beat image of the currently playing or active beat in the application.

Example:
<img data-bind="attr: { src: nowplaying().image, title: nowplaying().title }, visible: true" style="display:none" />

You'll notice that we've added a couple of different bindings to our <img> tag in this example. Firstly, we bind the image url to the "src" attribute of the image, and we bind the beat title to the "title" attribute of the image so that both of those attributes stay updated to the the currently playing song. Secondly, we employ a little trick to prevent the image from looking broken when the page is first loaded (since it won't have a src attribute until the bindings are applied). We set the style of the image to "display:none" so that it is hidden by default, and then once the framework is loaded and the bindings are applied, the "visible:true" binding changes it's visibility back to visible.


Thumbnail: nowplaying().thumbnail String

This property provides access to the hosted url for the thumbnail size (50px by 50px) beat image of the currently playing or selected beat in the application.

Example:
<img data-bind="attr: { src: nowplaying().thumbnail }, visible: true" style="display:none" />

This binding technique is nearly identical to the one described above, the only difference is that we are using a smaller image and we are foregoing the image title binding.


Description: nowplaying().description String

This property provides access to the producer supplied description for the beat which is currently playing or selected in the application.

Example:
<div class="beat-description" data-bind="html: nowplaying().description"></div>

In this example, we're binding the beat description into a block level <div> element and we are using the "html" binding rather than the "text" binding because the framework already html encodes the beat description and delivers it in a pre-formatted html format.


Effects: nowplaying().effects String

This property contains a comma separated list of the effects designated by the producer as being used for the currently playing or selected beat.

Example:
Effects: <span data-bind="text: nowplaying().effects"></span>

Genres: nowplaying().genres String

This property contains a comma separated list of the genres designated by the producer for the currently playing or selected beat.

Example:
Genres: <span data-bind="text: nowplaying().genres"></span>

Hook: nowplaying().hook String

This property contains a comma separated list of the hook properties designated by the producer for the currently playing or selected beat.

Example:
Hook: <span data-bind="text: nowplaying().hook"></span>

Instruments: nowplaying().instruments String

This property contains a comma separated list of the instruments designated by the producer as being used in the currently playing or selected beat.

Example:
Instruments: <span data-bind="text: nowplaying().instruments"></span>

Mood: nowplaying().moods String

This property contains the mood designated by the producer for the currently playing or selected beat.

Example:
Mood: <span data-bind="text: nowplaying().moods"></span>

Tempo: nowplaying().tempo String

This property contains the tempo designated by the producer for the currently playing or selected beat.

Example:
Tempo: <span data-bind="text: nowplaying().tempo"></span>

Licensing: nowplaying().licensing Object

This property contains all of the pre-approved licensing options available for the currently playing or selected beat in the application. It can be used to build themed content around the available purchasing options for the "now playing" beat. It contains the following sub-properties:

Default: nowplaying().licensing.default Integer

This property is an integer value. It contains the index to the licensing option which the beat producer has chosen to be the preferred default purchasing option for the beat.

Example: View JS Fiddle

Recommended License: <span
data-bind="text: nowplaying().licensing.options[nowplaying().licensing.default].name">

</span>

Options: nowplaying().licensing.options Array

This property is an array value. It contains all of the individual pre-approved licensing options available for the currently playing or selected beat in the application.


nowplaying().licensing.options[index] Object

Each array item is an object which contains its own sub-properties:


Name: nowplaying().licensing.options[index].name String

This property contains the name of the license option


Terms: nowplaying().licensing.options[index].terms String

This property contains the abbreviated bullet point list of license rights and allowances. It is delivered by the framework in HTML format.


Description: nowplaying().licensing.options[index].description String

This property contains the full explanatory description of license rights and allowances. It is delivered by the framework in HTML format.


Files: nowplaying().licensing.options[index].files String

This property contains the description of files which will be delivered if the license is purchased.


Price: nowplaying().licensing.options[index].price String

This property contains the selling price of the license.


Example: View JS Fiddle
<ul class="all-licenses" data-bind="foreach: nowplaying().licensing.options">
  <li class="individual-license">
    <ul class="individual-license-details">
      <li>License Name: <span data-bind="text: name"></span></li>
      <li>License Price: <span data-bind="text: price"></span></li>
      <li>Terms: <span data-bind="html: terms"></span></li>
      <li>Description: <span data-bind="html: description"></span></li>
      <li>Delivery Files: <span data-bind="text: files"></span></li>
      <li><a href="#" data-bind="click: $root.cart.add">Add to Cart!</a></li>
    </ul>
  </li>
</ul>

In the example above, we are using a "foreach" binding in the "data-bind" attribute to populate our
<ul class="all-licenses"> element with a list of each individual license option. And you can see that we create a link that goes with each license option (using the "click" binding) which uses the "cart.add" convenience method of the framework to add the license to the shopping cart when the link is clicked. Pretty awesome right?


Ratings: nowplaying().ratings Object

The ratings property provides access to the public star rating statistics for the currently playing or selected beat.

Average Rating: nowplaying().ratings.average String

This property contains the percentage rating (between 0 and 100) of the beat based on the average of all the public star ratings given to the beat.
Example:

Average Rating:
<span data-bind="text: parseInt(nowplaying().ratings.average) + '%'"></span>

In the example above, we are simply showing the non-decimal percentage value of the overall beat rating and appending a percentage sign to the end for aesthetics. But it's also possible with a little logic to display the average rating in terms of a visual number of stars.

Visual Stars Example: View JS Fiddle

<i data-bind="css: { on: nowplaying().ratings.total >= 1 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >
= 40 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >= 60 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >
= 80 }" class="fwicon-star"></i>
<i data-bind="css: { on: nowplaying().ratings.average >= 90 }" class="fwicon-star"></i>

Total Ratings: nowplaying().ratings.total String

This property contains the number of total individual ratings given to the beat in its lifetime.
Example:

Total Ratings: <span data-bind="text: nowplaying().ratings.total"></span>

Tags: nowplaying().tags Array

This property is an array of tags. It can be used the build themed content around the producer provided keyword tags for the currently playing or selected beat.

nowplaying().tags[index] String

Each array item is an individual descriptive tag given to the beat by the producer.

Examples:
Meta Tags: <span data-bind="html: nowplaying().tags.join(', ')"></span>
Meta Tag List:
<ul data-bind="foreach: nowplaying().tags">
  <li><span data-bind="html: $data"></span></li>
</ul>

Published Date: nowplaying().pubdate Integer

This property contains the datetime timestamp (already converted to milliseconds) which corresponds to the date and time when the beat was first added to the platform. It is provided as an integer value so that it can be manipulated and compared more easily. But this also means that to turn it into a human readable date/time, some additional processing must be done on the value via javascript.

Example:
Published: <span data-bind="text: showDate(nowplaying().pubdate)"></span>

<script type="text/javascript">
function showDate(datetime) {
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var date = new Date(datetime);
  return months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();
}
</script>

Playlist: nowplaying().playlist String

This property contains the internal id of the playlist that the currently playing or selected beat belongs to. Therefore it can also be used to determine which playlist is currently selected and also access the properties of that playlist.

Example:
Current Playlist:
<span data-bind="text: music.playlists[nowplaying().playlist].title"></span>

Playlist Index: nowplaying().playlistIndex Integer

This property contains the numerical index of the currently playing or selected beat in the playlist that it belongs to.

Example Usage:
Next Song:
<span data-bind="if: music.playlists[nowplaying().playlist] && music.playlists[nowplaying().playlist].media.length > nowplaying().playlistIndex + 1">
  <strong data-bind="html: music.playlists[nowplaying().playlist].media[nowplaying().playlistIndex + 1].title"></strong>
</span>

Producer ID: nowplaying().uid Integer

This property contains the unique producer id of the producer who the currently playing or selected beat belongs to. You can use this id to (possibly) access the producer object which contains more information about the producer.

Example Usage:
<!-- ko with: producers.byId[nowplaying().uid] -->
  Producer Logo: <img data-bind="attr: { src: banner_thumb, title: name }" />
<!-- /ko -->

It's important to note that the producer object may not be available for every producer. Producer objects are only loaded into the app for producers who are specifically named in playlist definitions. For example, if the app has a playlist that includes the beats from 3 specific producers, then those three producers will have producer objects available in the app. However, if the playlist is not limited to any specific producers (and therefore draws from all producers on Beat Brokerz), no individual producer objects will be loaded along with that playlist.


Song ID: nowplaying().nid Integer

This property contains the unique id of the currently playing or selected beat.

Music & Playlists

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The music data-bind accessor will give you access to the music player, the playlists, and all of the music that has been loaded by the flex app. It can be used to build themed content around the music and playlists in the app, and also to manipulate the music interface in different ways (such as changing songs, changing playlists, or showing licensing options for a given beat). We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Playing: music.playing() Boolean

This property contains a boolean value (true or false). It will be true if the music player is currently playing music, and false otherwise. It can be used to theme content around whether music is currently playing or not.

Example:
<span data-bind="if: music.playing()"><button data-bind="click: music.pause">Pause</button></span>

In the example above, we use the "if" binding on a <span> element to display a button which will pause the player if it's playing.


Paused: music.paused() Boolean

This property contains a boolean value (true or false). It will be true if the music player is currently paused/stopped, and false otherwise. It can be used to theme content around whether the music is currently paused or not.

Example:
<span data-bind="if: music.paused()"><button data-bind="click: music.play">Play</button></span>

In the example above, we use the "if" binding on a <span> element to display a button which will play the music if it's paused.


Muted: music.muted() Boolean

This property contains a boolean value (true or false). It will be true if the music player volume level is currently muted, and false otherwise. It can be used to theme content around whether the music is currently muted or not.

Example:
<span data-bind="if: music.muted()"><button data-bind="click: music.unmute">Unmute</button></span>
<span data-bind="if: !music.muted()"><button data-bind="click: music.mute">Mute</button></span>

In the example above, we use the "if" binding on a <span> element to display a button which will unmute the volume if it's muted, or a button to mute the volume if it's unmuted.


Volume: music.volume() Float

This property contains a floating value between 0 and 1 which indicates the current volume level of the music player. It can be used to theme content around the current volume level of the music player.

Examples:
Volume: <span data-bind="text: parseInt(music.volume() * 100) + '%'"></span>
<hr data-bind="style: { width: music.volume() * 100 + '%' }">

In the first example, we simply show the volume level in percentage points. In the second example, we are actually using the volume level to control the width of the <hr> (horizontal rule) html element.


Seek Position: music.seekPosition() Float

This property contains a floating value between 0 and 100 which indicates the current music player time position as a percentage of the total song length. It can be used to theme content around the current play head position of the music player.

Examples:
Seek Position: <span data-bind="text: parseInt(music.seekPosition()) + '%'"></span>
<hr data-bind="style: { width: music.seekPosition() + '%' }">

In the first example, we simply show the seek percentage. In the second example, we are actually using the seek position to control the width of the <hr> (horizontal rule) html element.


Active Playlist Info: music.activePlaylist() Object

This property contains the currently active playlist object. This would be the playlist which the now playing beat belongs to. The playlist object contains the following properties:


Title: music.activePlaylist().title String

This property contains the title of the currently active playlist.


Category: music.activePlaylist().category String

This property contains the name of the category the currently active playlist belongs to.


Description: music.activePlaylist().description String

This property contains the description of the currently active playlist.


Producers: music.activePlaylist().producers Array

This property contains an array of the producer id's which the currently active playlist is limited to (if any).

music.activePlaylist().producers[index] String

Each array item is a string value that contains an individual producer id.


Playlist ID: music.activePlaylist().id String

This property contains the system id of the currently active playlist. It can be used as a reference for other accessors.


Is Default: music.activePlaylist().isDefault Boolean

This property contains a boolean value (true/false) which indicates whether this playlist is the default playlist for the app.


Example:
<!-- ko if: music.activePlaylist().id -->
  <h2 data-bind="html: music.activePlaylist().title"></h2>
  <em data-bind="html: music.activePlaylist().category + ' Playlist'"></em>
  <div data-bind="html: music.activePlaylist().description"></div>
  <div data-bind="if: music.activePlaylist().producers.length">
    <h4>Featured Producers</h4>
    <ul data-bind="foreach: music.activePlaylist().producers">
      <!-- ko with: $root.producers.byId()[$data] -->
      <li><span data-bind="text: name"></span></li>
      <!-- /ko -->
    </ul>
  </div>
<!-- /ko -->

In the example above, we use the first "if" binding to wait until our app has a playlist loaded before showing the rest of the contents of this snippet. The example would work without it, but it prevents empty content from showing until the data is ready.

Also, you'll notice that we use the "if" binding another time inside this example to test if the playlist producers array actually has any producers in it (by checking its length property, since it's an array). This condition allows us to only show the featured producers heading and list when there are actually producers associated with the playlist.

One other thing to note in this example is the demonstration of the containerless "with" binding. We use this binding syntax in our example to switch our binding context to the producer object in order to access properties of the producer.


Active Playlist Media: music.activePlaylistItems() Array

This property can be used to build themed content around the currently active playlist. It contains an array of all the beats in the currently active playlist. Each array item is an individual beat object which contains all of the information associated with that beat.


music.activePlaylistItems()[index] Object

Each array item is a beat object which contains all of the same properties as the nowplaying() object. Refer to the now playing theme interface documentation to see all of the beat properties that you can use.


Examples:
<ul data-bind="foreach: { data: music.activePlaylistItems(), as: 'beat' }">
  <li><a href="#" data-bind="html: beat.title, click: $root.music.playMedia"></a></li>
</ul>
<ol data-bind="foreach: { data: music.activePlaylistItems(), as: 'beat' }">
  <li>
    <img data-bind="attr: { src: beat.thumbnail }" />
    <strong data-bind="html: beat.title"></strong>
    <a href="#" data-bind="click: $root.music.playMedia">Play</a>
    <a href="#" data-bind="click: $root.music.showLicenseOptions">Purchase Options</a>
  </li>
</ol>

In the first example, we use the "foreach" binding to cycle through the beats in the currently active playlist, and create a list item for each. Inside the list item, we show a link with the beat title as the link text, and when it is clicked, the beat begins playing in the player.

In the second example, we go a step further by again cycling through the beats with the "foreach" binding, but we also show the thumbnail image inside each list item, and also a separate link to play the beat, and a separate link to show the licensing options for the beat.


All Playlist Keys: music.playlistKeys() Array

This property can be used to build themed content around all of the playlists in the application. It contains an array of all of the playlist ID's currently available in the flex app.


music.playlistKeys()[index] String

Each array item is a string which is the id of an individual playlist. To access the playlist information, use the id as a sub-property of the music.playlists data model.


Example:
<ul data-bind="foreach: music.playlistKeys()">
  <!-- ko with: $root.music.playlists[$data] -->
  <li>
    <span data-bind="html: title"></span>
    <a href="#" data-bind="click: $root.music.changePlaylist">Switch Playlist</a>
  </li>
  <!-- /ko -->
</ul>

All Playlist Info: music.playlists Object

This property can be used to build themed content around a specific playlist in the application. All information about a playlist can be accessed using it's playlist id as a sub-property to this object. You can get a list of all available playlist ids using the music.playlistKeys() data model.


music.playlists[playlistid] Object

Each playlist (accessed by the playlist id), is a playlist object which contains all of the same properties as the music.activePlaylist() data model.


Example:
<!-- ko foreach: { data: music.playlistKeys(), as: 'playlistid' } -->
  <!-- ko with: $root.music.playlists[playlistid] -->
  <div data-bind="if: isDefault">
    Default Playlist: <strong data-bind="html: title"></strong>
    <!-- ko if: playlistid != $root.music.activePlaylist().id -->
    <a href="#" data-bind="click: $root.music.changePlaylist">Switch to Playlist</a>
    <!-- /ko -->
  </div>
  <!-- /ko -->
<!-- /ko -->

We've got a lot going on in this example. The end result is that we show the title of the default playlist in the app, and a link to switch to it (if it's not already the active playlist). First we use a "foreach" binding to cycle through each of the playlists. Then we use a "with" binding to switch into the context of the playlist itself. We follow that with an "if" binding to test if it is the default playlist, and if it is we display the playlist title. Finally, we use another "if" binding to test if the active playlist is different than the default, and if it is, we display a link that will change the playlist back to the default one.

In this example, you can see how multiple bindings can be combined together with different data models in order to build dynamic themed interfaces.


All Playlist Media: music.Playlist Object

This property can be used to build themed content around the actual music which composes any specific playlist in the application. All of the currently loaded beats for a playlist and other playlist information can be accessed using the playlist id as a sub-property to this object.


music.Playlist[playlistid].count() Integer

This method returns the total amount of beats that are part of the playlist, not the amount of beats that have been currently loaded for the playlist.

If you want the count for the amount of beats that have already been loaded for this playlist, then you would use something like music.Playlist[playlistid]().length.


music.Playlist[playlistid]() Array
music.Playlist[playlistid]()[index] Object

Each array item is a beat object which contains all of the same properties as the nowplaying() object. Refer to the now playing theme interface documentation to see all of the beat properties that you can use.


Examples:
<h1>Shopping Cart Beats:</h1>
Total beats loaded:
  <span data-bind="text: music.Playlist['cart']().length"></span><br>
Total beats available:
  <span data-bind="text: music.Playlist['cart'].count()"></span><br>
<ul data-bind="foreach: music.Playlist['cart']()">
  <li>
    <img data-bind="attr: { src: thumbnail }" />
    <strong data-bind="html: title"></strong>
    <a href="#" data-bind="click: $root.music.playMedia">Play</a>
    <a href="#" data-bind="click: $root.music.showLicenseOptions">Purchase Options</a>
  </li>
</ul>

All Playlists (Grouped): music.groupedPlaylists() Array

This property is an array of objects. Each object in the array represents a different grouping of playlists. It can be used to build themed content around the playlists in the application as they are grouped together by category.


music.groupedPlaylists()[index] Object

Each array item is an object which contains data about the group.

Key: music.groupedPlaylists()[index].key String

This property contains the name of the playlist group.


Items: music.groupedPlaylists()[index].items Array

This property is an array of individual playlist objects. It contains all of the playlists included in the group.


music.groupedPlaylists()[index].items[index] Object

Each array item is a playlist object which contains all of the same properties as the music.activePlaylist() data model.


Example:
<div data-bind="foreach: music.groupedPlaylists()">
  <h2>Group: <span data-bind="text: key"></span></h2>
  <ul data-bind="foreach: items">
    <li>
      <h4 data-bind="html: title"></h4>
      <em data-bind="text: $root.music.Playlist[id]().length + ' Beats'"></em>
      <div data-bind="html: description"></div>
    </li>
  </ul>
</div>

In this example, we cycle through each playlist group with a "foreach" binding, and display the name of the group, and a list of the playlists that are in the group. We also show the number of beats which are in each playlist.


Interface Methods

Select Media: music.selectMedia Function

This method can be used on any event handler binding (i.e. "click") within a "foreach" binding of a beats playlist, such as music.activePlaylistItems(). It will select the associated beat from the foreach loop and make it the currently selected beat in the application, but it will not begin playing automatically.

Example:
<ul data-bind="foreach: music.activePlaylistItems()">
  <li><a href="#" data-bind="html: title, click: $root.music.selectMedia"></a></li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.music.selectMedia. Learn more about binding contexts used in knockout.js.


Play Media: music.playMedia Function

This method can be used on any event handler binding (i.e. "click") within a "foreach" binding of a beats playlist, such as music.activePlaylistItems(). It will select and begin playing the associated beat from the foreach loop.

Example:
<ul data-bind="foreach: music.activePlaylistItems()">
  <li><a href="#" data-bind="html: title, click: $root.music.playMedia"></a></li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.music.playMedia. Learn more about binding contexts used in knockout.js.


Show All Beat License Options: music.showLicenseOptions Function

This method can be used on any event handler binding (i.e. "click") within a "foreach" binding of a beats playlist, such as music.activePlaylistItems(). It will show a dialog with all of the licensing options and associated information for the beat (including "add to cart" buttons) in the foreach loop.

Example:
<ul data-bind="foreach: music.activePlaylistItems()">
  <li><a href="#" data-bind="html: title, click: $root.music.showLicenseOptions"></a></li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.music.showLicenseOptions. Learn more about binding contexts used in knockout.js.


Show Individual License Option: music.showLicense Function

This method can be used on any event handler binding (i.e. "click") within the "foreach" binding of the licensing options for a beat object, such as nowplaying().licensing.options. It will show a dialog with all of the information related to the specific license option (including an "add to cart" button) in the foreach loop.

Example:
Purchase options for the currently playing beat:
<ul data-bind="foreach: nowplaying().licensing.options">
  <li>
    <strong data-bind="text: name"></strong> (<span data-bind="text: price"></span>)
    <a href="#" data-bind="click: $root.music.showLicense">More Info</a>
  </li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.music.showLicense. Learn more about binding contexts used in knockout.js.


Show All Available Playlists: music.showPlaylists Function

This method can be used on any event handler binding (i.e. "click") to show an automatic dialog for the user to select from any of the currently available playlists in the application.

Example:
<a href="#" data-bind="click: music.showPlaylists">Show Available Playlists</a>

Change The Active Playlist: music.changePlaylist Function

This method can be used on any event handler binding (i.e. "click") within the binding context of a playlist object, such as music.playlists[playlistid]. It will change the currently active playlist to that of the context playlist.

Example:
<ul data-bind="foreach: { data: music.playlistKeys(), as: 'playlistid' }">
  <!-- ko with: $root.music.playlists[playlistid] -->
  <li><a data-bind="html: title, click: $root.music.changePlaylist"></a></li>
  <!-- /ko -->
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "with") binding, you need to refer to the method like this: $root.music.changePlaylist. Learn more about binding contexts used in knockout.js.


Play: music.play Function

This method can be used on any event handler binding (i.e. "click") to begin play on the music player for whatever beat is currently selected (if the player is not already playing). If the player is already playing, this command will be ignored.

Example:
<a href="#" data-bind="click: music.play">Play</a>

Pause: music.pause Function

This method can be used on any event handler binding (i.e. "click") to pause play on the music player for whatever beat is currently selected (if the player is playing). If the player is already paused, this command will be ignored.

Example:
<a href="#" data-bind="click: music.pause">Pause</a>

Play Next: music.playNext Function

This method can be used on any event handler binding (i.e. "click") to advance to the next beat in the playlist and begin play. If the currently playing beat is already at the end of the playlist, this command will be ignored.

Example:
<a href="#" data-bind="click: music.playNext">Play Next</a>

Play Previous: music.playPrevious Function

This method can be used on any event handler binding (i.e. "click") to rewind to the previous beat in the playlist and begin play. If the currently playing beat is already at the start of the playlist, this command will be ignored.

Example:
<a href="#" data-bind="click: music.playPrevious">Play Previous</a>

Mute: music.mute Function

This method can be used on any event handler binding (i.e. "click") to mute the audio output of the music player. If the audio is already muted, this command will be ignored.

Example:
<a href="#" data-bind="click: music.mute">Mute Audio</a>

Unmute: music.unmute Function

This method can be used on any event handler binding (i.e. "click") to unmute the audio output of the music player. If the audio is already unmuted, this command will be ignored.

Example:
<a href="#" data-bind="click: music.unmute">Unmute Audio</a>

Shopping Cart

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The cart() data-bind accessor will give you access to the items and totals of the current users shopping cart. Additionally, you can use the cart data-bind accessor (without the parenthesis) to perform shopping cart manipulations (such as adding items, removing items, and initiating checkout). We'll run through all of the properties of each to see what data is available and the ways it can be used.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Cart Items: cart().items Array

This property contains an array list of all the items in the users shopping cart. You can use it to build an interface to the shopping cart.


cart().items[index] Object

Each array item is an object which contains information about the item in the shopping cart.


Title: cart().items[index].title String

This property contains the title of the item in the cart.


Price: cart().items[index].price String

This property contains the price of the item in the cart. It does not include the currency symbol.


License: cart().items[index].license Object

This property is a license object with the same properties as nowplaying().licensing.options[index].


Quantity: cart().items[index].qty String

This property contains the quantity of the item in the shopping cart. For beat items, it will always be one. But since the shopping cart is linked to their shopping cart in the Beat Brokerz cloud, it is possible that the user would have an item other than a beat in their shopping cart.


Playlist Index: cart().items[index].playlistIndex Integer

This property contains the integer value of this item's position in the shopping cart playlist array. music.Playlist.cart()[index]


Beat ID: cart().items[index].nid String

This property contains the beat id of the item.


Example:
<ul data-bind="foreach: cart().items">
  <li>
    <span data-bind="text: qty + 'x'"></span>
    <span data-bind="html: title"></span>
    <span data-bind="text: '@ $' + price"></span>
    <a href="#" data-bind="click: $root.music.playMedia">Play</a>
  </li>
</ul>

Applied Discounts: cart().discounts Object

This property contains information about any discounts that are being actively applied to the order.

Total: cart().discounts.total String

This property contains the total discount amount applied to the order. It does not include the currency symbol.

Example:
Discounts Total: <span data-bind="text: '$' + cart().discounts.total"></span>

Discount Items: cart().discounts.items Array

This property contains an array of objects representing each discount that has been applied to the order.

cart().discounts.items[index] Object

Each array item is a discount object which contains specific information about the discount which has been applied.

Example:
Applied Discounts:
<ul data-bind="foreach: cart().discounts.items">
  <li><span data-bind="html: description"></span></li>
</ul>

Cart Subtotal: cart().sub_total String

This property contains the sub total price of the shopping cart (before any discounts are applied). It does not include the currency symbol.

Example:
Subtotal: <span data-bind="text: '$' + cart().sub_total"></span>

Cart Total: cart().total String

This property contains the total price of the shopping cart (after discounts have been applied). It does not include the currency symbol.

Example:
Total: <span data-bind="text: '$' + cart().total"></span>

Interface Methods

Add To Cart: cart.add Function

This method can be used on any event handler binding (i.e. "click") within the "foreach" binding of the licensing options for a beat object, such as nowplaying().licensing.options. When used, it will add the particular license in the foreach loop to the users shopping cart.

Example:
Purchase options for the currently playing beat:
<ul data-bind="foreach: nowplaying().licensing.options">
  <li>
    <strong data-bind="text: name"></strong> (<span data-bind="text: price"></span>)
    <a href="#" data-bind="click: $root.cart.add">More Info</a>
  </li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.cart.add. Learn more about binding contexts used in knockout.js.


Remove From Cart: cart.remove Function

This method can be used on any event handler binding (i.e. "click") within the "foreach" binding of a cart items array, such as cart().items. When used, it will remove the particular cart item in the foreach loop from the users shopping cart.

Example:
<ul data-bind="foreach: cart().items">
  <li>
    <strong data-bind="html: title"></strong> (<span data-bind="text: price"></span>)
    <a href="#" data-bind="click: $root.music.showLicense">License Info</a>
    <a href="#" data-bind="click: $root.cart.remove">Remove</a>
  </li>
</ul>

Important Note: Whenever you use this method inside of a control flow (i.e. "foreach") binding, you need to refer to the method like this: $root.cart.remove. Learn more about binding contexts used in knockout.js.


Show Cart: cart.show Function

This method can be used on any event handler binding (i.e. "click") to show an automatic dialog with the users shopping cart contents.

Example:
<a href="#" data-bind="click: cart.show">Show Cart</a>

Begin Checkout: cart.checkout Function

This method can be used on any event handler binding (i.e. "click") to send the user to the cart checkout screen. If the shopping cart is empty, then this command will be ignored.

Example:
<a href="#" data-bind="click: cart.checkout">Checkout Now</a>

Producers

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The producers data-bind accessor will give you access to any producer data that is associated with the app. For example, if any of the playlists that feed into the app are limited to specific producers, then information about those producer's profiles will be available in the app via this accessor. We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Producers List: producers.list() Array

This property is an array list of all the producers loaded by the app and their associated information. It can be used to build themed content around all of the producers who are associated with the application.


producers.list()[index] Object

Each array item is a producer object which contains the following properties about the producer.


Name: producers.list()[index].name String

This property contains the brand name of the producer. It is already html escaped by the framework.

Example:
<ul data-bind="foreach: producers.list()">
  <li>Producer Name: <span data-bind="html: name"></span></li>
</ul>

Tag Line: producers.list()[index].tagline String

This property contains the producer provided brand tagline (if applicable). It is already html escaped by the framework.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    Producer Name: <span data-bind="html: name"></span><br>
    Tagline: <span data-bind="html: tagline"></span>
  </li>
</ul>

Logo Banner: producers.list()[index].banner String

This property contains the URL to the location of the producers logo banner.

Example:
<ul data-bind="foreach: producers.list()">
  <li><img data-bind="attr: { src: banner, title: name }" /></li>
</ul>

Logo Thumbnail: producers.list()[index].banner_thumb String

This property contains the URL to the thumbnail version of the producers logo banner.

Example:
<ul data-bind="foreach: producers.list()">
  <li><img data-bind="attr: { src: banner_thumb, title: name }" /></li>
</ul>

Full Banners: producers.list()[index].banners Array

This property is an array which contains the url's to any custom full size promotional banners that the producer has uploaded.

producers.list()[index].banners[index] Object

Each array item is an object which contains information about the banner.


Title: producers.list()[index].banners[index].title String

This property contains the title of the banner (if provided by the producer).


Banner URL: producers.list()[index].banners[index].url String

This property contains the url to the banner.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: banners">
    <li><img data-bind="attr: { src: url, title: title }" /></li>
  </ul>
</div>

Bio / Description: producers.list()[index].description String

This property contains the producer provided bio or brand description. It is provided in html format by the framework.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <h4 data-bind="html: name"></h4>
    <div data-bind="html: description"></div>
  </li>
</ul>

Total Beats: producers.list()[index].total_beats Integer

This property contains the total amount of beats which are published and available for licensing in the producer's catalog.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span>:
    <span data-bind="text: total_beats + ' Beats'"></span>
  </li>
</ul>

Total Discounts: producers.list()[index].total_discounts Integer

This property contains the total amount of public facing discounts/offers which are available through the producer.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span>:
    <span data-bind="text: total_discounts + ' Discounts'"></span>
  </li>
</ul>

Total Trackouts: producers.list()[index].total_trackouts Integer

This property contains the total amount of beats in the producer's catalog which have trackout delivery options built-in.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span>:
    <span data-bind="text: total_trackouts + ' Trackouts'"></span>
  </li>
</ul>

Chart Rank: producers.list()[index].chart_rank Integer

This property contains the rank of the producer's highest ranking beat from the main Beat Brokerz chart.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span> -  
    <span data-bind="text: 'Top Ranked Beat: #' + chart_rank"></span>
  </li>
</ul>

Producer Rank: producers.list()[index].producer_rank Integer

This property contains the rank of the producer in the Beat Brokerz marketplace.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span> -  
    <span data-bind="text: 'Producer Rank: #' + producer_rank"></span>
  </li>
</ul>

Discounts: producers.list()[index].discounts Array

This property is an array of discount objects which represent the public facing discounts/offers available by the producer.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: discounts">
    <li>Special Offer: <span data-bind="html: name"></span></li>
  </ul>
</div>

Social Links: producers.list()[index].sociallinks Array

This property is an array of social connections available for the producer.


producers.list()[index].sociallinks[index] Object

Each array item is an object which contains information about the social connection.


Title: producers.list()[index].sociallinks[index].title String

This property contains the title of the social connection.


Link: producers.list()[index].sociallinks[index].url String

This property contains the url to the social page associated with the connection.


Class: producers.list()[index].sociallinks[index].icon String

This property contains a value which can be used as an id or class name to the connection for theming purposes.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: sociallinks">
    <li><a data-bind="attr: { href: url }, text: title, css: icon"></a></li>
  </ul>
</div>

Badges: producers.list()[index].badges Array

This property contains an array of achievement badges which have been earned by the producer.

producers.list()[index].badges[index] Object

Each array item is an object which contains information about the award/achievement.


Name: producers.list()[index].badges[index].name String

This property contains the name of the achievement.


Image: producers.list()[index].badges[index].image String

This property contains the url to the badge image.


Description: producers.list()[index].badges[index].description String

This property contains a description of the achievement.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: badges">
    <li>
      <h4 data-bind="text: name"></h4>
      <img data-bind="attr: { src: image }" />
      <p data-bind="text: description"></p>
    </li>
  </ul>
</div>

Average Vote: producers.list()[index].avg_vote String

This property contains the average overall rating given to all of the producer's combined catalog beats.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span> -  
    <span data-bind="text: 'Average Rating: ' + avg_vote"></span>
  </li>
</ul>

Producer ID: producers.list()[index].uid String

This property contains the unique producer id.


Producer Info (by ID): producers.byId()[id] Object

This property will give you access to a specific producer object by using the producer id as a key. It is most useful to access information for a producer while inside of a different context.

Example:
<div data-bind="foreach: music.playlistKeys()">
  <!-- ko with: $root.music.playlists[$data] -->
  <div data-bind="if: producers.length">
    <h4>Featured Producers</h4>
    <ul data-bind="foreach: producers">
      <!-- ko with: $root.producers.byId()[$data] -->
      <li><span data-bind="text: name"></span></li>
      <!-- /ko -->
    </ul>
  </div>
  <!-- /ko -->
</div>

In the example above, we are cycling through each of the playlists in the app, and then using the "with" binding to switch to the context of that playlist. We then use an "if" binding to check if the playlist has any producers associated with it, and if it does, we cycle through them with another "foreach" binding. While cycling through each of the producer id's associated with the playlist, we use yet another "with" binding to switch into the context of that particular producer in order to display their name.

Discounts

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The discounts data-bind accessor will give you access to any discount data that is associated with the app. For example, if there are any producers that are associated with the app, then any discounts that are available through those producers will have data available through this accessor. We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


Discounts List: discounts.list() Array

This property is an array list of any known discounts made available by the producers that are associated with the app. It can be used to build themed content around all of the discounts in the application.


discounts.list()[index] Object

Each array item is a discount object which contains the following properties about the discount.


Name: discounts.list()[index].name String

This property contains the headline name of the discount as provided by the producer. It is provided by the framework in html format.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>Discount Name: <strong data-bind="html: name"></strong></li>
</ul>

Description: discounts.list()[index].description String

This property contains the benefit description of the discount as provided by the producer. It is provided by the framework in html format.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong>
    <p data-bind="html: description"></p>
  </li>
</ul>

How It Works: discounts.list()[index].sys_description String

This property contains the system generated description of exactly how to qualify for the discount. It is provided by the framework in html format.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong>
    <div data-bind="html: sys_description"></div>
  </li>
</ul>

Producer Name: discounts.list()[index].producer String

This property contains the name of the producer who is offering the discount. It is provided by the framework in html format.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong> by
    <span data-bind="html: producer"></span>
  </li>
</ul>

Producer Banner: discounts.list()[index].producer_banner String

This property contains the url to the producer's logo banner.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong><br>
    <img data-bind="attr: { src: producer_banner }" />
  </li>
</ul>

Limitations: discounts.list()[index].limitations String

This property contains any special limitations to the discount (such as specific licenses that it applies to).

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong><br>
    <p data-bind="html: description"></p>
    <div data-bind="html: sys_description"></div>
    <!-- ko if: limitations -->
    Limitations: <span data-bind="html: limitations"></span>
    <!-- /ko -->
  </li>
</ul>

Cumulative: discounts.list()[index].cumulative Boolean

This property contains a boolean value (true/false) which indicates whether the discount is cumulative. When a discount is cumulative, that means that it can be combined with other cumulative discounts at the same time. Otherwise, discounts are exclusive (which means that after it's qualified, other discounts will not apply).

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong><br>
    <!-- ko if: cumulative -->
    <strong>This discount can be combined with other discounts!</strong>
    <!-- /ko -->
  </li>
</ul>

Type: discounts.list()[index].type String

This property contains a value which indicates what type of discount this is. The possible values are:

  • 1 = The discount is for free items
  • 2 = The discount is for a percentage off
  • 3 = The discount is for a fixed amount off
Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong><br>

    <!-- ko if: type == 1 -->
    This discount is for free items!
    <!-- /ko -->

    <!-- ko if: type == 2 -->
    This discount is for a percentage off!
    <!-- /ko -->

    <!-- ko if: type == 3 -->
    This discount is for a fixed amount off!
    <!-- /ko -->

  </li>
</ul>

Amount: discounts.list()[index].amount String

This property contains the amount of the discount. This may be a fixed cost, percentage off, or number of free items. The value it represents depends on the discount type as expressed by the type property.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong><br>
    This discount is for:
    <!-- ko if: type == 1 -->
      <em data-bind="text: amount"></em> free items!
    <!-- /ko -->

    <!-- ko if: type == 2 -->
      <em data-bind="text: parseInt(amount * 100)"></em> percent off!
    <!-- /ko -->

    <!-- ko if: type == 3 -->
      <em data-bind="text: '$' + amount"></em> off your purchase!
    <!-- /ko -->

   </li>
</ul>

Producer ID: discounts.list()[index].uid String

This property contains the producer id for which the discount applies.

Example:
<ul data-bind="foreach: discounts.list()">
  <li>
    Discount Name: <strong data-bind="html: name"></strong><br>
    <!-- ko with: $root.producers.byId()[uid] -->
    <em data-bind="text: total_beats"></em> total beats available by this producer!
    <!-- /ko -->
   </li>
</ul>

Discount ID: discounts.list()[index].id String

This property contains the unique id assigned to the discount.


Discount Info (by ID): discounts.byId()[id] Object

This property will give you access to a specific discount object by using the discount id as a key. It is most useful to access information about a discount while inside of a different context.

General App

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The app data-bind accessor provides access to general app settings and a few other application related functions. We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!


App Settings: app.settings Object

This property is an object which contains information about the flex app.


App Name: app.settings.app_name String

This property contains the name of the application as specified by the person who created the app. It is provided by the framework in html format.

Example:
App Name: <span data-bind="html: app.settings.app_name"></span>

App ID: app.settings.app_id String

This property contains the unique id of the flex app.

Example:
Authorized Store: #<span data-bind="html: app.settings.app_id"></span>

Boot Mode: app.settings.bootmode String

This property contains a value which indicates the mode in which the app was booted. The possible values are:

  • closed : Fullscreen is available but not launched by default.
  • phone : Fullscreen is available and auto-opened on mobile phones.
  • mobile : Fullscreen is available and auto-opened on mobile devices.
  • open : Fullscreen is available and auto-opened on all devices.
  • native : Fullscreen is mandatory on all devices.
  • disabled : Fullscreen is disabled and is not available.

Example:
<!-- ko if: app.settings.bootmode != 'disabled' -->
  <a href="#" data-bind="click: app.fullScreen">Launch Fullscreen</a>
<!-- /ko -->

Social Sites: app.settings.social Object

This property is an object that contains links to social sites provided by the app owner.

Example:
<!-- ko with: app.settings.social -->

  <!-- ko if: facebook -->
    <a data-bind="attr: { href: facebook }">Facebook</a>
  <!-- /ko -->

  <!-- ko if: twitter -->
    <a data-bind="attr: { href: twitter }">Twitter</a>
  <!-- /ko -->

  <!-- ko if: youtube -->
    <a data-bind="attr: { href: youtube }">YouTube</a>
  <!-- /ko -->

  <!-- ko if: google -->
    <a data-bind="attr: { href: google }">Google</a>
  <!-- /ko -->

<!-- /ko -->

App Background: app.settings.appBG Object

This property is an object that contains information about the app owner's custom background.


Image URL: app.settings.appBG.src String

This property contains the url to the custom background provided by the app owner. If the app owner hasn't uploaded a custom background, a default one is provided.


Width: app.settings.appBG.width String

This property contains the width of the custom background.


Height: app.settings.appBG.height String

This property contains the height of the custom background.


Aspect: app.settings.appBG.aspect String

This property contains a value which indicates the ratio of (width / height) for the custom background.


Interface Methods

Go Fullscreen: app.fullScreen Function

This method can be used on any event handler binding (i.e. "click") to send the user into the fullscreen mode of the app. If the fullscreen mode of the app is disabled, then this command will be ignored.

Example:
<!-- ko if: app.settings.bootmode != 'disabled' -->
  <a href="#" data-bind="click: app.fullScreen">Go Fullscreen</a>
<!-- /ko -->

In the example above, we use a containerless "if" binding to wrap the fullscreen link. This way, the go fullscreen link will only show if the app settings are set to allow the fullscreen mode to open.

Extras: Icons & CSS

The flex framework comes with a few design extras that you are free to use in your pages that implement the framework.

Icons

Flex includes its own custom set of font awesome icons that it uses for the fullscreen mode and other internal interfaces. In order to avoid collision with any other icon libraries that you may be loading on your page, the flex icons are available via the fwicon-{icon} css class. The following icons are available:

address-book
search
mail
mail-alt
star
star-empty
star-half
star-half-alt
video
videocam
picture
camera
ok
cancel
plus
minus
help-circled
info
home
attach
lock
lock-open
lock-open-alt
eye
eye-off
tag
tags
thumbs-up-alt
thumbs-down-alt
download
upload
download-cloud
upload-cloud
code
export
pencil
chat
attention-alt
attention
attention-circled
location
trash-alt
doc-inv
folder
folder-open
box
rss
phone-squared
cog
cog-alt
basket
calendar
mic
mute
volume-off
volume-down
volume-up
headphones
clock
down-circled
up-circled
left-circled
right-circled
down-dir
up-dir
left-dir
right-dir
down-open
left-open
right-open
up-open
left-circled2
right-circled2
arrows-cw
play
stop
pause
to-end
to-end-alt
to-start
to-start-alt
fast-fw
fast-bw
eject
signal
award
desktop
spin2
tablet
mobile
globe
cloud
flash
align-justify
list
list-bullet
briefcase
ellipsis
ellipsis-vert
off
barcode
book
check
check-empty
circle
circle-empty
dot-circled
asterisk
ticket
credit-card
magic
money-alt
hammer
spinner
shield
bullseye
android
apple
css3
facebook
facebook-squared
gplus-squared
gplus
html5
instagramm
linkedin-squared
linkedin
pinterest-circled
pinterest-squared
twitter-squared
twitter
youtube
youtube-squared
youtube-play
note
user
users
link
tag-alt
bookmark
bookmarks
flag
reply
forward
alert
trash
book-open
shareable
basket-alt
record
erase
chart-line
graduation-cap
ticket-alt
key
gauge
traffic-cone
paypal
block
resize-full
resize-small-alt
award-alt
chart-pie
tag-alt-2
cd
dollar
money
isight
shop
podcast
itunes
soundcloud
music
gift
fire
chart
filter
laptop