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 topbarwindow.facilioApp.interface.trigger('setIcon', { iconGroup: 'default', 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.

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.

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: 'default', 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