buildfire.appearance
Appearance is used to modify the appearance of the plugin and sometimes the surrounding platform.
Methods
setHeaderVisibility()
buildfire.appearance.setHeaderVisibility(headerVisibility)
Used to hide and show the Header in the Control Panel
buildfire.appearance.setHeaderVisibility(true);
headerVisibility
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
headerVisibility | boolean | no | Determines the header visibility | false |
titlebar.show()
buildfire.appearance.titlebar.show(options, callback)
Forces showing the title bar on the app emulator or the mobile app.
buildfire.appearance.titlebar.show(null, (err) => {
if (err) return console.error(err);
console.log("Titlebar is visible");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after titlebar has been shown
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
titlebar.hide()
buildfire.appearance.titlebar.hide()
Forces hiding the title bar on the app emulator or the mobile app.
buildfire.appearance.titlebar.hide(null, (err) => {
if (err) return console.error(err);
console.log("Titlebar is hidden");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after titlebar has been hidden
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
titlebar.isVisible()
buildfire.appearance.titlebar.isVisible()
Use this method to check if titlebar is visible.
buildfire.appearance.titlebar.isVisible(null, (err, isVisible) => {
if (err) return console.error(err);
console.log(`Titlebar is ${isVisible ? 'visible' : 'invisible'}`);
});
options
Can be passed as null. This is reserved for future use
callback(err, isVisible)
Callback function after checking titlebar visibility
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
isVisible | boolean | Indicating if titlebar is visible |
navbar.show()
buildfire.appearance.navbar.show(options, callback)
Forces showing the navbar on the app emulator or the mobile app.
In order for this method to work, Navbar must be enabled on Control panel App Components > Navbar
This functionality is not available on plugin tester
buildfire.appearance.navbar.show(null, (err) => {
if (err) return console.error(err);
console.log("Navbar is visible");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after navbar has been shown
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
navbar.hide()
buildfire.appearance.navbar.hide()
Forces hiding the navbar on the app emulator or the mobile app.
This functionality is not available on plugin tester
buildfire.appearance.navbar.hide(null, (err) => {
if (err) return console.error(err);
console.log("Navbar is hidden");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after navbar has been hidden
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
sideMenu.show()
buildfire.appearance.sideMenu.show(options, callback)
Forces showing the side menu icon on the app emulator or the mobile app.
This functionality is not available on plugin tester
buildfire.appearance.sideMenu.show(null, (err) => {
if (err) return console.error(err);
console.log("Side menu icon is visible");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after side menu icon has been shown
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
sideMenu.hide()
buildfire.appearance.sideMenu.hide()
Forces hiding the side menu icon on the app emulator or the mobile app.
This functionality is not available on plugin tester
buildfire.appearance.sideMenu.hide(null, (err) => {
if (err) return console.error(err);
console.log("Side menu icon is hidden");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after side menu icon has been hidden
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
sideMenu.open()
buildfire.appearance.sideMenu.open(options, callback)
Opens the side menu on the app emulator or the mobile app.
This functionality is not available on plugin tester
buildfire.appearance.sideMenu.show(null, (err) => {
if (err) return console.error(err);
console.log("Side menu is opened");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after side menu has been opened
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
sideMenu.close()
buildfire.appearance.sideMenu.close()
Closes the side menu on the app emulator or the mobile app.
This functionality is not available on plugin tester
buildfire.appearance.sideMenu.close(null, (err) => {
if (err) return console.error(err);
console.log("Side menu is closed");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after side menu has been closed
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
fullScreenMode.enable()
buildfire.appearance.fullScreenMode.enable(options, callback)
Enables the fullscreen mode. This will hide the titlebar, navbar and menu icon if they are visible.
This functionality is not available on plugin tester
buildfire.appearance.fullScreenMode.enable(null, (err) => {
if (err) return console.error(err);
console.log("Fullscreen mode is enabled");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after fullscreen mode has been enabled
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
fullScreenMode.disable()
buildfire.appearance.fullScreenMode.disable()
Disables the fullscreen mode. Plugin will go to the same state before fullScreenMode.enable was called.
This functionality is not available on plugin tester
buildfire.appearance.fullScreenMode.disable(null, (err) => {
if (err) return console.error(err);
console.log("Fullscreen mode is disabled");
});
options
Can be passed as null. This is reserved for future use
callback(err)
Callback function after fullscreen mode has been disabled
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
getAppTheme()
buildfire.appearance.getAppTheme(callback)
Pulls the appTheme object
buildfire.appearance.getAppTheme((err, appTheme) => {
if (err) return console.error(err);
console.log(appTheme);
});
callback(err, appTheme)
Callback function after something is done
| Name | Type | Description |
|---|---|---|
err | string | error string, null when operation is successful |
appTheme | object | App theme object with fonts, colors and app name |
appTheme
| Name | Type | Description |
|---|---|---|
appName | string | error string, null when operation is successful |
colors | object | App theme object with all colors defined |
fontId | string | Id of the font, usually the same as font name |
fontName | string | Name of the font |
appTheme.colors
| Name | Type | Description |
|---|---|---|
backgroundColor | string | Main background color |
titleBar | string | App titlebar background color |
titleBarTextAndIcons | string | Color of text and icons on app titlebar |
headerText | string | Color of text inside of header tags |
bodyText | string | Body text color |
icons | string | Color of icons |
primaryTheme | string | Primary color |
successTheme | string | Success color |
infoTheme | string | Info color |
warningTheme | string | Warning color |
dangerTheme | string | Danger color |
defaultTheme | string | Default color |
footerMenuBackgroundColor | string | Background color of footer menu |
footerMenuIconColor | string | Color of icons on footer menu |
Example appTheme object
{
"appName": "test App",
"colors": {
"backgroundColor": "#0b0c0b",
"titleBar": "#09a3ee",
"titleBarTextAndIcons": "#ffffff",
"headerText": "#09a3ee",
"bodyText": "#3765c1",
"icons": "#09a3ee",
"primaryTheme": "#09a3ee",
"successTheme": "#14cb5d",
"infoTheme": "#69d5ff",
"warningTheme": "#faba41",
"dangerTheme": "#ed4b4b",
"defaultTheme": "#0677ae",
"footerMenuBackgroundColor": "#f05524",
"footerMenuIconColor": "#f19969"
},
"fontId": "Helvetica",
"fontName": "Helvetica"
}
onUpdate()
buildfire.appearance.onUpdate(callback, allowMultipleHandlers)
Allows you to pass a callback function that is called whenever the control updates appearance settings (appTheme) in the branding page. Use this method in the widget to be notified that the appearance has changed so you can reflect that change directly in the widget. Returns a cleanup function to clear the listener.
buildfire.appearance.onUpdate(function(appTheme){
console.log(`New appTheme: ${appTheme}`);
});
ready()
buildfire.appearance.ready()
Called when plugin content is fully loaded. Hides the buildfire spinner and makes the plugin immediately available.
triggerOnUpdate() - deprecated
buildfire.appearance.triggerOnUpdate()
It's possible that the appearance settings can change after the app has been loaded. If you wish to keep track of these changes, override the buildfire.appearance.triggerOnUpdate function with your own custom function. Within your custom function you can make an additional call to buildfire.appearance.getAppTheme and update the styling of your plugin as necessary.
It is recommended to use onUpdate() instead as the onUpdate will pass the appTheme itself and can subscribe multiple handlers to it
buildfire.appearance.triggerOnUpdate = () => {
buildfire.appearance.getAppTheme((err, appTheme) => {
if (err) return console.error(err);
console.log("New app theme", appTheme);
});
};