HTML Viewer

Kalipso - Developing - Form - Controls - Type - HTML Viewer

An HTML Viewer is like a web browser and lets you display web pages. You can display local or remote web pages. JavaScript is supported. An HTML Viewer can interact with the user through its Events or HTML Execute JScript Action.

This control is not available for Windows CE/Mobile.

To access location, you should first make a call to Kalipso GPSConnect to activate the necessary permissions.

Value - Its value is the full path of the file/web page being displayed.

Properties

Tab - General

Common

  • Name - Name of the Control. This Name will be used to identify the Control throughout the Project. The name of the Control can only contain letters, digits or underscore (_).

  • URL/File - URL or file path to be displayed in the Control

  • Description - Not applicable to this control.

  • Plane - Plane of the Form where the Control should be created. Check the Planes chapter for more information.

  • Visible - With this option selected, the control is (or is not) visible.

  • Enabled - With this option selected, the control is (or is not) enabled. It may be visible (previous option), but it may not be enabled. In this case an event associated with the control is not executed.

Layout

  • X - x position of the Control from left

  • Y - y position of the Control from top

  • Width - Width of the Control.

  • Height - Height of the Control

In relation to all these layout options, it is possible to set this value in runtime via the “Set Property” Action. You can also retrieve this value in runtime via the “Get Property” Action.

Style

Appearance

  • Background - Background color of the Control. You can set the color for the background.

  • Opacity - Set the percentage of opacity for the background.

You can set this value is runtime via the “Set Property” Action. You can retrieve this value in runtime via the “Get Property” Action.

On the right side of the Style section, you can choose templates with pre-defined styles or configurable ones. By clicking on this option, the following style possibilities appear:

  • Styles

    • None

    • Base

Border

  • Border - Yes or No

Tab - Content

This option provides an area for inserting the HTML code to be executed through the control.

Source – Origin of the data to show in the control

  • Nothing - Empty HTML.

  • Database Table - Connect the HTML with a Column of a Database Table.

  • Expression - Fill the HTML with the result of an Expression.

After choosing the source of the data, you will need to fill in a data set in the fields below. Thus:

Database Table

There are two ways of connecting your HTML to a Database Table therefore presenting the value of a specific Column.

  • 1 – You can do it by simply defining the "Table" and "Column" properties and then using the "First Record"/"Last Record"/"Next Record"/"Previous Record" and "Refresh"/"Refresh Plane"/"Refresh Control" Actions.

  • 2 – The other way is to implicitly define a "Select" statement. To do so, you have to define the "Table", "Column", "Where the value of" and "It’s equal to" properties then use the Refresh", "Refresh Plane" or "Refresh Control" Action. This way you are telling Kalipso to perform a "Select" statement like this:

Select <Column> from <Table> where <Where the value of> = <It’s equal to>

Target (store the control's Value in) If this property is set, when Kalipso tries to use the value of this HTML for executing one of the above Actions, it checks if the value is non empty; if it’s not, Kalipso will produce an automatic error message.

  • Global Variable – Global Variable where to store the HTML value;

  • Local Variable – Local Variable where to store the HTML value;

  • Database

    • Table – Table where to store the HTML value;

    • Column – Column where to store the HTML value;

Tab - Actions

For each control, actions can be associated. For this, with the control selected, it is possible to access this tab and associate an action to the control. For more information on the actions available and how to use them click here.‌‌‌

Shortcuts‌‌

  • F2 - Actions

  • F3 - General Properties

Last updated