Add images to options in a radio button

From pmusers
Jump to: navigation, search

The options in radio buttons only contain text. In this example, JavaScript is used to insert images next to each text option in a radio button.


DynaForm: Radio-With_Images.json (right click and select Save link as)
Tested in: ProcessMaker 3.2.3 Community with Firefox 52


Create the following DynaForm which has a radio button with the ID "selectImage":

Radio-FormWithRadioInDesigner.png

This radio button has the following options:

Radio-optionsInRadio.png

An image will be inserted next to the text label for each of these options. These images can be stored in the Public Files, but in this example, the images are taken from ProcessMaker's workflow/public_html/images/ directory,

Add the following JavaScript to the DynaForm:

//set to the values in the radio button and the URLs for their associated images
var imagesInRadio = [
  { value: "edit",      url:"../../../../images/icon-edit.png"   },
  { value: "configure", url:"../../../../images/icon-config.png" },
  { value: "delete",    url:"../../../../images/delete-icon.png" },
];
//note: the images in this example are stored in the workflow/public_html/images directory,
//but these files can be stored in the Public Files for the process

for (var i in imagesInRadio) {
  $("#selectImage").find("input[value='"+ imagesInRadio[i].value +"']").closest("div").
     append(' <img src="'+ imagesInRadio[i].url +'">');
}

Change the imagesInRadio array to hold the values in the "selectImage" radio button and URLs to images which will be inserted next to each option.

The code loops through the imagesInRadio array and uses a jQuery selector to search for the input which has the matching value and then obtain its outer div to insert an image.

When the form is displayed, images will appear next to each text label in the radio button:

Radio-withDisplayedImages.png

Images above the option labels

If the images should be placed above the option labels, rather than to their right, then change the for loop in the above JavaScript to:

for (var i in imagesInRadio) {
  var oSpan = $("#selectImage").find("input[value='"+ imagesInRadio[i].value +"']").parent().find("span");
  oSpan.replaceWith(
    '<figure><img src="'+imagesInRadio[i].url+'"/><figcaption>'+oSpan.text()+'</figcaption></figure>'
  );
}

This code converts the label for each option into a caption for the image:

Radio-ImagesUnderLabels.png

Using images in Public Files

If accessing an image is stored in Public Files, it can accessed at the relative URL ../{process-id}/{filename}, such as ../1338440575ba4574fd2c995006711923/mylogo.png. The process ID can be found by running a case with Debug Mode enabled and looking at the PROCESS system variable in the debugger. It can also be found with the following JavaScript code when running a case (but it doesn't work when inside the DynaForm Designer):

//check if exists before accessing the process ID, because it doesn't exist in the designer:
var processId = frames.prj_uid ? frames.prj_uid : '';

Using options from a database query

If the list of options in the radio button are generated with an SQL query or with an array variable, then a hidden field can be created in the DynaForm, which will hold a JSON string which contains the array of image URLs.

For example, the datasource property of the radio button is set to "array variable" and its data variable is set to: @@businessList The DynaForm also has a hidden field with the ID and associated variable "imagesInRadio", that holds a JSON string which holds an array of URLs to insert images in the radio button options. Then, the following trigger executed before the DynaForm can be used to populate the list of options in the radio button and the list of image URLs for each option:

//Database query to get the list of options for the radio button:
$region = @@salesRegion; 
@=businessList = array(); //variable used to populate the radio button
$aImages = array(); //array of objects which holds radio values and their image URLs

$query="SELECT BUSINESS_ID, BUSINESS_NAME, BUSINESS_IMAGE_URL FROM PMT_BUSINESSES WHERE REGION='$region'";
$businesses = executeQuery($query);

foreach ($businesses as $row) {
   @=businessList[] = array( $row['BUSINESS_ID'], $row['BUSINESS_NAME'] );
   $aImages[] = array(
       'value' => $row['BUSINESS_ID'],
       'url'   => $row['BUSINESS_IMAGE_URL']
   );
}

@@imagesInRadio = json_encode($aImages); //convert to JSON string

Then, the following JavaScript can be used in decode the JSON string in the "imagesInRadio" field and then insert the images in the radio button:

var sImages = $("#imagesInRadio").getValue();

if (sImages) {
  var imagesInRadio = JSON.parse(sImages);

  for (var i in imagesInRadio) {
    $("#selectImage").find("input[value='"+ imagesInRadio[i].value +"']").closest("div").
      append(' <img src="'+ imagesInRadio[i].url +'">');
  }
}