Skip to main content

Getting Started

This guide walks you through creating your first Connected App using Vue.js.

Prerequisites#

Before you begin, make sure you have:

  • Basic knowledge of HTML, CSS, JavaScript, and Vue.js
  • A web server to host your app (any static file server, or Vue CLI / Vite)
  • Access to a Facilio account with permissions to create Connected Apps
  • A modern browser (Chrome, Firefox, Edge, or Safari)

Step 1 — Create the project files#

Create a folder for your app with two files:

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>My First Connected App</title>  <script type="text/javascript"    src="https://static.facilio.com/apps-sdk/latest/facilio_apps_sdk.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <link rel="stylesheet" href="style.css" /></head><body>  <div id="app">    <div v-if="loading" class="loading">Loading...</div>    <div v-else class="card">      <h2>Connected App is running</h2>      <p><strong>User:</strong> {{ user.email }}</p>      <p><strong>Organization:</strong> {{ org.domain }}</p>      <p><strong>Widget Type:</strong> {{ widget.entityTypeEnum }}</p>    </div>  </div>  <script src="app.js"></script></body></html>

app.js

var app = new Vue({  el: '#app',  data: {    loading: true,    user: {},    org: {},    widget: {}  },  created() {    window.facilioApp = FacilioAppSDK.init();    window.facilioApp.on('app.loaded', (data) => {      this.user = window.facilioApp.getCurrentUser();      this.org = window.facilioApp.getCurrentOrg();      this.widget = window.facilioApp.getWidget();      this.loading = false;    });  }});

style.css

body {  margin: 0;  padding: 16px;  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  color: #324056;}
.loading {  padding: 40px;  text-align: center;  color: #999;}
.card {  background: #fff;  border: 1px solid #e8e8e8;  border-radius: 8px;  padding: 24px;  max-width: 480px;}
.card h2 {  margin-top: 0;  color: #483a9e;}
.card p {  margin: 8px 0;  line-height: 1.5;}

Step 2 — Host your app#

Your app needs to be accessible via a URL. During development, use any local server:

# Using Pythonpython3 -m http.server 8080
# Using Node.js (npx)npx serve .
# Using Vue CLIvue create my-connected-app && cd my-connected-app && npm run serve

For production, deploy to any static hosting service (S3, Netlify, Vercel, or your own server).

Step 3 — Register the Connected App in Facilio#

  1. Log in to your Facilio account
  2. Navigate to Setup → Connected Apps
  3. Click New Connected App
  4. Fill in the details:
    • Name: Your app name
    • Link Name: A unique identifier (e.g., my_first_app)
    • Sandbox URL: Your development URL (e.g., http://localhost:8080)
    • Production URL: Your production URL (when deployed)
  5. Add a Widget:
    • Choose a widget type (start with Web Tab for the simplest setup)
    • Set a name and link name for the widget
  6. Save the Connected App

Step 4 — Open your app in Facilio#

Navigate to the location where your widget is configured. For a Web Tab widget, look for it in the navigation sidebar. Your app will load in an iframe (web) or webview (mobile) and the SDK will automatically establish a connection.

Once app.loaded fires, you'll see the user and organization details rendered in your Vue app.

Step 5 — Work with Facilio data#

Extend your app to read and write records. Here's an example that lists recent work orders:

<div id="app">  <h2>Recent Work Orders</h2>  <div v-if="loading" class="loading">Loading...</div>  <div v-else-if="workorders.length === 0">No work orders found.</div>  <div v-else>    <div v-for="wo in workorders" :key="wo.id" class="record" @click="openRecord(wo.id)">      <strong>{{ wo.subject }}</strong>      <span class="status">{{ wo.status?.status || 'Unknown' }}</span>    </div>  </div></div>
var app = new Vue({  el: '#app',  data: {    loading: true,    workorders: []  },  created() {    window.facilioApp = FacilioAppSDK.init();    window.facilioApp.on('app.loaded', async () => {      await this.fetchWorkOrders();    });  },  methods: {    async fetchWorkOrders() {      try {        const { list } = await window.facilioApp.api.fetchAll('workorder', {          viewName: 'all',          perPage: 10        });        this.workorders = list || [];      } catch (error) {        console.error('Error fetching work orders:', error);      } finally {        this.loading = false;      }    },    openRecord(id) {      window.facilioApp.interface.openSummary({ module: 'workorder', id });    }  }});

Step 6 — Use the beta SDK (Revive / mobile)#

If you are a Revive customer or your widget needs to work on mobile, use the beta SDK. It is stable and includes the latest platform support.

<script type="text/javascript"  src="https://static.facilio.com/apps-sdk/beta/facilio_apps_sdk.min.js"></script>

Next steps#

On This Topic