Skip to main content
Version: 10.7

PicturePicker

The PicturePicker provides image thumbnails directly within the Form data. Insert an image, sketch or map by clicking on the plus icon.

An annotation written directly to the taken image can be shown or hidden within the Form by setting the appropriate property in the data-hf-options. Control the thumbnail size by the data-hf-option size, enable additional features or disable the default feature "pictures" by the data-hf-option "features".

<div
    id="picture_no1"
    data-hf-control="PicturePicker"
    data-hf-options="{
        label: 'Pic #1',
        features: ['picture', 'sketch','map','audio','document'],
        size: 1,
        showComment: true 
    }"
></div>

FormControl Options​

dataCallback​

Call a JS-method for data changes in feature items. E.g. when the location in a map is changed.
How to use:
dataCallback: HFFormdefinition.Namespace.Method
Type: function
Signature: function(event: IDataCallbackEvent) => void

disabled​

Set "true" whenever the PicturePicker should be disabled.
How to use:
disabled: true
Type: boolean

doNotCopy​

Set "true" whenever the field should be cleared if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

features​

Set "features" whenever the PicturePicker should reference to one or all of the features "picture","sketch", "map", "audio", "model", "documents" or "camera" for directly taking a picture by listing those in the array. Default link is set to the picture gallery.
How to use:
features: ['picture', 'camera', 'sketch', 'map', 'audio', 'document']
Type: ('picture' | 'camera' | 'sketch' | 'map' | 'audio' | 'document' | 'model')[]

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

label​

Define a label for your control element.
How to use:
label: 'Pic #1'
Type: string

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.
How to use:
onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: string) => void

referenceAddition​

Add a custom string to reference section of the attachment.
How to use:
referenceAddition: 'Example addition'
Type: string

showComment​

Set "true" to show annotations beyond the taken picture, sketch or map within the Form.
How to use:
showComment: true
Type: boolean

size​

Set "size" to change the display size in your Form. You can choose between the values 1 to 4.
How to use:
size: 1
Type: number
Default: 2

thumbnailSize​

Set "thumbnailSize" to change the thumbnail creation multiplier for the PicturePicker. Set it to "original" for the size of the origin image.
How to use:
thumbnailSize: 2
Type: number | 'original'
Default: 1
Note

The data-hf-option size: 1 offers the smallest size, use this value to place four PicturePicker Controls inside a row (grid column4 e.g.)
The data-hf-option size: 2 is equivalent to the former size of the PicturePicker Control, three controls can be implemented in one row without layout problems.
Use size: 3 to place two controls in one row and finally size: 4 to offer the largest PickerPicture Control, it uses the whole available space inside a block i.e. 460px width.

dataCallback Types
export enum DataCallbackType {
    FeatureAdded = 'featureAdded',
    RemarkChanged = 'remarkChanged',
    ObjectLinkChanged = 'objectLinkChanged',
    FilenameChanged = 'filenameChanged',
    MapLocationChanged = 'map:locationChanged',
    MapRouteChanged = 'map:routeChanged',
    ModelObjectSelecetd = 'model:objectSelected',
}

export interface IDataCallbackEvent {
    type: DataCallbackType;
    data: any;
}

Picture Picker - &quot;size: 1&quot;Dark Picture Picker - &quot;size: 1&quot;
Picture Picker - "size: 1"

Picture Picker - &quot;size: 2&quot;Dark Picture Picker - &quot;size: 2&quot;
Picture Picker - "size: 2"

Picture Picker - &quot;size: 3&quot;Dark Picture Picker - &quot;size: 3&quot;
Picture Picker - "size: 3"

Picture Picker - &quot;size: 4&quot;Dark Picture Picker - &quot;size: 4&quot;
Picture Picker - "size: 4"

Hint

Extra Labels for this element can be set.

copyValueFrom​

Define a FormControl that synchronizes its value with the current field. This synchronization process occurs upon navigating to the page where the current control is situated. It only occurs if the field is empty or the mode is set to "overwrite".

<div
    id="picture_no1"
    data-hf-control="PicturePicker"
    data-hf-options="{
    label: 'Pic #1',
    features: ['picture', 'sketch','map','audio','document'],
    size: 1,
    showComment: true,
    copyValueFrom: 'picture_no2'
}"
></div>
Option interface
interface ICopyValueFromObject {
    sourceId: string;
    mode: 'overwrite' | null;
    callback: (value: string) => string;
}

type CopyValueFromType = string | ICopyValueFromObject;

callback​

Specify a function to process value before copy.
How to use:
callback: HFFormDefinition.Namespace.processValue
Type: function
Signature: function(value: string) => string

mode​

Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
How to use:
mode: 'overwrite'
Type: string

sourceId​

Specify source id
How to use:
sourceId: 'target_id'
Type: string