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 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.
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.
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.
<<ADD SAMPLE OF COMPLETED APP>>
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.
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.
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.
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
