X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Image

<Image> can be used to embed graphics into Web Apps.

Instructions for use

An <Image> control is created with the <Image> element.

<Image>
...
</Image>

<Image> controls can be used in all available layout types: For more information, see Layouts.

Attribute

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <Image> controls.

Attribute

Description

value

Required

Graphic that is displayed.

Indicates a property (of type Base64 or Image) within the component. Required to display graphics dynamically.

Possible values:

File path to the location of the graphic or string for data binding (Image, Base64, String, URL)

Note:

  • If an internal graphic is to be used, the graphic file must be located in the Resources folder directly below the Web App Project.

  • If the graphic is to be accessed via an external URL, the attribute type="external" must be set during input.

border

Defines whether a border is displayed around the control.

Possible values:

true/false

border-left

Defines whether a left border is displayed.

Possible values:

true/false

border-right

Defines whether a right border is displayed.

Possible values:

true/false

border-top

Defines whether a top border is displayed.

Possible values:

true/false

border-bottom

Defines whether a bottom border is displayed.

Possible values:

true/false

height

Height of the control

Possible values:

Any integer

iconColor

Defines the color of the icon.

Possible values:

  • Hexadecimal color value, e.g. ff5a00

Note:

  • Do not use a hash before the color value.

  • Do not use an abbreviated notation of the color value.

  • Color code from the color palette of the Web App, e.g. A200
    For more information, see Theming.

tooltip

Specifies that a tooltip should be displayed under a graphic/icon.

  • Translatable

  • Data binding possible

Possible values:

Any string or string for data binding

units

Specifies the unit that applies to sizes.

Possible values:

  • pixels (default)

  • percents

width

Width of the control

Possible values:

Any integer

Note:

The size of the image can be adjusted using the general attributesheight and width. By default, this is in pixels.
If only height or width is specified, the aspect ratio is maintained. If both height and width are specified, the image will be distorted.

If size specifications are not defined either on the <Image> control or on the parent element (using the general attributes height and width), some browsers may experience display problems.


Actions

The following actions are available for <Image> controls. For more information about actions, see Actions.

<SelectAction>

You can insert the Select action using the <SelectAction/> element within <Image>. The action is triggered when the user selects the image.

Note:

You must insert the <SelectAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

<DoubleClickAction>

You can insert the DoubleClick action using the <DoubleClickAction/> element within <Image>. The action is triggered when the user double-clicks the image.

Note:

You must insert the <DoubleClickAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

Examples

Here you will find various examples of <Image> controls.

Example 1: <Image> from static resource

The following example shows how to use the <Image> tag.

XML
<DetailComponent name="ExampleImage" path="ExampleImage" displayName="Example Image">
	<FlowLayout>
		<Image value="image.jpg"/>
	</FlowLayout>
</DetailComponent>

Example 2: <Image> with data binding (dynamic from a Technical Process) - graphics in Base64 format

The following example shows how to use the <Image> tag with data binding.

XML
<DetailComponent path="ExampleImageWithDataBinding" name="ExampleImageWithDataBinding" displayName="Example Image with Data Binding" default="true" process="Image.wrf">
    <Properties>
        <Property name="image" type="Base64" />
    </Properties>
    <FlowLayout>
        <Image value="#image"/>
    </FlowLayout>
</DetailComponent>

The data supplied by the Technical Process Image.wrf must have the following format:

XML
<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
    <image mediaType="image/jpeg">
		<!-- Base64String -->
	</image>
</Ok>

Example 3: <Image> with data binding (dynamic from a Technical Process) - graphics from an external URL

The following example shows how to use the <Image> tag with data binding.

XML
<DetailComponent
	path="ExampleImageWithDataBinding"
	name="ExampleImageWithDataBinding"
	displayName="Example Image with Data Binding"
	default="true"
	process="Image.wrf">
		<Properties>
			<Property name="image" type="Image" />
		</Properties>
	<FlowLayout>
		<Image value="#image"/>
	</FlowLayout>
</DetailComponent>

The data supplied by the Technical Process Image.wrf must have the following format:

XML
<?xml version="1.0" encoding="UTF-8" ?>
<Ok>
    <image mediaType="image/png" type="external">
       <![CDATA[https://softproject.de/de/wp-content/uploads/sites/2/2019/01/LogoSoftProject.png]]>
    </image>
</Ok>