Embed Page

This article applies to versions 4.4 and later of P2 Explorer. For more, see Release History.

Overview

The Embed Page component allows you to insert another web page into an Explorer page.

Exercise caution when embedding Explorer URLs. Click here to read more.

The embedded page cannot use a lower level security connection than that used by P2 Explorer — if P2 Explorer uses https, then the embedded page must also use https.

The following diagram shows an Embed Page control being configured to show a weather map:

Content:	The URL of the web page you want to embed. The URL must be a secure https:// address if P2 Explorer uses https. Note that you cannot embed a Google website.
Add Variable:	You can add a variable to dynamically update the displayed web page. When you add a variable, it is automatically appended to the URL. If the variable needs to be added to a different position in the URL, you can manually rewrite the URL to include the variable in the correct way. For example, in the following URL: https://weather.yahoo.com.au/forecast/{{selectedOption}} {{selectedOption}} indicates the variable.
Move Up:	When you embed the page, the content is automatically positioned such that the top left of the web page sits in the top left corner of the canvas in Studio (i.e. it is positioned at 0,0).You can reposition the content of the URL to only view a certain portion of that web page. For example, you may only want to see a portion of a larger map displayed on another site. The number of pixels to move the content up to view the desired area.
Move Left:	The number of pixels to move the content left to view the desired area.
Disable Scrolling	Prevents scrollbars from appearing on the page. This is useful if you only want to show a certain portion of another website on the page and do not want the user to change the view.
Style	The style you want to apply to the Embed Page component. There are no predefined styles for this component.

Note that Explorer content (any Explorer URL such as pages, trends, and workbooks) will not function correctly inside the Embed Page component. 

• Each instance of embedded content is a separate application session on the server, causing increased server load and impacting performance.
   
• Every time an Embed Page component contains a link to Explorer, the entire Explorer application will be loaded. So if a page has, for example,  5 embedded Explorer pages, then 5 Explorer applications will be loaded, in addition to the initial load of Explorer.
   
• Application-level items misbehave when embedded, such as the Explore panel and Trend Analysis. 
   
• Links on the embedded Explorer page will redirect the tab content away from the host page.

 

When To Use Embed Page

The Embed Page control works best on pages with a fixed element that you want to display, such as a picture.

If the website you are intending to embed has a responsive layout, the browser will attempt to resize the page to fit the grid space, and the result may not be what you expect.

 

---

Tutorial: Embedding a Weather Map on a Page

Configure the Embed Page component as follows:

• Content: https://weather.yahoo.com.au/forecast/

You will see that the web page immediately appears on the canvas. If you open the web page in a new browser tab, you will see that it looks exactly the same. However, we don't want the entire web page, we just want the map. We can do this by manipulating where we want the top left corner of the web page to start, so that it will fit in our container without scrollbars. Add the following configurations:

• Move Up: 460
• Move Left: 25
• Disable Scrolling: (selected)

 

Explainer: How to Change the URL to Display Different Parts of the Map

 

 

Let's go back to that URL in the browser tab you just opened (if you closed it, open it again in a new browser tab).

 

You'll notice that above the map, there is a set of links to the states of Australia.

When you click on a state, you will notice that not only does the map change, but the URL itself also changes.

 

For example, if you click on QLD, the URL changes to https://weather.yahoo.com.au/forecast/qld. In the next step, we want to tap into that last portion of the URL and create a variable that changes that. 

 

For now, click through the different states and take note of how the URL changes with each state. We will be taking advantage of this in the next step. 

 

Step 4. Add a variable

• Click the Add Variable button.
• In the Variable Name box, type selectedOption and then click the Add button.

You will see the "selectedOption" variable being added to the Content at the end of the URL, enclosed in double curly brackets.

Related: Variables

 

Step 5. Add an Option Links component

Drag and drop the Option Links component onto the page. When the user clicks one of the options, the map will focus on that state. Configure the Option Links as follows:

• Open the Option Values Data Selector by clicking on the field. You will notice that the Value  tab is automatically selected. Let's type in our values manually. Note that the values must match exactly with the values that the https://weather.yahoo.com.au/forecast/ URL expects, as these will be inserted into the URL. Enter the values wa, vic, qld, and sa. 

• Click away from the Data Selector.
• Open the Option Names Data Selector by clicking on the field. Type in the following values manually. Remember that the states must be entered in the same order as they were for the option values, but do not need to match exactly. These are the names that will be displayed on the Explorer page. Enter the values WA, VIC, QLD, and SA.

• Click away from the Data Selector. 

Notice that the Selected Option is where the value of the user's selection is stored, when they click an option. This corresponds to the variable in the Embed Page component's URL (see Step 4).

Related: Option Links tutorial, Data Selector