General App

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.