Using Connect
Creating a Connect App from Scratch

Creating your first Connect App

Learn the basics of connect by creating your first connect app from scratch.

Creating a 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.

Create a New App

After logging into Connect. Select My Apps from the menu on the left of the window. 

Click Create New App at the top of the connect window


Choose your dimensions from one of the preset dimension buttons. Alternatively, enter custom dimensions by editing the width and height fields. 

Set the intended timezone of the app by clicking on the timezone button then choosing from the dropdown menu that appears. 

Name the app by entering text into the Name field. Then click Create.

The app dimensions, timezone and name 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 design with data and add functionality to your app.  

App Builder Tools

The app builder interface consists of four areas you use to build your app. The area in the center of the window is the app builder canvas. This is a space where you will drag and drop items to build your app. You will be able to click and drag components to transform their location, rotation, and size in this space.

On horizontal and vertical edges of the canvas are rulers in pixels for alignment of objects to the canvas. When a component is being moved on the canvas, dotted line alignment guides will appear.


Tip: Press and hold the spacebar on your keyboard and click and drag the canvas to adjust the canvas location inside the window. 

The next area of interest is the tool bar at the top of the window. 

Adjust the App Builder canvas to better view the app. 

Click on the Zoom buttons in the left center of the tool bar to resize the App Builder canvas. (This zoom is separate from web browser zoom controls.)

Preview your app resized to fit your browser window, by clicking the Preview button in the center of the toolbar.

Click on the Undo or Redo buttons in the top right corner of the window as you build your app  to revert or restore actions taken. 

Click Save in the right of the toolbar to save the app. App builder will automatically save detected changes. Once your app is built, click the Publish button to publish the app. Once published click on Get App to choose your app delivery method.

In the leftmost corner of the toolbar click the gear next to your app name to change app details. 

When the gear is clicked, a window will appear that allows you to rename your app, adjust time zone, and change the dimensions with smart tools to scale or shift content. 

The third area on the left side of the window is a panel of components for building your app.

On the left hand panel you can choose data, widgets or design components to add to the app builder canvas. Click on an option to view a submenu with corresponding controls. 

The fourth area of the App builder interface is hidden initially.  When a component or widget is added to the canvas the right hand properties panel will appear. The right hand properties panel will show contextual properties you can adjust based on the selected component or widget. 

For example if a shape is selected the properties panel will show color and size properties. 

Building an App in Connect

To start building your app click on the options from the left hand panel. Click and drag an item from a submenu that appears.

Connect is all about building an app with your data in mind. To start building your app click on Data  in the left hand panel. 

The Data Connections menu will appear. Here you can create a connection or choose from an existing connection. Click the Create a Connection button to create a new connection. 

You will see a new window with different data connection options. Choose the data source you want to connect. In this example we will be using a Google sheet. 

Depending on the data source you will either see fields to enter source information and or sign in information to get your data connected. Please take a look at our other help documents that outline connecting to each type of data. 

Once your Data is connected you will see a Data points view of your data items in the left hand panel.

There are controls to preview different records, review your data settings and moderate your data at the top of the Data Points menu. Follow this link to learn more about managing your data 

Click and drag a single data point from the record on to the canvas

You will be asked how you want to use the data point in your app. The options are in a repeating grid, in a slide or on it’s own. 

In a Repeating Grid

Repeating grids can be used to present a dynamic design by cycling through the content in a data source

The below example shows a repeating grid built from the corresponding data record. 

Click and Drag to add in additional items from the left hand panel, this can be additional data points or static components such as a shape, photo or text. Static components will be the same in each cell of the grid. Whereas values from the data connection will be unique to each cell matching your data connection. 

Follow this link to learn more about repeating grids in connect

In a Slide

The slide option showcases a design within a single frame. When connected to a data source you can cycle through your content displaying multiple items over time. 

This example shows a slide built from the data record. 

Click and drag to add in additional items from the left hand panel, this can be a data point or a static component. 

On It’s own

This will show the single dynamically updated value, image or text on your canvas. 

This example is of a single data value connection. 

With text you can drag in additional items into a single text box, like first and last name. 

Your app can consist of multiple repeaters, slides or single data point connections from the same or different data sources. 


Components and Widgets

You can also add in non data bound static components to enhance your design

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. Data widgets add additional functionality to your app each widget group has a document with further information follow this link to learn more. 

Manipulating components on the App Builder Canvas.

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. 

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.

Publishing your app

After creating an app from scratch or from a template the next step is adding a published app url to your digital signage software to show on your screen. 

When an app is published, data will start updating based on your chosen frequency from any live data source. You will also see the entire data set available in repeaters vs the preview of 25 rows when building your app. 

*Note when first publishing you may have to wait a few minutes before adding to your software. 

Publish the app by clicking the publish button to the right of the Save button and choose Publish.

Get the published app url or bundle by clicking on Get App and add the url to your digital signage software playlist. 

Next Steps

Not sure how to start? Get inspired Using pre-built Templates

Learn more about Connecting your Data

Find Answers in our Knowledge base

Contact us for help

Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday


5155 Excelsior Blvd #129, Minneapolis, MN 55416, USA
+1 800 461 3002


Herengracht 420. Amsterdam 1017 BZ. Netherlands
+44 20 8124 5115