Skip to main content

Form - Sidebar


The widget is displayed on the right side of the form page.


FormSidebar

Triggers#

FunctionDescriptionExample
setValueSets the form field value to the given valueconst fieldValue = {
fieldName: ‘name’,
value: "TestName" //value that is set from connectedapp
};

app.interface.trigger(‘setValue’, fieldValue);
getValueReturns the form field value to the given valueapp.interface.trigger(‘getValue’, {fieldName: ‘name’})
.then(data => {
console.log(‘field value: ’, data);
});
getFormDataGets all the form field dataapp.interface.trigger(‘getFormData’)
.then(formData => {
console.log(‘form data: ’, formData);
});
getFormMetareturns form meta json including list of fieldsapp.interface.trigger(‘getFormMeta’)
.then(formMeta => {
console.log(‘form meta: ’, formMeta);
});
setSubFormDataSets the subform data from connected appconst subformData = {
subFormId: 1234,
subFormValue: [
{name: ‘subform record 1’},
{name: ‘subform record 2’},
{name: ‘subform record 3’}
]
};

app.interface.trigger(‘setSubFormData’, subformData);

getCurrentRecordreturns the record object for the current recordapp.interface.trigger(‘getCurrentRecord’)
.then(record => {
console.log(‘current record details: ’, record);
});

Events#

EventDescriptionExample
form.changedThis event will be triggered whenever any form field values change.app.on(‘form.changed’, (formData) => {
console.log(‘form data changed’, formData);
});
form.{fieldName}.changedThis event will be triggered whenever particular field value changedapp.on(‘form.{fieldName}.changed, (fieldValue) => {
console.log(‘field value changed’, fieldValue);
});

Overall Example Usecase : PO LineItems#


Usecase: To display the existing PO linetimes in the PO edit page when the order needs to be changed.


created(){        window.app = FacilioAppSDK.init();}init(){    window.app.on("app.loaded", (data) => {    if (data) {        console.log(data);    }    });    window.app.interface.trigger("getValue", { fieldName: 'parentpo' }).then((parentpo) => {    if (parentpo) {        this.parentPoId = parentpo.id        this.getPoLineItems(this.parentPoId) //calling getPOLineItems function    }    })}methods:{        getPoLineItems(id) {
        let params = {        method: "GET",        withCount: true,        viewName: 'all',        includeParentFilter: true,        filters: `{"purchaseorder":{"operatorId":36,"value":["${id}"]}}`        };
        let { list, error, meta } = await window.facilioApp.api.fetchAll('custom_purchaseorderlineitems',params);
            if (list && list.moduleDatas) {
            this.getPoLineItemsData = list.moduleDatas;            this.isLoading = false;
            }
        .catch((error) => {            console.log("Error occured")            this.isLoading=false;        });    },}
On This Topic