Create your first Webview

Getting started with Touch Portal

This overview will show you how to create your first Webview. We will create a webview showing a website.
Webview are available from Touch Portal version 4.3. Both your mobile application and the desktop application need to be on this version to be able to use Webviews.

Step 01: Opening the control edit screen

We start with clicking on an empty space on a page where we want the webview to be placed. Webview can, the same as buttons, stretch over multiple grid cells on your page. We will add the webview on the space next to the button we already have on this page.

This will open the known edit page for you control. This opens by default as a button but we can change that to a webview. Currently the selector is set on a button, but if you click on it you can select a webview.

This will change the whole screen into the Webview edit screen. All options on this page will be for your Webview.



Step 02: The Webview edit screen

The Webview edit screen looks similar to the button edit screen. Lets get into the section:

1. Preview

This is the preview of the webview rendering. It will not render the website on your desktop preview but it will show the title and background settings.

2. Webview engine Settings

These are the webview engine specific settings.

Webview Url
This is the url which the webview will load on start. This url needs to be formatted correctly and include the protocol as well. Webview do not prefix or append required protocols or characters. If a url is not correct, it will not load on the webview.

Webview Margins
You can add margins to the webview to ensure the webview is placed correctly on your page. This can be handy if you want to add a title for the webview but do not want that to overlap the actual webside.

Webview Zoom factor
With this value you can set a zoom level. For some website you need to zoom the webside for it to show properly on your webview control and to be able to use it normally. 1.0 is the normal zoom level, everything above will zoom in, everything between 0 and 1.0 will zoom out. Negative numbers cannot be used.

3. Webview control settings

In this panel you can customize your webview with a lot of options just like you can with buttons and sliders.



Step 03: Set up the webview

For this example we have made the webview take up a grid size of 4 by 3 cells as that is the space we have available for the webview. We set it to load Touch Portals url when the page loads.



Result

Your Page will now look like this on your device.



Navigate to a different url

You can use actions to navigate that specific webview to a different url. Let's first add the proper action.

As you notice, for this action to work we need to have the webview ID. You can get the ID of the Webview the same way as with a button.

Let's open the Webview editor again and navigate to the "Misc Settings" of the webview where we can find the ID. Copy that ID.

Let's go back to the button and paste the ID in the proper field. And now when you press that button it will load YouTube on the webview.


Back to Guide Overview