The goal of this lab is route a subset of the microblog’s audience to experience one value of a feature flag, while the rest of the users will see a separate value. The intended sub-group will be created in the CloudBees Feature Management interface and defined by properties in code, and then communicated to the CloudBees Feature Management dashboard through the setup function in the flags.js file. This lab will implement logic to display the sidebar only for logged in, Beta Users.
Allow flags.js to call isLoggedIn and betaAccess functions. Import store and betaAccess from their respective definition files. Starting on Line 2, include the following import calls:
import store from '../store'
import { betaAccess } from './users'
The isLoggedIn and betaAccess boolean functions have to be communicated to the CloudBees Feature Management dashboard. To accomplish this, set up a setCustomBooleanProperty call for each of the functions. Before the Rox.register line, add the following lines:
Rox.setCustomBooleanProperty('isLoggedIn', store.getters.isLoggedIn)
Rox.setCustomBooleanProperty('hasBetaAccess', betaAccess())
Review your edits with updated code below
Click here to expand
import Rox from 'rox-browser'
import store from '../store'
import { betaAccess } from './users'
export const Flags =
{
sidebar: new Rox.Flag(false),
title: new Rox.Flag(false)
}
export const configurationFetchedHandler = fetcherResults => {
console.log('The configuration status is: ' + fetcherResults.fetcherStatus)
if (fetcherResults.hasChanges && fetcherResults.fetcherStatus === 'APPLIED_FROM_NETWORK') {
window.location.reload(false)
} else if (fetcherResults.fetcherStatus === 'ERROR_FETCH_FAILED') {
console.log('Error occured! Details are: ' + fetcherResults.errorDetails)
}
}
async function initCloudBees () {
const options = {
configurationFetchedHandler: configurationFetchedHandler
}
Rox.setCustomBooleanProperty('isLoggedIn', store.getters.isLoggedIn)
Rox.setCustomBooleanProperty('hasBetaAccess', betaAccess())
Rox.register('default', Flags)
await Rox.setup(process.env.VUE_APP_CLOUDBEES_KEY, options)
}
initCloudBees().then(function () {
console.log('Done loading CloudBees Feature Management')
})
5. Create a commit message (e.g. “Added setCustomBooleanProperty”). Commit changes directly to the development branch. Open the new deployment URL, so that the properties can be created to the dashboard.
A microblog user is considered part of the BetaUsers group when both of the following conditions are met:
Once your BetaUsers New Target Group definition looks similar to screenshot below click Create Group button so it can be used in experiments.
Congratulations! You have finished Lab 4!