Edit Record Page

The Edit Record Page widget replaces the default edit form for a module. Use it to build custom editing experiences — canvas editors, PDF builders, or forms with complex validation and conditional logic.

Availability

Apps	Mobile
Maintenance, Vendor, Requester, Client, Tenant	Yes

Single widget per module per account

Only one Edit Record Page widget is supported per module per account. Whichever loads first for that module is used; multiple instances for the same module are not supported.

When to use

• Building a custom edit layout for records that need a non-standard form
• Adding conditional field visibility or complex validation
• Embedding a canvas or visual editor for record editing
• Creating guided edit flows with multiple steps

Context

When the widget loads, app.getContext() returns { record, query } — record is the current edit record with all field values; query has URL params if any.

var app = new Vue({  el: '#app',  data: {    record: null,    subject: '',    description: ''  },  created() {    window.facilioApp = FacilioAppSDK.init();    window.facilioApp.on('app.loaded', (data) => {      const context = window.facilioApp.getContext();      this.record = context.record;      this.subject = this.record.subject || '';      this.description = this.record.description || '';    });  }});

Triggers

Function	Description	Example
save	Closes the widget and opens the record summary page (same as default system behavior). Pass the direct return value of api.updateRecord() — the response object { code, error, [moduleName]: updatedRecord }.	window.facilioApp.interface.trigger('save', response);
cancel	For the cancel button only. Closes the widget without saving.	window.facilioApp.interface.trigger('cancel');

Example — Custom edit form with validation

var app = new Vue({  el: '#app',  data: {    record: null,    subject: '',    description: '',    priority: ''  },  created() {    window.facilioApp = FacilioAppSDK.init();    window.facilioApp.on('app.loaded', (data) => {      const context = window.facilioApp.getContext();      this.record = context.record;      this.subject = this.record.subject || '';      this.description = this.record.description || '';      this.priority = this.record.priority?.id || '';    });  },  methods: {    async saveRecord() {      if (!this.subject.trim()) {        window.facilioApp.interface.notify({          message: 'Subject cannot be empty',          type: 'warning',          duration: 3000        });        return;      }
      try {        const response = await window.facilioApp.api.updateRecord('workorder', {          id: this.record.id,          data: {            subject: this.subject,            description: this.description          }        });
        window.facilioApp.interface.notify({          message: 'Record updated successfully',          type: 'success',          duration: 3000        });
        window.facilioApp.interface.trigger('save', response);      } catch (error) {        console.error('Update failed:', error);        window.facilioApp.interface.notify({          message: 'Failed to update record',          type: 'error',          duration: 4000        });      }    }  }});