Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
2500_config_apps:0700_add_edit_attributes:0600_picture_attrib [2022/08/21 22:48] – removed - external edit (Unknown date) 127.0.0.12500_config_apps:0700_add_edit_attributes:0600_picture_attrib [2026/08/13 00:55] (current) – ↷ Links adapted because of a move operation localdev
Line 1: Line 1:
 +[<10>]
 +====== Setting Properties of Picture Attributes ======
 +
 +The Picture attribute type represents images (pictures). When an attribute of this type is shown on a form of the business object that owns the attribute //**AwareIM**// generates the Browse button that allows the user to attach a particular image as an attribute value (only image files, such as .gif, .jpeg, .bmp files should be attached). The image is displayed on the form (see the example below):
 +
 +{{ docs:images:form_sections_example.png?nolink&600 |}}
 +
 +Most properties you need to specify for attributes of the Picture type are common to all attribute types – see [[2500_config_apps:0700_add_edit_attributes:0100_common_props|Common Properties]]. The properties specific to the Picture type are described below. 
 +
 +===== Picture represents signature =====
 +
 +Tick this checkbox if a picture attribute stores an electronic signature of the user. If this option is on at runtime AwareIM will show the box in which the user can provide his signature by using the mouse (or fingers/stylus pen on mobile devices). The signature will then be stored as a picture in the attribute.
 +
 +===== Stored in =====
 +
 +You can specify where the images uploaded by the user for the picture attribute will be stored. By default all images are stored in the database, but you can also store images in the file system on disk or in Amazon S3 storage. 
 +
 +==== Database ====
 +
 +This is the default option. Images will be stored by AwareIM in the database. You don’t need to specify anything else.
 +
 +==== File System ====
 +
 +If you select the File System option images will be stored in the file system of the //server// where //**AwareIM**// is running. The exact location of the image is determined from the value of the specified expression. For example, if the file path of the image is stored in the Path attribute, the expression should be Object.Path, where Object is the name of the object that owns the attribute.
 +
 +==== Amazon S3 ====
 +
 +If you select the Amazon S3 option images will be stored in the Amazon S3 storage system. You need to do the following:
 +
 +  - Create an account with Amazon at this URL: [[https://aws.amazon.com/|https://aws.amazon.com]]
 +  - Create an IAM user using the IAM console. 
 +  - Open the Security Credentials tab and click on the “Create Access Key” button.
 +  - In the resuling dialog box click "Show User Security Credentials" to view the IAM user’s access key ID and secret access key. 
 +  - Click the Settings button in //**AwareIM**// next to the “Stored In” property and enter the access key ID and secret access key in the dialog that opens (note that this has to be done just once – if you have another attribute which is stored in Amazon S3, you don’t need to do it again).
 +Just like with the File System storage you also need to specify an expression that holds the path to the image in the Amazon S3 storage. This path includes the name of the AWS bucket and the name of the AWS region:
 +
 +[[https://AWSBucketName.s3-AWSRegionName.amazonaws.com/AWSObjectName|https://AWSBucketName.s3-AWSRegionName.amazonaws.com/AWSObjectName]]
 +
 +For example, if you store the name of the bucket and region in the corresponding attributes of the SystemSettings object the path may look like this:
 +
 +<code aim>'https://' + SystemSettings.AWSBucketName + '.s3-' + 
 +SystemSettings.AWSRegionName +'.amazonaws.com/' + 
 +AttributeName + '_' + Object.ID</code>
 +
 +where Object is the name of the object that owns the attribute.
 +
 +===== Max. file size =====
 +
 +If specified the value indicates maximum image size that can be stored in this attribute. If the user uploads a larger image, the image will be automatically rejected.
 +
 +===== Allowed extensions =====
 +
 +This property specifies file extensions that can be stored in the attribute. If user uploads an image with a different extension it will be rejected.
 +
 +===== Display settings =====
 +
 +This property describes presentation settings specific to the picture:
 +
 +==== Display picture as circle ====
 +
 +Tick this checkbox to show the picture as a circle like on the form above
 +
 +==== Thumbnail and actual representation ====
 +
 +A picture can be represented on a form or in a query results as a smaller (thumbnail) version of the actual image. If you want to present a smaller version of the image you have two options:
 +
 +  - Load two different versions of the image and store them in different attributes of the object
 +  - Load and store just one image and get AwareIM to scale it down automatically when displaying it on forms or query results
 +When you select the first option you need to provide the name of another attribute in the business object (of the Picture type) that would store the larger (actual size) version of the image. When you select the second option you can specify the scale in which the image will be displayed on forms and query results independently.
 +
 +You can also tick the “Show actual representation when thumbnail is clicked” checkbox. If you do this //**AwareIM**// will show the larger (actual size) version of the image when the user clicks on the thumbnail. The larger version will be shown regardless of whether the larger image is stored in the same or different attribute. The larger image will be shown using the popular “lightbox” technology.
 +
 +==== Embed image data into HTML ====
 +
 +When a picture stored in the database or in the file folder outside of the web application directory (AwareIM/Tomcat/webapps/AwareIM is displayed to the user, by default //**AwareIM**// extracts the picture from the database and creates a temporary file. This file  is then used by the browser to display the picture. To prevent accumulation of temporary images you can tick the option to embed the image data into HTML. In this case //**Aware**////**IM**// will encode the image data into the HTML itself, so that the data is directly given to the browser without the need to create a temporary file.
 +
 +==== Allow cropping and resizing ====
 +
 +If this checkbox is ticked users will be able to crop and resize the image before it is saved