Skip to main content

Topbar

The Topbar widget appears as an icon in the top navigation bar of the Facilio interface. Clicking the icon opens a topbar panel. Use it for notifications, quick actions, or utility panels that users need quick access to from any page.


topBar

Availability#

AppsMobile
MaintenanceNo
Single widget per account

Only one Topbar widget is supported per account. Whichever loads first is used; multiple instances are not supported.

When to use#

  • Building a notification center or alert panel
  • Providing quick-action tools accessible from any page
  • Displaying real-time status information (help desk queue, pending approvals)
  • Embedding a mini utility (calculator, quick search, notes)

Triggers#

FunctionDescriptionExample
showShows the topbar menu icon in the nav bar. Hidden by default.window.facilioApp.interface.trigger('show');
hideHides the topbar menu icon from the nav barwindow.facilioApp.interface.trigger('hide');
showHeaderShows or hides the topbar panel headerwindow.facilioApp.interface.trigger('showHeader', true);
setUnseenCountSets the unseen/badge count on the topbar iconwindow.facilioApp.interface.trigger('setUnseenCount', 5);
setIconChanges the icon displayed in the topbar. Both iconGroup and icon must come from the fixed catalog — see Icons.window.facilioApp.interface.trigger('setIcon', { iconGroup: 'alert', icon: 'notification' });
setTitleSets the topbar panel titlewindow.facilioApp.interface.trigger('setTitle', { title: 'Notifications' });
resizeResizes the topbar panel heightwindow.facilioApp.interface.trigger('resize', { height: 400 });

setUnseenCount — Pass a number for the badge count. Pass 0 or omit to clear. Falsy values default to 0.

setIcon — Requires both iconGroup and icon. The icon group determines the icon set; icon is the icon name within that group. Call setIcon before show if you need to configure the icon before making it visible. See the Icons reference below for the most common iconGroup + icon pairs.

show / hide — The topbar menu icon is hidden by default. Call setIcon to configure the icon, then call show to make it visible in the nav bar. Use hide to hide the icon again.

showHeader — Pass true to show the header, false to hide it.

Icons#

setIcon takes { iconGroup, icon }. Both values come from a fixed catalog — invented names render as a blank/fallback icon. Below is the curated set most useful for a topbar button. The full catalog (1,400+ icons across 60+ groups) is published at icons.facilio.com/icons/iconsMap.json.

Use caseiconGroupicon
Notification bellalertnotification
Notification (filled, active state)alertnotification-filled
Multiple notificationsalertmultiple-notifications
Warning / attentionalerttriangle-warning
Critical alertalertcritical
Inbox / Mailcommunicationmail
Chatcommunicationchat-inprogress
Phone / Callcommunicationcall
AI assistant (copilot)ai-agentco-pilot
AI insightsai-agentinsights
Helpactionhelp
Infoactioninfo
Settingsactionsettings
Searchactionsearch
Homeactionhome
User profiledefaultprofile
Comment / chat bubbledefaultcomment
Calendar — todaytime-datetoday
Alarmtime-datealarm
Star / favoriteemojistar
// Notification bell, hidden by default until show() is calledwindow.facilioApp.interface.trigger('setIcon', { iconGroup: 'alert', icon: 'notification' });window.facilioApp.interface.trigger('show');
Need an icon not listed here?

Open iconsMap.json and find the group + icon name. Use the exact strings — they are case-sensitive and hyphenated.

Events#

EventDescriptionExample
topbar.activeFires when the topbar panel is openedapp.on('topbar.active', callback);
topbar.inactiveFires when the topbar panel is closedapp.on('topbar.inactive', callback);
navigation.changeFires when the app URL changes. Payload: { url } — current app URL.app.on('navigation.change', callback);
app.on('topbar.active', () => {  console.log('Panel opened — refresh data');  loadNotifications();});
app.on('topbar.inactive', () => {  console.log('Panel closed');});
app.on('navigation.change', ({ url }) => {  console.log('App navigated to:', url);});

Example — Notification panel with unseen count#

var app = new Vue({  el: '#app',  data: {    notifications: [],    unreadCount: 0,    subscribedToken: null  },  created() {    window.facilioApp = FacilioAppSDK.init();    window.facilioApp.on('app.loaded', async () => {      window.facilioApp.interface.trigger('setIcon', { iconGroup: 'alert', icon: 'notification' });      window.facilioApp.interface.trigger('show');  // Icon is hidden by default      await this.refreshNotifications();
      this.subscribedToken = await window.facilioApp.liveevent.subscribeUserEvent('new_notification');      window.facilioApp.on(this.subscribedToken, () => {        this.unreadCount++;        window.facilioApp.interface.trigger('setUnseenCount', this.unreadCount);      });    });
    window.facilioApp.on('topbar.active', async () => {      await this.refreshNotifications();      window.facilioApp.interface.trigger('setUnseenCount', 0);      this.unreadCount = 0;    });  },  methods: {    async refreshNotifications() {      try {        const { list } = await window.facilioApp.api.fetchAll('custom_notifications', {          viewName: 'all',          perPage: 20,          orderType: 'desc'        });        this.notifications = list || [];        this.unreadCount = this.notifications.filter(n => !n.isRead).length;        if (this.unreadCount > 0) {          window.facilioApp.interface.trigger('setUnseenCount', this.unreadCount);        }      } catch (error) {        console.error('Failed to load notifications:', error);      }    }  }});
On This Topic