Configuration Guide
Configuration Guide
Breadcrumbs

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

check mark

cross mark

check mark

height

String

NO

Defines the height of the image (in pixel).

10px

check mark

cross mark

check mark

src

String

NO

Defines the source (url) of the image.

-

check mark

cross mark

cross mark

shape

String

NO

Defines the shape of the image.

ROUNDED, CIRCLE, THUMBNAIL

check mark

cross mark

check mark

resizeQuality

Float

NO

Defines the quality of the resized image.

Between 0 and 1.0

cross mark

check mark

cross mark

maxWidth

String

NO

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

500mm

cross mark

cross mark

check mark

maxHeight

String

NO

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

150px

cross mark

cross mark

check mark

maxFileSizeKb

Integer

NO

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

5000

cross mark

check mark

cross mark

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.

cross mark

check mark

cross mark

alt

String

NO

Defines atext to be displayed when the image is unavailable.

-

check mark

cross mark

cross mark

alignment

String

NO

Defines the alignment of the image.

LEFT, CENTER, RIGHT

check mark

cross mark

check mark

acceptedFileTypes

-

NO

Allows to list the allowed image formats.

-

cross mark

check mark

cross mark

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.

cross mark

check mark

cross mark

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>
  • Features

    Design screens and business features to manage objects.