JavaScript SSR API (4.9)

The Rox object is the main class to be used when registering your application’s feature flags with CloudBees Feature Management. Simply define a set of Flag(), Configuration(), and Variant() objects, and supply these to Rox.register() to connect them with your application. Once this is done, provide your app key (from the CloudBees Feature Management dashboard) and configured options, and your feature flags are ready to use!

Example

To use the Rox object, you’ll first need to specify a feature flag container. This defines a set of Flag, Configuration, and Variant objects that can be used to control the features of your application. Once the flags have been defined, simply call the setup with the correct API key and options set.

Registering a container

import {Configuration, Flag, Variant, Rox} from 'rox-ssr';

// create a flags and configuration container should usualy be in a different module|file
const DemoContainer = {
 sayHello: new Flag(),
 flagA: new Flag(),
 colorsVariant: new Variant('red', ['green', 'blue']),
 textColor: new Configuration('black')
};

// register the container, this lets {PRODUCT} knows about the flags and they can be configured in the dashboard
Rox.register('DemoApp', DemoContainer);▼

Classes

Flag

Creates a new Flag (default: false).

Example

To use the Flag object, declare it within a flag container:

displayWelcome: new Flag();
// requireCaptcha flag default value is set to true
requireCaptcha: new Flag(true);▼

Constructor

new Flag(defaultValue)▼

Parameter Type Description

Parameter	Type	Description
`defaultValue`	`boolean:= false`	Initial state of the flag

defaultValue

boolean:= false

Initial state of the flag

Return Value

none

name

Return Value

Type :string - returns the name of this flag

isEnabled()

Return Value

Type :boolean - returns true when the flag is enabled

isEnabled(context):boolean

Parameter Type Description

Parameter	Type	Description
`context`	`Object`	object to be merged with the global context, the context is used when calculating the custom properties

context

Object

object to be merged with the global context, the context is used when calculating the custom properties

Return Value

Type :boolean - Returns true when the flag is enabled

Variant

Variant is used to create and manage feature flags that determine different predefined values.

Example

The following code constructs some simple Variant objects, which can be used to have a flag with values more complex than Rox.Flag.

colorsVariant: new Variant('red', ['green', 'blue', 'red']);
languageVariant: new Variant('english', ['english', 'spanish', 'german']);▼

Constructor

new Variant(defaultValue, options, name)▼

Sets the name, default value, and options for this variant instance.

Parameter Type Description

Parameter	Type	Description
`defaultValue`	`String`	The default value for this feature flag
`options`	`Array<String>`	The domain of possible values for this flag
`name`	`String`	The name of this flag

defaultValue

String

The default value for this feature flag

options

Array<String>

The domain of possible values for this flag

name

String

The name of this flag

Return Value

none

name

Return Value

Type :string - returns the name of this flag

getValue(context):string

Returns the current value of the Variant, accounting for value overrides.

Parameter Type Description

Parameter	Type	Description
`context`	`Object`	object to be merged with the global context, the context is used when calculating the custom

context

Object

object to be merged with the global context, the context is used when calculating the custom

Return Value

Type: string - the current value of this Variant object

Configuration

Configuration manages a remote configuration setting with a value of type string, boolean, or number. The constructor sets the default value for the remote configuration setting.

Example

The following code constructs a simple Configuration object.

welcomeMessageConfig: new Configuration('Welcome to my application');▼

Constructor

new Configuration(defaultValue)▼

Parameter Type Description

Parameter	Type	Description
`defaultValue`	`string	boolean

defaultValue

`string

boolean

name

Return Value

Type :string - returns the name of this flag

getValue(context):string | boolean | number

Parameter Type Description

Parameter	Type	Description
`context`	`Object`	object to be merged with the the global context, the context is used when calculating the custom properties

context

Object

object to be merged with the the global context, the context is used when calculating the custom properties

Return Value

Type : string | boolean | number - the remote configuration settings value

Rox.overrides

Rox.overrides is used to override a flag value on localhost, it is used by developers working on a feature in dev mode and shouldn’t be used in production builds.

It is the base API that is used to show the Flag update flow.

When you override an existing flag value using the Rox.overrides.setOverride method, the SDK will disregard existing configuration coming from the dashboard and will serialize the override on disk. This value will be loaded and override the flag right after you call Rox.setup. To clear the override from the cache you need to call the Rox.overrides.clearOverride method.

Rox.overrides.setOverride

Sets an override value on a specific flag, this function accepts two parameters flag name (flag name including namespace) and desired value (from type String).

This function also saves the override value on the local device disk, so it is "remembered" for when the next SDK is loaded to production.

Parameter Type Description

Parameter	Type	Description
flagName	String	full flag name including namespace, eg. `default.flagName`
value	String	The value of a flag, if this is a boolean flag the value should be `"true"`

flagName

String

full flag name including namespace, eg. default.flagName

value

String

The value of a flag, if this is a boolean flag the value should be "true"

Rox.overrides.clearOverride

Clears the override value from the flag (and the disk). After calling setOverride function the override value is serialized on the disk, this function is used to clear this override value.

Parameter Type Description

Parameter	Type	Description
flagName	String	full flag name including namespace, eg. `default.flagName`

flagName

String

full flag name including namespace, eg. default.flagName

Rox.overrides.hasOverride

Returns true if a flag has an override

Parameter Type Description

Parameter	Type	Description
flagName	String	full flag name including namespace, eg. `default.flagName`

flagName

String

full flag name including namespace, eg. default.flagName

Return Value Type : boolean - true if flag has an override in place

ROX Methods

setup

(static) setup(appKey, options [optional])▼

Initiate connection with Rox servers for the application identified by the application key. The registered containers will be synced and Rox entities will get the appropriate values.

Example

import {Rox} from 'rox-ssr';

Rox.register('', container);
const options = {
  version: '2.0.0'
};
Rox.setup('76aea5dd656a254d125c2a19',options);▼

Parameter Type Description

Parameter	Type	Description
`appKey`	`String`	application key as appears in Rox dashboard
`options`	`Object`	configuration object (optional)

appKey

String

application key as appears in Rox dashboard

options

Object

configuration object (optional)

Options

Parameter Type Description

Parameter	Type	Description
`version`	`String`	javascript client version
`configurationFetchedHandler`	`Function`	function that is called after data was synced from the CloudBees Feature Management backend
`debugLevel`	`String`	SDK verbosity level, accept 'verbose' level
`impressionHandler`	`Function`	function that is called every time a flag value gets computed and evaluated on the client
`platform`	`String`	custom platform; for cases where you want to override the default platform (`Browser`), for platforms like tizen, chromecast, etc.
`fetchIntervalInSec`	`Number`	configure the interval of fetch configuration call. The default value is 60s and the minimum is 30s

version

String

javascript client version

configurationFetchedHandler

Function

function that is called after data was synced from the CloudBees Feature Management backend

debugLevel

String

SDK verbosity level, accept 'verbose' level

impressionHandler

Function

function that is called every time a flag value gets computed and evaluated on the client

platform

String

custom platform; for cases where you want to override the default platform (Browser), for platforms like tizen, chromecast, etc.

fetchIntervalInSec

Number

configure the interval of fetch configuration call. The default value is 60s and the minimum is 30s

Return Value

Promise that gets executed once the configuration was retrieved from the CloudBees Feature Management backend servers.

register

(static) register(name, container)▼

Parameter Type Description

Parameter	Type	Description
`name`	`String`	Container name
`container`	`Object`	Object literal whose properties are Rox entities

name

String

Container name

container

Object

Object literal whose properties are Rox entities

setContext

(static) setContext(context)▼

Sets the global context of the SDK. The context is used when evaluating custom properties A typical global context will include static identifiers that do not change in the lifetime of the app.

Parameter Type Description

Parameter	Type	Description
`context`	`Object`	The context object

context

Object

The context object

import {Rox} from 'rox-ssr';

Rox.setContext({
  role: "api",
  hostname: "Hello Kiti"
})▼

setCustomStringProperty

(static) setCustomStringProperty(key, value)▼

Sets a custom property value that can be used when creating target groups.

Parameter Type Description

Parameter	Type	Description
`key`	`String`	The name of the custom property
`value`	`String` or `Function`	The value of the custom property, or a function that accepts context and retrieve a value (see example)

key

String

The name of the custom property

value

String or Function

The value of the custom property, or a function that accepts context and retrieve a value (see example)

import {Rox} from 'rox-ssr';

// retriving user email via a function and context
Rox.setCustomStringProperty("role", function(context){
   return context.role;
});▼

setCustomBooleanProperty

(static) setCustomBooleanProperty(key, value)▼

Sets a custom property value that can be used when creating target groups.

Parameter Type Description

Parameter	Type	Description
`key`	`String`	The name of the custom property
`value`	`Boolean` or `Function`	The value of the custom property, or a function that accepts context and retrieve a value (see example)

key

String

The name of the custom property

value

Boolean or Function

The value of the custom property, or a function that accepts context and retrieve a value (see example)

// Checking if the user is a tester via a function and ontext
Rox.setCustomBooleanProperty("tester", function(context){
   return context.user.isTester();
});▼

setCustomNumberProperty

(static) setCustomNumberProperty(key, value)▼

Sets a custom property value that can be used when creating target groups.

Parameter Type Description

Parameter	Type	Description
`key`	`String`	The name of the custom property
`value`	`Number` or `Function`	The value of the custom property, or a function that accepts context and retrieve a value (see example)

key

String

The name of the custom property

value

Number or Function

The value of the custom property, or a function that accepts context and retrieve a value (see example)

import {Rox} from 'rox-ssr';

// Calulating the age of the user via a function and context
Rox.setCustomNumberProperty("age", function(context){
   return context.user.getAge();
});▼

fetch

(static) fetch()▼

Fetch() pulls the latest configuration and flag values from CloudBees Feature Management servers.

showOverrides

(static) showOverrides(position [optional])▼

Rox.showOverrides opens the flag override view, providing a debug UI for the application’s set of feature flags.

Parameter Type Description

Parameter	Type	Description
`position`	`String`	position for the debug menu. The possible values are 'top left', 'top right', 'bottom left', 'bottom right'

position

String

position for the debug menu. The possible values are 'top left', 'top right', 'bottom left', 'bottom right'

Using the impressionHandler option

The impressionHandler function has three useful parameters which can help you decide on further actions.

Example

function impressionHandler(reporting, experiment, context) {}▼

configurationFetchedHandler

function configurationFetchedHandler(fetcherResult){}▼

configurationFetchedHandler function is called with one argument from type FetcherResults.

The FetcherResults instance has the following properties:

Table 1. FetcherResults properties
name	type	description
fetcherStatus	string	Indicates the source of the data that was applied Possible values include: `"APPLIED_FROM_EMBEDDED"` - data source is embedded inside the html see Embedded feature flags `"APPLIED_FROM_CACHE"`- data source is from local storage cache `"APPLIED_FROM_NETWORK"` - data source is network `"ERROR_FETCH_FAILED"` - data wasn’t received correctly
creationDate	Date	The time the data was created and signed on CloudBees Feature Management servers
hasChanges	Boolean	True if this data is not already available on the client
errorDetails	String	Any error information that is available should one occur