ProtoShare Tip: Adding a Google Drive Spreadsheet

With Google Drive, you can create your own spreadsheet that you can share with others. Using an iFrame component in ProtoShare, you can add a live view of your spreadsheet which can be edited in real time (if the user has editing permissions).

The easiest way to allow any user to be able to view the spreadsheet is to set the Share Settings to allow those who have the link to view it. This will allow any user who views your design in ProtoShare to also see the content of the spreadsheet. If they are signed into Google and you have allowed them to have access to the spreadsheet, they will also be able to edit it real time from within ProtoShare using Test or Review mode.

Setting up a live view of your spreadsheet in ProtoShare is very simple. First, place an iFrame component onto the canvas. Next, right-click the iFrame and select Get Info which will open the property inspector for it. Place the URL for the spreadsheet into the Source URL field. You will now see the iFrame change to display the page with the spreadsheet.

This Spreadsheet Needs Room to Breathe

Since a lot of the menus for Google Drive are based on the viewing area, you may not see your spreadsheet right away (Google will usually give you a message saying to resize your browser window). You will want to increase the size of the iFrame until your spreadsheet is completely viewable.

The Finished Spreadsheet

Once you are satisfied with the viewable area, you may want to make the spreadsheet more presentable by placing it into a container and cropping just the spreadsheet itself.

This will allow you to have an interactive spreadsheet for your design. Remember to be signed into Google and have permission to make changes to the spreadsheet if you want to edit it.

This entry was posted in Blog, ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>