Record Summary Tab
The Record Summary Tab widget adds a custom tab to a record's summary page. Use it to display additional information about a record — data from other modules, third-party services, or custom visualizations that complement the standard summary view.
Availability#
| Apps | Mobile |
|---|---|
| Maintenance, Vendor, Requester, Client, Tenant | Yes |
When to use#
- Showing data from external services (CRM, ticketing, analytics) for a specific record
- Displaying custom visualizations, charts, or reports tied to a record
- Adding computed or aggregated data that the standard summary doesn't show
- Building interactive record-level tools (e.g., an audit trail viewer)
Context#
When the widget loads, app.getContext() returns the current record object with all its field values.
var app = new Vue({ el: '#app', data: { currentRecord: null }, created() { window.facilioApp = FacilioAppSDK.init(); window.facilioApp.on('app.loaded', (data) => { this.currentRecord = window.facilioApp.getContext(); }); }});Triggers#
| Function | Description | Example |
|---|---|---|
| reloadData | Reloads the summary page (useful after updating the record) | window.facilioApp.interface.trigger('reloadData'); |
Example — Asset maintenance history tab#
var app = new Vue({ el: '#app', data: { loading: true, asset: null, workorders: [] }, created() { window.facilioApp = FacilioAppSDK.init(); window.facilioApp.on('app.loaded', async (data) => { this.asset = window.facilioApp.getContext(); await this.loadMaintenanceHistory(); }); }, methods: { async loadMaintenanceHistory() { try { const { list } = await window.facilioApp.api.fetchAll('workorder', { viewName: 'all', filters: JSON.stringify({ resource: { operatorId: 36, value: [String(this.asset.id)] } }), perPage: 50 }); this.workorders = list || []; } catch (error) { console.error('Failed to load maintenance history:', error); } finally { this.loading = false; } }, openWorkOrder(id) { window.facilioApp.interface.openSummary({ module: 'workorder', id }); } }});