Related List
The Related List widget displays in the related list section of a record's summary page. Use it to show data from external systems, cross-module relationships, or custom visualizations linked to the current record.
Availability#
| Apps | Mobile |
|---|---|
| Maintenance, Vendor, Requester, Client, Tenant | Yes |
When to use#
- Displaying data from a third-party service (CRM contacts, tickets, invoices) linked to a Facilio record
- Showing cross-module data that standard related lists don't support
- Building custom list views with specialized layouts or interactions
- Embedding charts or summaries specific to the current record
Context#
When the widget loads, app.getContext() returns the parent record object. Use its id and other fields to fetch related data.
var app = new Vue({ el: '#app', data: { parentRecord: null }, created() { window.facilioApp = FacilioAppSDK.init(); window.facilioApp.on('app.loaded', (data) => { this.parentRecord = window.facilioApp.getContext(); this.loadRelatedData(this.parentRecord.id); }); }});Example — Displaying related invoices for an asset#
var app = new Vue({ el: '#app', data: { loading: true, parentRecord: null, invoices: [] }, created() { window.facilioApp = FacilioAppSDK.init(); window.facilioApp.on('app.loaded', async (data) => { this.parentRecord = window.facilioApp.getContext(); await this.loadInvoices(); }); }, methods: { async loadInvoices() { try { const { list } = await window.facilioApp.api.fetchAll('custom_invoices', { viewName: 'all', filters: JSON.stringify({ asset: { operatorId: 36, value: [String(this.parentRecord.id)] } }), includeParentFilter: true }); this.invoices = list || []; } catch (error) { console.error('Failed to load invoices:', error); } finally { this.loading = false; } }, openInvoice(id) { window.facilioApp.interface.openSummary({ module: 'custom_invoices', id }); } }});