Skip to main content
Skip table of contents

Image Widget

Definition

The Image Widgets allows to configure the display/edit of Image attribute.

Image Edit

Image Display

Capture d'écran 2024-01-11 170549.png

Capture d'écran 2024-01-11 170416.png

Configuration

Properties

Properties name

Type

Mandatory

Description

Values (default value in bold)

Image

Image Edit

Image Display

width

String

NO

Defines the width of the image (in millimieter).

50mm

(tick)

(error)

(tick)

height

String

NO

Defines the height of the image (in pixel).

10px

(tick)

(error)

(tick)

src

String

NO

Defines the source (url) of the image.

-

(tick)

(error)

(error)

shape

String

NO

Defines the shape of the image.

ROUNDED, CIRCLE, THUMBNAIL

(tick)

(error)

(tick)

resizeQuality

Float

NO

Defines the quality of the resized image.

Between 0 and 1.0

(error)

(tick)

(error)

maxWidth

String

NO

Defines the maximum width of the image (in millimeter).

500mm

(error)

(error)

(tick)

maxHeight

String

NO

Defines the maximum height of the image (in pixel).

150px

(error)

(error)

(tick)

maxFileSizeKb

Integer

NO

Defines the maximum size (in KB) of the imported image.

5000

(error)

(tick)

(error)

fileType

String

NO

Defines the list image formats.

If the user update an unauthorized file, he will be warned by a pop-up.

*, PNG, JPEG...

If value = *, all formats will be accepted.

(error)

(tick)

(error)

alt

String

NO

Defines atext to be displayed when the image is unavailable.

-

(tick)

(error)

(error)

alignment

String

NO

Defines the alignment of the image.

LEFT, CENTER, RIGHT

(tick)

(error)

(tick)

acceptedFileTypes

-

NO

Allows to list the allowed image formats.

-

(error)

(tick)

(error)

acceptedFileTypes properties

Properties name

Type

Mandatory

Description

Values (default value in bold)

Image

Image Edit

Image Display

fileType

String

NO

Defines the list image formats.

If the user update an unauthorized file, he will be warned by a pop-up.

*, PNG, JPEG...

If value = *, all formats will be accepted.

(error)

(tick)

(error)

Example

Image Edit

Image Display

XML 
<widget id="photo" xsi:type="ctdbum:AttributeEditorWidgetType">
	<hidden>false</hidden>
	<config>
		<editor>
			<editWidget xsi:type="ctdbum:ImageEditWidgetType">           
				<config>
					<acceptedFileTypes>
						<fileType>*</fileType>
					</acceptedFileTypes>
					<maxFileSizeKb>5000</maxFileSizeKb>
					<resizeQuality>1.0</resizeQuality>
				</config>
			</editWidget>
		</editor>
		<label></label>
		<lockedInUi>false</lockedInUi>
		<mode>READ_WRITE</mode>
		<multiValued>false</multiValued>
		<override>true</override>
	</config>
	<attributeId>photo</attributeId>
</widget>
XML 
<widget id="photo" xsi:type="ctdbum:AttributeEditorWidgetType">
	<hidden>false</hidden>
	<config>
		<editor>
			<displayWidget xsi:type="ctdbum:ImageDisplayWidgetType">
				<hidden>false</hidden>
				<config>
					<alignment>LEFT</alignment>
					<height>10px</height>
					<maxHeight>150px</maxHeight>
					<maxWidth>1000mm</maxWidth>
					<shape>THUMBNAIL</shape>
				</config>
			</displayWidget>
		</editor>
		<label></label>
		<lockedInUi>false</lockedInUi>
		<mode>READ</mode>
		<multiValued>false</multiValued>
		<override>false</override>
	</config>
	<attributeId>photo</attributeId>
</widget>

Read Next

  • Features

    Design screens and business features to manage objects.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close