Guidebooks
- Flex App Framework
- Legacy MP3 Players
- Seller Guidebook
- Buyer Handbook
- Stay in the loop. Subscribe to our mailing list.
- Need Help / Have Suggestions? Connect with our support group.
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 ID: app.settings.app_id
String
This property contains the unique id of the flex app.
Example: 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:
<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 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.
<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.