Overview
What is a Connected App?#
Connected Apps let you build custom UI components that run inside the Facilio platform using Vue.js (recommended) or any web technology. Your app runs in a secure iframe (web) or webview (mobile) and communicates with Facilio through the Apps SDK — giving you full access to platform data, user context, and real-time events with SAML-based SSO handled automatically.
Connected Apps are available across all Facilio apps — Maintenance, Vendor, Requester, Client, and Tenant — with select widget types also supporting mobile.
What you can build#
- Custom record pages — replace default create/edit forms or add summary tabs
- Interactive dashboards — embed charts, maps, or third-party visualizations
- Utility panels — topbar panels, form sidebars, dialers
- External integrations — connect CRM, ticketing, telephony, or any third-party system
- Background automation — form field validation, auto-fill, computed fields
How it works#
┌──────────────────────────────────────────────┐│ Facilio Platform ││ ││ ┌──────────────┐ ┌────────────────────┐ ││ │ Your App │◄──►│ Facilio Apps SDK │ ││ │(iframe/webview)│ │ (postMessage) │ ││ └──────────────┘ └────────────────────┘ ││ │ ││ ┌─────────┴──────────┐ ││ │ │ ││ Facilio API Platform UI ││ (module records) (navigation, ││ dialogs, ││ forms) │└──────────────────────────────────────────────┘- Your app is hosted on any web server and loaded inside Facilio as an iframe (web) or webview (mobile)
- The SDK establishes a secure postMessage channel between your app and the platform
- Through the SDK you can read/write data, listen to events, control the UI, and call external APIs
Widget types#
Each Connected App is configured as a widget type that determines where it appears in the Facilio UI.
| Widget | Placement | Apps | Mobile |
|---|---|---|---|
| Web Tab | Full-page tab in the navigation | All | Yes |
| Record Summary Tab | Tab inside a record's summary page | All | Yes |
| Create Record Page | Replaces the default create form | All | Yes |
| Edit Record Page | Replaces the default edit form | All | Yes |
| Related List | Related list section in a record page | All | Yes |
| Dashboard Widget | Widget inside a dashboard | All | Yes |
| Custom Button | Dialog triggered by a button click | All | Yes |
| PDF Template | Custom PDF reports for any module (mobile: download via Custom Button → Open PDF) | All | Download only |
| Topbar | Icon in the top navigation bar | Maintenance | No |
| Dialer | Floating popup (bottom-right) | All | No |
| Form - Sidebar | Right side of a form page | All | No |
| Form - Background | Hidden (runs in background) | All | No |
"All" = Maintenance, Vendor, Requester, Client, Tenant
Single widget limits
Create Record Page and Edit Record Page — one per module per account. Topbar and Dialer — one per account. Whichever loads first is used; multiple instances are not supported (e.g., you cannot add two dialers per account).
Quick start#
1. Include the SDK and Vue.js
<!DOCTYPE html><html><head> <script type="text/javascript" src="https://static.facilio.com/apps-sdk/latest/facilio_apps_sdk.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body> <div id="app"> <p v-if="loading">Loading...</p> <div v-else> <h2>Hello, {{ user.name }}</h2> <p>Organization: {{ org.domain }}</p> </div> </div> <script src="app.js"></script></body></html>2. Initialize the SDK in a Vue instance
var app = new Vue({ el: '#app', data: { loading: true, user: {}, org: {} }, created() { window.facilioApp = FacilioAppSDK.init(); window.facilioApp.on('app.loaded', (data) => { this.user = window.facilioApp.getCurrentUser(); this.org = window.facilioApp.getCurrentOrg(); this.loading = false; }); }});3. Read and write data
methods: { async fetchWorkOrders() { const { list } = await window.facilioApp.api.fetchAll('workorder', { viewName: 'all', perPage: 10 }); this.workorders = list; }, async createWorkOrder() { await window.facilioApp.api.createRecord('workorder', { data: { subject: 'New task', siteId: 123, dueDate: new Date('2025-04-01').getTime() } }); }}4. Interact with the platform UI
methods: { showNotification() { window.facilioApp.interface.notify({ title: 'Success', message: 'Record saved', type: 'success', duration: 3000 }); }, openRecord(id) { window.facilioApp.interface.openSummary({ module: 'workorder', id }); }}For a step-by-step walkthrough, see the Getting Started guide.
SDK reference#
| Category | Methods |
|---|---|
| Initialization | FacilioAppSDK.init(), FacilioAppSDK.initSync() |
| Core | getWidget(), getContext(), getCurrentUser(), getCurrentOrg(), isExportMode(), isMobile() |
| Events | on(), off(), has() — subscribe to app.loaded, app.destroyed, form.changed, form.{field}.changed, db.filters.changed, dialer.active/inactive, topbar.active/inactive, navigation.change (Dialer/Topbar) |
| Data API | api.createRecord(), api.updateRecord(), api.fetchRecord(), api.fetchAll(), api.deleteRecord(), api.uploadFile() |
| Requests | request.invokeConnectorAPI(), request.invokeExternalAPI(), request.invokeFacilioFunction() |
| Variables | variables.set(), variables.get(), variables.delete() |
| Interface | interface.navigateTo(), interface.openSummary(), interface.openListView(), interface.openForm(), interface.getCurrentPage() (web), interface.openQRScanner() (mobile), interface.fullscreen() (web), interface.trigger(), interface.notify(), interface.openURL(), interface.triggerDownload() |
| Live Events | liveevent.subscribeUserEvent(), liveevent.subscribeOrgEvent(), liveevent.unsubscribe() |
| Utilities | common.toBase64() |
| Exporting | exportAsPDF(), exportAsImage() (via Facilio Script) |
Explore the full API in the JavaScript SDK reference.
Build with AI#
Use AI tools like ChatGPT, Claude, or Lovable to generate Connected Apps. Provide this URL as context:
https://facilio.com/developers/docs/connected-apps/llms-full.txtSee Building with AI Tools for examples and prompts.