Skip to main content

Form - Sidebar

The Form Sidebar widget renders on the right side of a form page. It provides a visible panel where you can display contextual information, summaries, or interactive elements while the user fills out the form. It has the same form triggers and events as the Form Background widget, plus a visible UI.


FormSidebar

Availability#

AppsMobile
Maintenance, Vendor, Requester, Client, TenantNo

When to use#

  • Showing contextual help or reference data while filling a form
  • Displaying a live preview or summary of the data being entered
  • Rendering related records (e.g., previous purchase orders for a vendor)
  • Building a lookup tool that populates form fields based on user selection

Triggers#

FunctionDescriptionExample
setValueSets a form field valuewindow.facilioApp.interface.trigger('setValue', { fieldName: 'name', value: 'Test' });
getValueGets a form field value (returns a Promise). Primitives (string, number): raw value. Lookup/picklist: { id: number }.window.facilioApp.interface.trigger('getValue', { fieldName: 'name' }).then(data => { ... });
getFormDataGets all form field data. Returns record-like object { subject, description, siteId, client, ... }.window.facilioApp.interface.trigger('getFormData').then(formData => { ... });
getFormMetaGets form metadata. Returns { id, name, displayName, sections, fields, moduleId }.window.facilioApp.interface.trigger('getFormMeta').then(formMeta => { ... });
setSubFormDataSets subform data from the connected appSee example below
getCurrentRecordGets the current record object (for edit forms). Returns the record directly (not wrapped).window.facilioApp.interface.trigger('getCurrentRecord').then(record => { ... });

setSubFormData example

const subformData = {  subFormId: 1234,  subFormValue: [    { name: 'subform record 1' },    { name: 'subform record 2' },    { name: 'subform record 3' }  ]};window.facilioApp.interface.trigger('setSubFormData', subformData);

Events#

EventDescriptionExample
form.changedFires whenever any form field value changesapp.on('form.changed', (payload) => { ... });
form.{fieldName}.changedFires when a specific field value changesapp.on('form.vendor.changed', (fieldValue) => { ... });

form.changed payload — { formData: { ... } }. formData has the same structure as getFormData — field names and values (primitives, lookups as { id }, picklists as { id }, etc.).

form.{fieldName}.changed payload — Always { value: ... }. Lookups/picklists: { value: { id: number } }. Other types (string, number, etc.): { value: rawValue } (e.g. { value: "Ex WO 1asdadad" }).

note

Replace {fieldName} with the actual field link name from your Facilio module.

app.on('form.changed', (payload) => {  const { formData } = payload;  // formData: { subject, description, siteId, client, ... }  console.log('Form data changed:', formData);});
app.on('form.vendor.changed', (fieldValue) => {  console.log('Vendor changed:', fieldValue);});

Example — PO Line Items sidebar#

Display existing purchase order line items in the sidebar when editing a PO.

const app = FacilioAppSDK.init();let parentPoId = null;
app.on('app.loaded', (data) => {  // Get the parent PO field from the form  window.facilioApp.interface.trigger('getValue', { fieldName: 'parentpo' })    .then((parentpo) => {      if (parentpo) {        parentPoId = parentpo.id;        loadPoLineItems(parentPoId);      }    });});
async function loadPoLineItems(poId) {  const container = document.getElementById('app');  container.innerHTML = '<div class="loader">Loading line items...</div>';
  try {    const params = {      viewName: 'all',      includeParentFilter: true,      filters: JSON.stringify({        purchaseorder: { operatorId: 36, value: [String(poId)] }      })    };
    const { list } = await app.api.fetchAll('custom_purchaseorderlineitems', params);
    if (!list || list.length === 0) {      container.innerHTML = '<p>This is a parent Purchase Order. No line items found.</p>';      return;    }
    container.innerHTML = list.map(item => `      <div class="line-item-card">        <strong>Property:</strong> ${item.data?.property?.name || '—'}<br/>        <strong>Description:</strong> ${item.name || '—'}<br/>        <strong>GL Code:</strong> ${item.data?.lookup?.data?.description || '—'}<br/>        <strong>Net Amount:</strong> $${item.data?.net || 0}      </div>    `).join('');  } catch (error) {    console.error('Failed to load PO line items:', error);    container.innerHTML = '<p class="error">Failed to load line items.</p>';  }}
On This Topic