Show images along with choice options in NITRO Forms

Applies to:
Crow Canyon NITRO activated sites in:
SharePoint Online and On-Premises 2013/2016/2019

Description

Standard SharePoint choice columns show options as text only. Adding an image/icon next to each choice option enhances the form look and feel and makes the choice column easier to use. This can be configured using ‘Form Event Actions’ in NITRO Forms.

In this article, we have taken example of ‘Office Application’ column with below choice options and added images for each option.

  • Microsoft Word
  • Microsoft Excel
  • Microsoft Access
  • Microsoft PowerPoint

Note: This article has script for both multi-select and single-select choice columns. For single-select columns, the script is written for columns configured to show options as ‘Radio Buttons’. Script is not designed to work in new and edit forms for columns configured to show options as ‘Drop-Down Menu’.

Summary of steps

  1. Upload required images in ‘Site Assets’ document library.
  2. Configure ‘Form Event Action’ to show images for a choice column on the form.

Detailed steps

1.      Upload required images in document library.

Go to Site Contents -> Site Assets and upload images for each of the choice column options

2.      Configure ‘Form Event Action’ to show images for a choice column on the form.

Navigate to the list -> List Settings -> Crow Canyon NITRO Forms -> Advanced section (in left-hand panel) -> Form Event Actions. Configure a new form event action on form load with an ‘Execute Script’ script action as shown below:

Script for multi-choice column (‘Checkboxes’):

var optionsMappings = {
    ‘Microsoft Word’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/MS Word.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    },
    ‘Microsoft Excel’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/MS Excel.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    },
    ‘Microsoft Access’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/MS Access.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    },
    ‘Microsoft PowerPoint’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/PowerPoint.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    }

}

var fieldName = ‘OfficeApplication’;

if (window.ccs_g_FormUI.isDisplayForm) {
    var result = ‘‘;
    var objVal = window.ccs_g_FormUI.listItem.get_item(fieldName);
    if (objVal && objVal.length > 0) {
        for (var i = 0; i < objVal.length; i++) {
            debugger;
            if (optionsMappings.hasOwnProperty(objVal[i])) {
                var objSett = optionsMappings[objVal[i]];
                var imgSrc = ‘<img src='‘ + objSett.Image + ‘' style='margin-right: 3px;margin-bottom: 3px;width:’ + objSett.Width + ‘;height:’ + objSett.Height + ‘'></img>‘;
                result = (result == ‘‘ ? ‘‘ : result + ‘; ‘) + imgSrc + objVal[i];
            } else {
                result = (result == ‘‘ ? ‘‘ : result + ‘; ‘) + objVal[i];
            }
        }
    }

    $(‘#ccs_control_’ + fieldName).html(result);
} else {
    for (var value in optionsMappings) {
        var selCheckBox = $(‘#ccs_control_’ + fieldName + ‘ input[value='‘ + value + ‘']’);
        if (selCheckBox.length > 0) {
            var objSett = optionsMappings[value];
            selCheckBox.next().prepend(‘<img src='‘ + objSett.Image + ‘' style='margin-right: 3px;margin-bottom: 3px;width:’ + objSett.Width + ‘;height:’ + objSett.Height + ‘'></img>‘);
        }
    }
    }

In above script, modify choice values (example, ‘Microsoft Word’), column internal name (that is, ‘OfficeApplication’) and image URLs as per image shown below. Also, please ensure that all users have at least read permissions on choice option images.

Script for single select choice column:

Refer above image for replacing choice options text, image URLs and column internal name in the script given below.

Note: For single-select columns, the script is written for columns configured to show options as ‘Radio Buttons’. Script is not designed to work in new and edit forms for columns configured to show options as ‘Drop-Down Menu’.

var optionsMappings = {
    ‘Microsoft Word’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/MS Word.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    },
    ‘Microsoft Excel’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/MS Excel.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    },
    ‘Microsoft Access’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/MS Access.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    },
    ‘Microsoft PowerPoint’: {
        Image: ‘https://contoso.sharepoint.com/sites/NITRO/IT/SiteAssets/PowerPoint.png’,
        Width: ‘25px’,
        Height: ‘25px’,
	 ImagePlacement: ‘left’,//left/right
        VerticalAlignment: ‘middle’,//top/bottom/middle
    }

}

var fieldName = "SingleChoice";

if (window.ccs_g_FormUI.isDisplayForm) {
    var result = "";
    var objVal = window.ccs_g_FormUI.listItem.get_item(fieldName);
    if (objVal) {
        
            if (optionsMappings.hasOwnProperty(objVal)) {
                var objSett = optionsMappings[objVal];
                var imgSrc = "<img src='" + objSett.Image + "' style='margin-right: 3px;margin-bottom: 3px;width:" + objSett.Width + ";height:" + objSett.Height + "'></img>";
                result = (result == "" ? "" : result + "; ") + imgSrc + objVal;
            } else {
                result = (result == "" ? "" : result + "; ") + objVal;
            }
        
    }

    $("#ccs_control_" + fieldName).html(result);
} else {
    for (var value in optionsMappings) {
        var selCheckBox = $("#ccs_control_" + fieldName + " input[value='" + value + "']");
        if (selCheckBox.length > 0) {
            var objSett = optionsMappings[value];
            selCheckBox.next().prepend("<img src='" + objSett.Image + "' style='margin-right: 3px;margin-bottom: 3px;width:" + objSett.Width + ";height:" + objSett.Height + "'></img>");
        }
    }
    
}