Monthly Archives: April 2019

UI Kit

Leave a reply

To simplify and streamline the interface creation process, Optix provides a full UI component kit that you can use to create your UI layouts. The UI kit contains all of the HTML and CSS, so all you have to do is specify which component you’d like to use.

On this page

UI kit overview

The UI displayed in canvases is expected to be simple; it should render quickly and look similar to the overall layout/style of the Optix platform. For this reason, it makes sense to provide a UI kit that simplifies the development and also stays up to date with the Optix UI guidelines (including fonts, colors, and field/button styles).

Just a few examples of the available components:

  1. Input (active state)
  2. Dropdown menu
  3. Buttons

Some interfaces, like “App settings” and “Admin main menu” can open in large canvases but are still surrounded by the Optix layout.

An example of a main menu canvas open on the admin dashboard.

  1. Optix admin dashboard (with a ‘main menu’ canvas selected)
  2. Canvas (where your UI displays)

We provide a simple HTML boilerplate of a canvas at https://api.optixapp.com/ui-kit/. The boilerplate provided includes two UI kit main files, the CSS and the JS. The UI kit is built using Vue.JS, and you could find more resources at https://vuejs.org/.

Libraries

Optix UI kit embeds some basic libraries, like Vuetify.js and Axios, so you don’t need to import any external libraries for basic actions. Please check the components available at https://vuetifyjs.com/en/components/api-explorer and the Ajax library methods for Axios at https://github.com/axios/axios.

You can use any Vuetify element in your app, check the example below:

Along with the Vuetify elements (prefixed by “v-”), we provide a few “optix-” components:

TagNotes
<optix-app>

This element adds the proper padding and context to other components of the page. It also provides a contextual class on the tag, related to the platform type:

  • is-android
  • is-ios
  • is-web

    • <optix-container>
    		This element handle margins for inner elements.
    <optix-sheet>
    		This element generates a sheet box that is useful for “app-settings” container.

    Axios is available at `this.$axios` object on Vue JS context. Also, the `this.$optix` provides a set of methods that are helpful for your development:

    TagNotes
    this.$optix.init(options)

    You may notice the “init” method in the HTML boilerplate. This method is important to activate the Optix component. It will read the context variables and also show the page only when the canvas is fully loaded (make sure to use the class “optix-show-on-load” at the main object)

    mounted(){
   this.$optix.init().then(()=>{
     this.message =
       ’Hello World! Loaded at ’+new Date()
      });
    }

    The options parameter is optional and can receive an object that overrides the current environment variables:

    client_id

    The app client ID (useful if your app open or link other canvases of your app). Default: null.

    access_token_argument

    The token argument name. Default: “token”

    this.$optix.graphQL(query, variables)
    		You can call the Optix API using the method graphQL. All requests using this method will have the token from the canvas URL attached. 
    
this.$optix
  .graphQL(
    `query me { 
    me {
         authType 
         user {
           email
         }
       } 
    }`
  )
  .then(result => {
    console.log(result.data);
  });
    “Variables” is an optional parameter that corresponds to the graphQL variables that you specified in your query.
    this.$optix.openModal(id, context)

    You can open a modal canvas using this method. Use the identifier parameter to define the canvas target. The context variables will be concatenated as URL parameters.

    Make sure to provide a client ID at the init phase before using modals.

    mounted(){
   this.$optix.init({
   	       client_id:"your_app_client_id"
   	    }).then(()=>{
   	    // …
    });
}

    The Optix App PHP boilerplate contains examples.

    Tips

    • Canvases are designed to load fast, so avoid embedding a lot of external resources.
    • Avoid compiling UI kit with your app (using webpack or any other package manager). They are cached at the browser side, and this cache is shared between all canvases when loaded from our servers. Usually, the unique file to be downloaded from the servers when your app canvas is shown is your HTML app.
    • Canvas resources are usually cached on the client, and the only way to clean the cache is by setting a short expiration time HTTP header on your server or changing the name of the file.
    • Keep it simple; don’t create external .JS files if you are not planning to reuse those files. 5K of JS script embedded on an HTML could be more efficient than 2K external files on some restrictive networks.
    • Feel free to use arrow functions or anything else from ES2015 (ES6). We do not support IE 11.

    Got questions?

    We are here to help. Ask us a question and we’ll do our best to answer as soon as possible.

    Contact Us

    Building interfaces for your app

    Leave a reply

    Optix enables custom user interfaces to be built and displayed in iframes or web views, placed within the Optix core products. We call these iframes ‘Canvases.’

    On this page

    Canvas overview

    A Canvas is an area for you to deliver consistent and contextual experiences to users. Canvases display your externally hosted UI inside the Optix admin dashboard or Optix mobile apps. To help with this:

    1. We provide a UI kit that you can use to easily create UI that follows the Optix UI guidelines.
    2. All canvases load with an authentication token parameter and other useful parameters (e.g., user ID) added to the URL. These enable the app to identify the organization/user via the public API securely.
    3. There is a list of the available canvases for the admin dashboard and mobile app. You can find more information on the using canvases page.

    An example of one of the canvases available for the mobile app. The native iOS/Android apps will load your canvas based on your app’s settings file.

    An example of one of the canvases available for the admin dashboard

    How canvases work

    You can specify which canvas you would like to use and the URL you’d like to show. The Optix admin dashboard and Optix mobile app will display a canvas in the area you have chosen. You can use this area to create content-rich and contextual experiences. The context comes from the additional parameters added to the URL you specified, where Optix includes the user’s authentication token and other relevant information like the user ID, booking ID, etc.

    Available canvases

    The below demonstrates the available canvases for the Optix mobile app. For a more detailed explanation of how to use canvases in your app, check out the technical specifications.

    Mobile app

    Admin dashboard

    Got questions?

    We are here to help. Ask us a question and we’ll do our best to answer as soon as possible.

    Contact Us

    Key Terms

    Leave a reply

    The Optix documentation contains deliberately named objects and references. The following terms will help you to understand what each term means.

    Location

    A building with a physical address. Locations contain resources like meeting rooms and desks. Several locations can be grouped in an ‘Organization.’

    Organization

    One or more locations, grouped with the admins and users, operating as a single flexible workspace entity. An organization is a customer of Optix; most customers have one organization, whereas some have several linked by a ‘Network.’

    Network

    Two or more organizations linked together. A network allows users to access the locations across multiple Organizations while maintaining administrative and financial separation.

    Admin

    An administrator responsible for managing an organization. They may have access to some, all, or just one of the locations. They are sometimes referred to as a ‘Venue manager.’

    Optix platform

    The Optix platform comprises the Optix admin dashboard, Optix mobile app, and the apps built by third parties.

    Optix admin dashboard

    The web-based product developed for organization admins. It is accessed via the organization’s subdomain (e.g., yourorganization.optixapp.com) and contains the tools required to manage a flexible office. It is also where you will find the ‘Develop’ page to begin building your app.

    Optix mobile app

    The iOS/Android mobile app created by Optix that provides a native experience to the mobile user. Optix releases the mobile app to the Apple App Store and Google Play store branded as ‘Optix.’ Some organizations opt to have a version created and released to the app stores, which includes white-labeled branding and their choice of app name.

    App

    An application developed by an independent developer/company, that interacts with the Optix platform via one or all of the following: the public API, Webhooks, Canvases.

    Mobile user

    A person that interacts with the Optix iOS/Android mobile app. These are often referred to as a ‘coworking space member,’ or simply ‘member.’

    Third party system

    An existing independent application built by an independent developer, that does not require Optix to run but can connect for automation and to enhance the user experience.

    Developer

    Any Optix client or independent developer/company that wishes to build an app that adds functionality to the Optix platform or to integrate a third party system.

    Got questions?

    We are here to help. Ask us a question and we’ll do our best to answer as soon as possible.

    Contact Us

    Optix platform overview

    Leave a reply

    The Optix developer platform enables you to create apps that transform the workplace and solve real-world problems. Once built, apps are installed in an Optix organization by an admin. They add functionality for the admins, the mobile app users, or both.

    The development ecosystem provides three different components that can be used to build an app for Optix: the public API, webhooks, and canvases. Some apps will require only one or two, while others will use all three.

    Important

    To interact with the Optix development ecosystem, you will need an Optix Organization to log in to. You will find this at your subdomain, e.g., yourorganization.optixapp.com. If you do not have an Optix Organization, you can contact us and we’ll help you get set up.

    On this page

    Public API

    The purpose of the public API is to enable dynamic interactions by third-party apps that can retrieve or change information related to an organization or user.

    To start using it, go to Using the API. If you’d like to jump straight into experimenting with the API, try out the API playground.

    You can use the API to read data like users, bookings, invoices, etc. We are increasing the number of objects available, including new mutations (write) operations. For a visualization of the available objects and their fields, check out the API explorer.

    Webhooks

    Webhooks notify apps about changes or activities that take place in Optix, for the specific actions that the app subscribes to.

    It is preferable to subscribe to webhooks to listen for changes, rather than polling the API to look for changes.

    To learn more, go to the Using webhooks page.

    Canvases

    Canvases are iframes that display within the user interface of the Optix admin dashboard, and web views that display in the mobile app. They can be used to display information to users, present forms and buttons for interaction, or any other element that can be built using HTML. Canvases include information like the user’s token and other relevant data. The page you design can react to these properties, offering relevant and contextual experiences.

    More information is available in the Canvas overview and Using canvases sections.

    Canvas example

    You have several options when choosing where the canvas will be displayed. The below is an abstract illustration that shows an example of the Optix admin dashboard displaying a ‘main menu canvas’ and the Optix mobile app displaying a ‘home screen section’ canvas.

    1. Optix admin dashboard
    2. Optix mobile app
    3. Title/icon for your web canvas
    4. Canvas in admin dashboard for your UI
    5. Title & additional link for your mobile canvas
    6. Canvas in mobile app for your UI

    Installing apps

    For an app to interact with an Optix organization, it must be installed in the ‘Find apps’ page of the Optix admin dashboard. The installation process adds the app into the ‘Manage apps’ page and triggers a webhook (called “app_install”) which contains the authentication token for the organization.

    When thinking about creating an app for Optix, you should consider your audience. There are two distinct scenarios you should consider for your app:

    1. You are developing an app only for your Optix organization: Your app doesn’t care about the venue configuration, you know all the rooms, IDs, doors, devices, etc. The app is not available in the ‘find apps’ page for any organization other than your own.
    2. You are developing an app for any Optix organization: Your app will be available in the ‘find apps’ page for all Optix organizations (after approval from the Optix team) and will be able to be used by any Optix organization that installs it. You will enable Organization-specific configuration and data storage.

    App infrastructure

    Your app could be developed using any programming language or technology and will be hosted by you, on any infrastructure. If you like, you could choose to use the boilerplate app that we provide.

    Got questions?

    We are here to help. Ask us a question and we’ll do our best to answer as soon as possible.

    Contact Us