Monthly Archives: May 2019

Icons for Canvases

Canvases that support icons require you to specify which icon you want to use. The table on this page shows the icon and the name you need to specify.

On this page

Available icons

Copy the name of the icon and use it when specifying your canvas settings in the app settings file.

activity
airplay
alert-circle
alert-octagon
alert-triangle
align-center
align-justify
align-left
align-right
anchor
aperture
archive
arrow-down-circle
arrow-down-left
arrow-down
arrow-down-right
arrow-left-circle
arrow-left
arrow-right-circle
arrow-right
arrow-up-circle
arrow-up-left
arrow-up
arrow-up-right
at-sign
award
bar-chart-2
bar-chart
battery-charging
battery
bell-off
bell
bluetooth
bold
bookmark
book-open
book
box
briefcase
calendar
calendar-star
camera-off
camera
cast
check-circle
check
check-square
chevron-down
chevron-left
chevron-right
chevrons-down
chevrons-left
chevrons-right
chevrons-up
chevron-up
chrome
circle
clipboard
clock
cloud-drizzle
cloud-lightning
cloud-off
cloud
cloud-rain
cloud-snow
codepen
code
coffee
command
compass
copy
corner-down-left
corner-down-right
corner-left-down
corner-left-up
corner-right-down
corner-right-up
corner-up-left
corner-up-right
cpu
credit-card
crop
crosshair
database
delete
disc
desk
dollar-sign
download-cloud
download
droplet
edit-2
edit-3
edit
external-link
eye-off
eye
facebook
fast-forward
feather
file-minus
file-plus
file
file-text
film
filter
figma
flag
folder-minus
folder-plus
folder
frown
gift
git-branch
git-commit
github
gitlab
git-merge
git-pull-request
globe
grid
hard-drive
hash
headphones
heart
help-circle
home
home-unlock
image
inbox
info
instagram
italic
key
layers
layout
life-buoy
link-2
linkedin
link
list
loader
lock
log-in
log-out
mail
map-pin
map
maximize-2
maximize
megaphone
meh
menu
message-circle
message-square
mic-off
mic
minimize-2
minimize
minus-circle
minus
minus-square
monitor
moon
more-horizontal
more-vertical
mouse-pointer
move
music
navigation-2
navigation
octagon
package
paperclip
pause-circle
pause
pen-tool
percent
phone-call
phone-forwarded
phone-incoming
phone-missed
phone-off
phone-outgoing
phone
pie-chart
play-circle
play
plus-circle
plus
plus-square
pocket
power
printer
radio
refresh-ccw
refresh-cw
repeat
rewind
rotate-ccw
rotate-cw
rss
save
scissors
search
send
server
settings
share-2
share
shield-off
shield
shopping-bag
shopping-cart
shuffle
sidebar
skip-back
skip-forward
slack
slash
sliders
smartphone
smile
speaker
square
star
stop-circle
sun
sunrise
sunset
tablet
tag
target
terminal
thermometer
thumbs-down
thumbs-up
toggle-left
toggle-right
trash-2
trash
trello
trending-down
trending-up
triangle
truck
tv
twitter
type
umbrella
underline
unlock
upload-cloud
upload
user-check
user-minus
user-plus
user
users
user-x
video-off
video
video-conference
voicemail
volume-1
volume-2
volume
volume-x
watch
wifi-off
wifi
whiteboard
wind
x-circle
x
x-square
youtube
zap-off
zap
zoom-in
zoom-out

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

Using Canvases

Canvases are iframes or web views shown inside the Optix core products. A more general explanation can be found in the Canvas overview. To specify canvases for your app, you need to add them in the app settings file.

We do not restrict the creation of the HTML which is displayed in a canvas, but we strongly suggest the use of our UI Kit. Doing so enables faster development and follows the Optix design guidelines, adapting the view to the proper platform (view or mobile). Using our UI kit will enable you to take advantage of our Content Delivery Network (CDN) to deploy most of the resources used in the app.

On this page

Canvas URL contextual parameters

When an admin clicks to open or view a canvas in the Optix admin dashboard, the Optix platform manipulates the URL specified in the app settings file and creates a custom URL, containing the context variables, e.g., the booking_id and the token (full details on context parameters are found in this table). The token can be used by the canvas target page to call the public API and retrieve the information related to the booking.

Example

A URL you might specify for a canvas:

https://www.mydomain.com/app/bookingtray.php

Is converted to:

https://www.mydomain.com/app/bookingtray.php?token=abcdef123p&booking_id=1000

You could choose to customize the token parameter using macro replacements.

Security tip

Always use HTTPS in your services. The usage of HTTP is insecure and can lead to identity spoofing.

Choosing the best canvas for your use case

There are several canvases available for the mobile app and admin dashboard. They display in different places and offer slightly different opportunities/restrictions. Use the lists found in the following pages to learn more about the available canvases and choose the best place to host your UI.

Each canvas in the list contains information regarding the sizing, scrolling behavior, and configurations available. The list is broken into two sections:

  1. Optix mobile app canvases
  2. Optix admin dashboard canvases

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

API Capabilities

It’s useful for apps to understand the permissions or objects available for each token. During the development of a canvas you can provide different features depending on the user level (e.g., is the user an admin or a mobile app user?).

On this page

Example

The below example shows how you can use the field `capabilities` available at `me` object. Click the play button to run the query in this live demo. The table below explains the response further.

Hidden on mobile

This tool doesn’t fit on screens this small. Please use a browser which is a bit bigger (you could try rotating your phone).

Available capabilities

CapabilityDescription
authenticatedWill be returned only if the token is valid and not expired
manageWill be returned only if the user is an admin or if its an organization token
bookingsWill be returned only if the token has permissions to handle bookings
checkinsWill be returned only if the token has permissions to handle check-ins
invoicesWill be returned only if the token has permissions to handle invoices

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 and GraphQL

GraphQL is a query language and runtime that helps us fulfill the exact information requested by external apps. It allows you to describe what information you want into a JSON like format and we will reply with the exact set of data.

GraphQL for many developers can be a replacement for REST, but we believe it’s only a flexible approach for requesting data. Also, it allows us to include more information and details to our APIs without affecting your app. We can mark fields as deprecated to inform you about something that we are considering remove, and you also provide us information of what kind of field are you currently using, this can help us drive the evolution of the platform.

On this page

Benefits over REST

  • Fewer requests: GraphQL accepts batch requests so that you can ask for all information required with only one real HTTP request to our server, faster for you and more effective.
  • Clear relationships: You can follow relationships between objects, so it doesn’t matter if your query starts from the booking or check-in, you can follow the relationships and fetch the data regarding the location, resource and other internal objects without multiple round trips to the server.
  • Less useless data: Quite often, you will require only a small portion of the all data node requested. GraphQL requires you to inform which fields you will effectively use, reducing the useless data transferred between Optix and your Application.
  • Strong typing: GraphQL is strongly typed, so you will know what kind of data you will receive.
  • Auto Documentation: GraphQL provides introspection capabilities, so you can use useful tools to help your development, like autocomplete on query editors and also API explorers.
  • Less work: You can use class/code generators/libraries like “Apollo” to create a set of mapping classes in your language that will inform all the data structure in your IDE.

What GraphQL does not offer

  • Caching on network level: You cannot rely on HTTP caching since the URL of the endpoint is always the same unless you hash your cache key based on all request data. Make sure to use the proper caching strategy when using GraphQL endpoints.
  • The endpoint is not verbose: The endpoint is always the same, and the query can return anything that you want. So make sure to use the tools we provide when creating a new query.

Related information

  • https://www.howtographql.com/
  • https://www.graphql.org/
  • GraphQL Voyager: A tool used to present the full relationship and objects available on the Optix API. Use the menu option provided on the ‘Develop’ page in Optix to use this tool with your organization or user token.
  • GraphQL Playground: A tool used to create/prototype queries/mutations using our API. Use the menu option provided on the ‘Develop’ page in the Optix admin dashboard to use this tool with your organization or user token.

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