The Image Annotation field for Mi-Apps can be configured to capture multiple images in the NextGen Designer. Depending upon the requirements of your Mi-Apps form, you may need to temporarily hide or show images in the field. For instance, the Image Annotation field may be used to capture images of a Sample where multiple Samples are collected per form. Although it is possible to get the image data from an image in the Image Annotation field and also to remove an image from an Image Annotation field, it is highly suggested to use Image Tagging. 


There are 2 Steps for implementing Image Tagging. 


Step 1: Tag Images

Each image in an Image Annotation field can have any number of text "Tags" added to it. This is accomplished with the script API imageSetTags. For example:


_form.imageSetTags("S_BulkPhoto", i, [sampleId]);

where S_BulkPhoto is the Image Annotation field id, i is the image index, and sampleId is a tag string.


For instance, the following function could be called when the Sample is saved. This will set a tag for each un-tagged image.


// Set a tag from SampleId to each photo that does not already have a tag
function addSampleIDtoImageTags(){
    var SampleId = _form.getValue("SampleId");

    for (var i = 0; i < _form.imagesGet("S_BulkPhoto ").length; i++) {

        // Determine if an image has not been deleted
        if (_form.imagesGet("S_BulkPhoto ")[i].RemovedUser == null) {
            var foundEmptyTag = false;

            if (_form.imagesGet("S_BulkPhoto ")[i].Tags.length == 0) {
                foundEmptyTag = true;
            }
            else {
                // Look through each tag of an image
                for (var j = 0; j < _form.imagesGet("S_BulkPhoto ")[i].Tags.length; j++) {
                    if (_form.imagesGet("S_BulkPhoto ")[i].Tags[j].Value == "") {
                        foundEmptyTag = true;
                    }
                }
            }

            // Just empty tag(s), so set a tag using the current SampleId
            if (foundEmptyTag) {
                _form.imageSetTags("S_BulkPhoto ", i, [SampleId]);
            }
        }
    }
}



Step 2: Filter Tags

To show images with a particular tag and hide others, the script API imageAnnotationTagFilter sets the tag(s) to display. For example:


_form.imageAnnotationTagFilter("S_BulkPhoto", [sampleId]);

where S_BulkPhoto is the Image Annotation field id and [sampleId] is an array of tag strings. Images that have been tagged with the tag string from Step 1 will be displayed in the Image Annotation field while other images are hidden from view.


When the SampleId is set to a new value, or an existing sampleId, the following function will filter to display only those images with the tag of the SampleId


// Filters Photos by SampleId
function handleImagePhotoTag() {
    var SampleId = _form.getValue("SampleId");

    _form.imageAnnotationTagFilter("S_BulkPhoto", [SampleId]);
}


Note that any images added to the image annotation through conventional UI (user action) will automatically be tagged with whatever filter tag(s) are set on that field.