Use this example application to integrate with the CloudBees platform and test out feature management. After integrating, watch the application display change in response to any updates you make to flag values in the platform.
In the example application, the ROX package is already set up, and feature flags are already coded in.
Your SDK key is a unique environment identifier. The SDK key is displayed in the SDK installation instructions in the platform UI. To successfully install the SDK, you must copy the SDK key for that environment into your application at the Rox setup call, save the file, and run the application.
To save your SDK key in the example application:
-
Go to Feature management > Installation in the platform UI.
-
Select an environment (or create a new one).
-
Select the appropriate SDK.
-
Copy the environment-specific SDK key located within the
Rox.setup
call.Table 1. Location of SDK key placeholder in the Angular app Example app repository File path Line number Line src/app/app.component.ts
21
sdkKey = '<YOUR-SDK-KEY>'
-
Replace the example app placeholder (
<YOUR-SDK-KEY>
) with your copied key. -
Save the file in the repository.
The SDK key is generated for your environment, and copied into the example application. To learn more, refer to the SDK installation instructions in the platform UI or in the documentation.
After saving your SDK key in the example application, run the example application.
Use your preferred package manager and run in the terminal:
ng serve
Then go to http://localhost:4200
to display the running application.
Tip
|
After you have the example application running, select TEST INTEGRATION in Step 5 of the SDK installation in the platform UI to check if your integration is successful. |
Now that your application is running, go to your environment in Feature management to display the flags available in the example application:
Flag name | Flag type | Description |
---|---|---|
|
Boolean |
Turns the message on or off. |
|
String |
Sets the message text. |
|
Number |
Sets the font size in pixels.
The flag value has the following variations: |
|
String |
Sets the font color. The flag value has the following variations: |
Note
|
If no flags are displayed, check that the environment-specific SDK key is correctly added to the example application. |
To update flags in the platform UI:
-
Select Feature management from the left pane.
-
Select the vertical ellipsis icon next to the flag you want to configure.
-
Select Configure.
-
Select the Environment you used for copying the SDK key.
-
Update a flag value and save your changes.
-
Switch the Configuration status to On.
The updated flag value is soon reflected in the display of the application. For more information on setting flag values, refer to the flag configuration documentation.
Note
|
This sample application has been generated with Angular CLI version 17.3.8.
Run |