This tutorial will demonstrate how to connect live securities data from a Google Sheet into an Atomic prototype.
Here is a sample, which you can copy into your own account:
Although we’re using securities data, the pattern can be applied to any data in a Google Sheet: names, ages, dates, and even images.
Step 1: Create a Google Sheet and add data to it
First, populate a Google Sheet with the data you would like to use in your prototype.
In Google Sheets, the GoogleFinance() function allows you to look up information about traded securities in any of the top markets around the world. For example, to get the current price for Apple shares, in a cell you can type:
To help get you started, we’ve made a spreadsheet with some of the highest capitalized securities from markets around the world. You can make a copy and save it to your own account:
Live Securities Data
Or if your preferred market is not in that spreadsheet, you can find the prefix codes for other regions here:
Google Finance regional exchange codes
You can learn more about what’s possible with the Google Finance function here:
Step 2: Import your spreadsheet into Atomic
Navigate to the project your prototype is in and select the Data tab.
Select ‘Import Data’, then follow the instructions to link your Google account and import a spreadsheet.
If you make any changes to the spreadsheet you can come back here and press the Sync button to update the copy stored in Atomic.
Tip: To make it easier to find and manage later, once you’ve uploaded the spreadsheet, in the Data tab, select and then rename your dataset.
Step 3: Create a row item component to hold data
Now open your prototype. You may have placeholder content, like text elements, for the data already. If you don’t, add these elements now. You only need elements for the first row of a table of data.
Select all the elements that comprise the first row of your table of data. Convert these into a component by selecting “Component” in the menu bar at the top of the editor. Name your component “rowItem”.
Duplicate your component for the additional rows in your table. For example you may like to duplicate the component 9 times in order to create 9 additional rows. Move each row into the correct vertical position.
Step 4: Connect your elements to the data
Double-click on one of the row item components to open it, then select the elements that you would like to populate with data.
In the properties panel, set the Content property to ‘Set from data column’. New options will appear in the properties panel.
Set the Source of each of these elements to ‘Inherit data from parent element’. This means that when we set the data source at the prototype level, these elements inside the component will know to use that data source.
For each field (or column) in your row, set the Column to match the name of the column from your spreadsheet. What you type into the column name field must match the name of the column in your spreadsheet. For example, it might be “name” or “price”.
Tip: This part can also be achieved by selecting your data source from the dropdown, choosing the Column from the column dropdown and then resetting the source from the specific spreadsheet to ‘Inherit from parent’. The column selected will be remembered.
Step 5: Control the state of components with data (optional)
To create an visual indicator for if the price has gone up, down, or not changed, you can create a component with three states, then control the state using data.
Select the element you want to change the state of and convert them into a component. Name the component “changeDirection”.
Double-click on the component to open it, then duplicate the first page to create another state. Make any changes necessary on this second state to indicate a change (e.g. in our example, we use a green, red, and gray background to indicate the securities price has gone up, down, or not changed today). Duplicate the page again and create the third state.
Name the pages in the component to represent your states. These state names need to match the data result that they will be setting their state from. For example, if you’re using the dataset we supplied earlier, then the states need to be called “up”, “down”, and “noChange”.
Press the Back button to go back to the rowItem component, and with the changeDirection component selected, set the State property to “Set from data column”. Set the State Col property to match the column in the dataset that lists the correct state for each row (e.g. in our sample, “changeDirection”). Now when data is applied to this sub-component it will change its state to match corresponding row and column in the dataset.
Step 6: Apply the data source to your container
Next, press the Back button to navigate back to your prototype. Select all the row components and wrap them in a containing element. To do so select Scroll from the options bar at the top of the editor (you could also use a Mask container or Group instead if you wish).
With the scroll container selected, in the properties panel set the Data source to be the data you created earlier.
To distribute different data rows to each component, check the ‘Maps rows to child elements’ option.
Data will be distributed in the order of layers shown in the layers panel, regardless of the visual order on your page.
Optional: Enter a start row number or to randomly distribute the rows, select the shuffle icon.
Note: if you'd like to only display data from one row of the spreadsheet, see ‘Adding data to your elements’ section in the Using data in your prototypes help article.
Step 7: Refresh your data as necessary
Refresh the spreadsheet, whenever you’d like to display up-to-date information.
In your project, go to the Data tab, then select ‘Sync’ for each dataset you’d like to refresh.
Note: any person collaborating on the project can use and re-sync the datasets added to it, and by refreshing a prototype they will instantly get the up-to-date information.