Skip to main content

Custom Button Widget


Custom Buttons is a feature in Facilio where you can invoke certain actions to be performed upon click. That includes functions, connected app widgets and more.


customButton



customButton

Triggers#

FunctionDescriptionExample
hideHides the custom button dialogapp.interface.trigger(‘hide’);
resizeResizes the custom button dialog windowconst resizeOptions = {
width: ‘500px’,
height: ‘400px’,
top: ‘50px’
}
app.interface.trigger(‘resize’, resizeOptions);
reloadDataReloads summary page. This can be useful when the record data is updated from the connected app widget.app.interface.trigger(‘reloadData’);

Example Usecase : Invoice PDF#

<script type="text/javascript">var app = new Vue({    el: '#app',    data: {        currentUser: null,        photoUrl: '',        baseUrl: '',        vendorData: {},        invoiceData: {},        invoiceLineData: [],        tableData: [],        rec: {},        getPhotoUrl: null,        site: '',        counter: 1    },    mounted() {        window.facilioApp = FacilioAppSDK.init();        window.facilioApp.on("app.loaded", (data) => {            window.facilioApp.interface.trigger("resize", {                height: "1000px",                width: "900px",            });            this.currentUser = window.facilioApp.getCurrentUser();            this.invoiceData = data.context;            this.site = this.getSite(data?.context?.siteId);            this.vendorData = data.context.vendor_custom_vendorinvoices_1;            console.log(this.vendorData);            this.init();            this.getPhotoUrl = this.vendorData?.logo_vendorsUrl            let imageUrl = this.getPhotoUrl;            imageUrl = imageUrl?.replace("/api", "");            console.log(imageUrl);            if (imageUrl != "" && imageUrl != null) {                window.facilioApp.common.toBase64({                    url: imageUrl                }).then((data) => {                    this.getPhotoUrl = `${'data:image/png;base64'},${data}`                });                console.log(data);            }        });    },    methods: {        init() {            this.fetchData();            this.getInvoiceLineItem();        },        print() {            window.print();        },        fetchData() {            console.log(isEmpty(this.currentUser))        },        async getVendorData(id) {

        },        async getInvoiceLineItem() {            let params = {                viewName: "all",                filters: `{"invoice_custom_vendorinvoicelineitems_1":{"operatorId":36,"value":["${this.invoiceData.id}"]}}`,                includeParentFilter: true            };            let {                list,                error,                data            } = await window.facilioApp.api.fetchAll('custom_vendorinvoicelineitems', params);            this.invoiceLineData = list;            console.log(this.invoiceLineData);            list.forEach(data => {                let tableObj = {                    "ID": data.id,                    "workorder": data?.job_title_custom_vendorinvoicelineitems?.subject ? data?.job_title_custom_vendorinvoicelineitems?.subject : "--",                    "rate": data?.rate_custom_vendorinvoicelineitems ? data?.rate_custom_vendorinvoicelineitems : "--",                    "quantity": data?.quantity_custom_vendorinvoicelineitems ? data?.quantity_custom_vendorinvoicelineitems : "--",                    "subtotal": "$" + data?.sub_total_custom_vendorinvoicelineitems ? data?.sub_total_custom_vendorinvoicelineitems : "--",                }                let woDate = data?.execution_date_custom_vendorinvoicelineitems;                if (woDate != "" && woDate != null) {                    woDate = (new Date(woDate)).toDateString();                    tableObj.woExecutedDate = woDate;                } else {                    tableObj.woExecutedDate = "--";                }                this.tableData.push(tableObj)            })        },        async getSite(siteId) {            let params = {                viewName: 'all',                includeParentFilter: this.includeParentFilter,            }            let {                list,                error,                meta            } = await window.facilioApp.api.fetchAll('site', params)            if (error) {                let {                    message                } = error                this.$message.error(message || 'Error occured while fetching site')            } else {                this.siteData = list || []                for (let i = 0; i < this.siteData?.length; i++) {                    if (this.siteData[i]?.id == siteId) {                        this.site = this.siteData[i]?.name;                    } else {                        this.site = "--";                    }                }            }        },    },})</script>
On This Topic