Skip to main content

Appearance

buildfire.appearance#

Appearance is used to modify the appearance of the plugin and sometimes the surrounding platform.

Note

Appearance settings will go back to default after user has logged in or logged out. If you need your plugin to always have the same outline make sure to implement onLogin and onLogout handlers and call the appearance methods inside of it.

Methods#

setHeaderVisibility()
#

buildfire.appearance.setHeaderVisibility(headerVisibility)

Used to hide and show the Header in the Control Panel

buildfire.appearance.setHeaderVisibility(true);

headerVisibility#

NameTypeRequiredDescriptionDefault
headerVisibilitybooleannoDetermines the header visibilityfalse

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

NameTypeDescription
errstringerror string, null when operation is successfull

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

NameTypeDescription
errstringerror string, null when operation is successfull

navbar.show()
#

buildfire.appearance.navbar.show(options, callback)

Forces showing the navbar on the app emulator or the mobile app.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

navbar.hide()
#

buildfire.appearance.navbar.hide()

Forces hiding the navbar on the app emulator or the mobile app.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

sideMenu.show()
#

buildfire.appearance.sideMenu.show(options, callback)

Forces showing the side menu icon on the app emulator or the mobile app.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

sideMenu.hide()
#

buildfire.appearance.sideMenu.hide()

Forces hiding the side menu icon on the app emulator or the mobile app.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

sideMenu.open()
#

buildfire.appearance.sideMenu.open(options, callback)

Opens the side menu on the app emulator or the mobile app.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

sideMenu.close()
#

buildfire.appearance.sideMenu.close()

Closes the side menu on the app emulator or the mobile app.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

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.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

fullScreenMode.disable()
#

buildfire.appearance.fullScreenMode.disable()

Disables the fullscreen mode. Plugin will go to the same state before fullScreenMode.enable was called.

note

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

NameTypeDescription
errstringerror string, null when operation is successfull

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

NameTypeDescription
errstringerror string, null when operation is successfull
appThemeobjectApp theme object with fonts, colors and app name
appTheme#
NameTypeDescription
appNamestringerror string, null when operation is successfull
colorsobjectApp theme object with all colors defined
fontIdstringId of the font, usually the same as font name
fontNamestringName of the font
appTheme.colors#
NameTypeDescription
backgroundColorstringMain background color
titleBarstringApp titlebar background color
titleBarTextAndIconsstringColor of text and icons on app titlebar
headerTextstringColor of text inside of header tags
bodyTextstringBody text color
iconsstringColor of icons
primaryThemestringPrimary color
successThemestringSuccess color
infoThemestringInfo color
warningThemestringWarning color
dangerThemestringDanger color
defaultThemestringDefault color
footerMenuBackgroundColorstringBackground color of footer menu
footerMenuIconColorstringColor 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.

note

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);
});
};