{"id":15188,"date":"2016-05-23T14:21:12","date_gmt":"2016-05-23T06:21:12","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=15188"},"modified":"2019-09-24T10:27:34","modified_gmt":"2019-09-24T02:27:34","slug":"embed-page-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embed-page\/embed-page-4-3-2\/","title":{"rendered":"Embed Page (4.3.2)"},"content":{"rendered":"\n

This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of Embed Page, see Embed Page<\/a>.<\/p>\n

Overview<\/h3>\n

The Embed Page control allows you to insert another web page into an Explorer page.<\/p>\n

The following diagram shows an Embed Page control being configured to show a weather map:<\/p>\n

\"embedpage\"<\/a><\/p>\n\n\n\n\n\n\n
Content:<\/strong><\/td>\nThe URL of the web page you want to embed. The URL must be a secure https:\/\/ address. Note that you cannot embed a Google website.<\/td>\n<\/tr>\n
Add Events:<\/strong><\/td>\nYou can add an event published by another control on the page (or set as a page default) to dynamically update the displayed web page.When you add an event, it is automatically appended to the URL. If the event needs to be added to a different position in the URL, you can manually rewrite the URL to include the event in the correct way. For example, in the following URL:<\/p>\n

https:\/\/weather.yahoo.com.au\/forecast\/{{region}}<\/p>\n

{{region}} indicates the event.<\/p>\n<\/td>\n<\/tr>\n

Move Up:<\/strong><\/td>\nWhen you embed the page, the content is automatically positioned such that the top\u00a0left of the web page sits in the top\u00a0left 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\u00a0the desired area.<\/td>\n<\/tr>\n
Move Left<\/strong>:<\/td>\nThe number of pixels to move the content left to view the desired area.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\n<\/div>\n

\u00a0<\/p>\n

Tutorial<\/span><\/h3>\n
\n

The Embed Page control works best on pages with a fixed element that you want to display, such as a picture.<\/p>\n

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.<\/p>\n

In this tutorial, we\u2019ll look at adding an embedded page that will display a weather map for Australia. We'll also look at adding some links that will let the map zoom in on a selected state.<\/p>\n

\"embedpage\"<\/a><\/p>\n

Let\u2019s go through this process, step-by-step.<\/p>\n

\n

Step by Step: Displaying an Embedded Page\u00a0<\/span><\/span><\/span><\/h3>\n

Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the grid<\/a>\u00a0layout \u2013 you can adjust the rows and columns if you like but it\u2019s not important for this exercise.<\/p>\n

You will need to adjust the configuration to suit your data at your site.<\/p>\n

\u00a0<\/p>\n

Step 1.\u00a0\u00a0Add the Embed Page component to the page<\/strong><\/p>\n

\"embedpagedrag\"<\/a><\/p>\n

Drag and drop the Embed Page component\u00a0onto a grid cell.<\/p>\n

\u00a0<\/p>\n

Step 2. Configure the Embed Page component<\/strong>\u00a0<\/p>\n<\/div>\n

\"embedpageconfig1\"<\/a><\/p>\n

Configure the Embed Page component as follows:<\/p>\n