Web View Part 1: How to embed a live web page into your project

by | Aug 10, 2020

How to embed a live web page into your project

 

Squirrel’s new Web View component (WVC) has not one, not two, but three main uses. First and foremost, it allows you to embed an interactive web page into your Squirrel project and secondly, multiple people can work on one project at the same time; and thirdly, you can create reusable components that can be used in multiple projects.

In this blog, we’ll explain how to embed a live web page into your project. We also recommend you take a look at Donald McCormick’s video Spotlight: Web View Component. We’ll explore the other two uses in a separate blog called “How to embed one Squirrel project within another.”


How does it work?

Rest assured, it’s not complicated. You’ll find the WVC in Containers in the Component Library; you simply select it, add it to the canvas and then re-size to suit.

The Web View component is located in Containers in the Component LIbrary

Component Library

 

Now you can connect it to your chosen website URL. Let’s say you want your Squirrel project to show a basic web page, you simply enter the URL into the WVC Properties Panel or you can bind it to a cell containing the URL in the spreadsheet.

Web content appears on the canvas in Squirrel

Ta dah!  A web page inside your Squirrel project.

 

Embedding Google Maps is a brilliant example of how you might use web content.

Google Maps is on the canvas in Squirrel

Google Maps in Squirrel

 

And because it’s a fully interactive web page embedded into your project, you can interact with it just as you would if you viewed it directly in a browser. For example, you can zoom in and out of the map.

Pretty simple right?


It gets clever

The clever stuff really starts to happen when you combine Squirrel’s ability to use spreadsheet formulas with query parameters in the URL. This lets you dynamically pass information into the URL which affects what you see in the WVC on the canvas. This makes it possible for other Squirrel components to dynamically affect the contents of the WVC, such as the location the map shows or the map type i.e. a roadmap or satellite view.

 

Interacting with Google Maps in Squirrel

Interacting with Google Maps in Squirrel

 


To summarise

The WVC can be as simple or as sophisticated as you like. Like other components in Squirrel, it has the ability to be driven from spreadsheet logic, which turns it into a flexible and dynamic component, especially when teamed up with other components.

 

What’s next

In this blog you’ve learned how to embed external content into your Squirrel project; the next blog in this series takes you even further as we look at how you can embed one Squirrel project within another. With this knowledge up your sleeve, you’ll be able to:

  • Allow multiple people to work on one project at a time.
  • Create reusable components that can be used in multiple projects.

The possibilities for what you can do with the WVC are endless and we’d love to hear how you use the WVC in your projects. Give us a shout on social media to share your ideas with the Squirrel community.

To learn how to configure the web view component and each of its properties, take a look at Squirrel’s knowledge base article.

What’s new in Squirrel365 v1.15

What’s new in Squirrel365 v1.15

Paving the way for greater things to come Version 1.15 contains a number of enhancements specifically designed to address some of the pain points with creating and maintaining Squirrel projects. Bulk property editing - As a step towards common property editing, you...

No-code Games Gallery

No-code Games Gallery

No-code games were not something we expected people to build with Squirrel365, but that is exactly what some of our users have done!