App Builder Introduction
Introduction
The App Builder is the main tool that you will be using to create apps on Quantum. To correctly view the app builder you screen has to have a minimum screen size of 1000px. Also a mouse is necessary and touch gesture are not support yet. In the following chapters we will go into detail about each of the specific sections of the App Builder.
Command Bar
The Command Bar is visible throughout the Quantum Interface, so most likely you are already familiar with it. Besides the Navigation back to your Apps it contains the “Save App“ button as well as the “Start and Stop“ icon button.
Objects Panel
The objects panel is situated on the left side of your screen. It contains multiple categories of Objects called: “Hardware“, “Interface“, “Code“, “Service“ and “Misc“.
Each of the individual types of objects has different purposes in the system. Hardware Objects let you communicate with physical hardware components and devices. Interface Objects let you create multiple virtual inputs and outputs on the apps dashboard. Code Objects allow you to manipulate or calculate data and much more. Service Objects allow you to access external information services like weather services or sms integrations.
Learn more about objects: Object Reference
To get one of the objects to appear on the canvas simply open up the category, then click or drag and drop the object you would like to add onto the canvas on the right.
The objects panel also has a search functionality, which comes in handy once you are more familiar with the different objects and their names.
Canvas
The Canvas itself is your creative space where you can combine multiple objects together through links. Once objects are dragged onto the canvas they also populate their specific and individual ports. Ports of one object can be connected to ports of one or multiple other objects.
This is how you make information and message flow through your app. The canvas also supports various actions that can be access through the Action Bar on top of the canvas.
Canvas Action Bar
The Canvas Action Bar gives you access to a multitude of different actions such as edit, back and forth, copy and paste and much more. You can also open up the keyboard shortcuts from here.
You can easily hover over each of the items to see a description of the action in the Status Bar.
Status Bar
Finally the Status Bar is the last piece of the canvas. It shows relevant information about objects, actions and much more. It is context sensitive based on where your mouse is click and hovering. Just navigate through a couple of the objects in the Objects Panel or hover over the actions in the Canvas Action Bar and you will quickly understand how the Status Bar is working.
Properties Panel
The Properties Panel to the right of the screen is you place to access detailed information of selected objects and configure your dashboard experience for you app.
Properties
This panel opens up depending on which object or port is selected on the canvas. Various properties can then be modified like the name for example and you finish up your configuration by hitting the “Save Properties“ button at the bottom.
Dashboard Builder
You can manually switch over to this panel to access the dashboard configuration. Essentially you can define here which of you interface objects is part of which tab and group. Sorting multiple interface objects within a certain group is also done here. To change the sorting of any tab, group or interface object simply drag and drop the individual items to your liking.