avatar-field

This component allows you to upload an avatar image. You can choose a picture from your device or use your camera to capture one.

Avatar Field

The avatar-field component can be used independently or within a form component, each offering distinct benefits. As a standalone, it provides flexibility for isolated usage without requiring a form structure. When wrapped in a form, it leverages the form’s instanceId, enabling better coordination and usability when managing multiple fields in a jig.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
instanceId	The unique identifier for the avatar-field.
label	Provide a label/name for the avatar. 'Label' is displayed as a placeholder when no value is specified. Note the label is displayed at the top of the popup screen where you select images.

Other options
color	Sets the color of the avatar-field based on conditions by using the when property. First evaluated to true will be used. Choose a color from the provided color palette. Default color is grey if the property is not specified in the YAML. See the list of available colors in .
errorText	Add text, string, or expressions to show text under the avatar-field indicating an error/invalid value in the field. Text is shown in isNegative (red) styling.
helperText	Add text, string, or expressions to guide users by showing text under the avatar-field. Helper text is displayed only when there is no errorText.
imageQuality	Image quality after compression (from 0 to 100, where 100 is the best quality). On iOS, values larger than 80 don't produce a noticeable quality increase in most images, while a value of 80 will reduce the file size by about half or less compared to a value of 100. Default: 100 (Android)/ 80 (iOS).
icon	Add an icon to the title. A list of icons is available. See for more information.
imageCropping	You can set the following with imageCropping : isEnabled - allows you to crop an image if set to true. isFreeStyleCropEnabled - when set to true it supports custom cropping to change the size or aspect ratio of an image. height - maximum allowed is 5000px width- maximum allowed is 5000px
initialValue	Initial value of the relevant field. You can use this to preset value, so user doesn't need to add anything and use this "default". Using the reset-state action with initialValues does not clear the field, it resets the field back to it's initialValue.
isAutoFocused	If true it will get focus immediately after it is displayed.
isHidden	If true the avatar-field will be hidden on the form. If set to false the field will be shown.
isIgnored	When true, the field will be ignored when submitting the form and the content will not be stored.
isOptionalLabelHidden	If the field is optional you can turn off the "(optional)" label by setting this field to true. Note the (optional) text in the label is displayed at the top of the popup screen where you select images. This property works in combination with isRequired: false.
isRequired	Set to true when the field is required. Useful when you use it in form submission. When set to false the (optional) text in the label is displayed at the top of the popup screen where you select images.
maximumFileSize	Maximum file size in bytes. Set to 'none' to disable size check. Default value is =6 * 1024 * 1024 6MB.
nextProperty	Name of the property you want to focus next in the form when you use return/next on a keyboard.
style	The following property settings are available: flex - Flex property if rendered inside row. isBusy - Displays a spinner. isDisabled - disables the avatar-field preventing the image selection popup from displaying. isPositive More than one can be true. It will be evaluated based on priority.
value	The value to show for the field. Text field is a controlled component, which means the internal value will be forced to match this value prop if provided. In most cases, you don't need to use this.

Actions
onChange	The action is triggered when the content in the avatar-field is changed. Use IntelliSense (ctrl+space) to see the list of available actions.

State Configuration	Key	Notes
[email protected].	value	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.

Considerations

• The avatar-field can only be used in a jig.default inside of a form component.

• Only Dynamic Data or SQL data can be used to ensure that the image can be saved.

Examples and code snippets

Avatar-field example

Avatar

This component uploads pictures for avatars. After clicking on the plus next to the avatar, a menu will appear to choose whether to upload an existing image from your device or use the camera to take a new image. After loading and cropping the image, press the Upload picture button at the bottom to call the action to save the image.

Examples:

See the full example using dynamic data in GitHub

avatar (dynamic)

children:
  - type: component.form
    options:
      children:
        - type: component.avatar-field
          instanceId: avatar-field
          options:
            label: Upload avatar
            color:
              - when: true
                color: color2
            style:
              flex: 1
            imageCropping:
              width: 120
              height: 120
            isHidden: false
            isIgnored: false