Learn the basics of connect by creating your first connect app from scratch.
Before you create an app you will need to have access to Connect. If you are unsure if you have access, follow this link to learn more about Getting Started with Connect.
After logging into Connect. Select My Apps from the left menu of the window.
Click Create New App at the top of the connect window
Choose your dimensions from one of the buttons of common dimensions. Alternatively, enter custom dimensions by editing the width and height fields.
Name the app by entering text into the Name field. Then click Create.
The app name and dimensions can be changed at any time, once the app has been created.
You should now see the Connect App Builder interface. This is where you can build out the look and functionality of your app.
Adjust the App Builder canvas to better view the app.
Click on the Zoom button in the bottom left corner to resize the App Builder canvas. (This zoom is separate from web browser zoom controls.)
Press and hold the spacebar on your keyboard and click and drag to adjust the canvas location inside the window. On horizontal and vertical edges of the canvas are rulers in pixels for alignment. When a widget is being moved on the canvas dotted line alignment guides will appear.
Clicking on Save in the top right corner to save the app, however App builder will automatically save detected changes. Clicking on the dropdown arrow next to Save will present the options to Save a copy, Save as template, or Save and publish.
In the top left corner click the name of your app to change app details.
A window will appear that allows you to rename your app, change the dimensions with smart tools to scale or shift content.
On the leftmost menu you can choose widgets or components to add to the app builder canvas. Click on the menu options to view a submenu with widget specific controls.
Click on Text in the left menu and a detail menu will appear.
You will see the option to choose a type of text. Click on the type of text you want to add to the canvas. A properties menu will appear, adjust the font, color, size, style, and opacity from this menu.
Click on Photos in the left menu and a detail menu will appear.
You will see the options to search for a photo from Pixabay or upload your own photo from one of the following sources. Upload from your device, camera or a link. Only jpg, jpeg and png files are currently allowed.
Click on Shapes in the left menu and a detail menu will appear.
Click to add a Rectangle, Ellipse ,Polygon,Triangle or Line to the app canvas.
Click on Widgets in the left menu and a detail menu will appear.
The menu that appears shows all the data widgets that dynamically update from your data connection.
Move, resize and rotate each widget or component on the canvas by selecting the component you want to adjust. Then click and drag on the wireframe handles to change the size, or click and drag left and right on the rotate handle above the component to rotate.
When a component is selected a properties menu will appear on the right side of the window. Move the component on the canvas by adjusting the X and Y values.
Resize the selected component by changing the W (Width) and H (Height) values. Some components have the option to Lock Aspect Ratio, which will retain the ratio between width and height. If one value is adjusted the other will change matching the ratio locked.
Rotate the component from the properties menu, clickin on the arrows that appear next to Alternatively editing the value for rotation angle will also rotate the widget selected.
Arrange each widget and component from front to back by selecting the component and clicking on the controls at the top of the properties menu on the right of the window. The options from left to right are Move to Top, Move Up, Move Below, Move to Bottom.
Click on the Undo or Redo buttons in the top right corner of the window to revert the previous action taken.
Group multiple components by selecting all components you want to group on the canvas. Select either by clicking and dragging over the top of the components or holding the shift key on your keyboard and clicking on the components individually. Click on the Group button in the properties menu on the right.
Alignment of multiple components can be set once more than one component is selected. Click on one of the alignment thumbnail buttons to align the components relative to each other. The alignment buttons do not align the components to the app canvas. Alignment options are Align Top, Align Horizontal, Align Bottom, Align Left, Align Vertical and Align Right.
Lock Component when a component is selected you can toggle Lock Component on from the properties menu on the right to lock the component from any changes. This is helpful when you have multiple components that may overlap.
Preview your app full scale, as you would see it on a display, by clicking the Preview button in the top left corner of the app builder window.
Publish the app by clicking the arrow to the right of the Save button and choosing Save & Publish.
Get the published app url by clicking on the blue text Published and add the url to your digital signage software playlist.
Not sure how to start? Get inspired Using pre-built Templates
Learn more about Connecting your Data
Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday
