Display multi-select option values in Formidable

by Sujeevan | Jan 14, 2020 | Formidable

In Formidable Forms, dropdown and checkbox fields allow selecting multiple options. If you’d like to display selected values in a view, you’d normally use [x] shortcode just like any other field where x is your field id or key. This will by default display values separated by a comma.
e.g. Apple, Orange, Cherry

A different separator can be specified using the sep attribute. For example, [x sep=" | "] will display Apple | Orange | Cherry

This opens up many possibilities. For example, options can be displayed as a list using
<ol><li>[x sep='</li><li>']</li></ol>

1. Apple
2. Orange
3. Cherry

However, this approach has its limitations because we can only control what is in between two options using sep attribute. What if we want to format option values individually without any limitations. This is the question Phil asked in the Formidable’s community Slack group.

With a little custom code, we are going to extend the functionality to the next level.
The new pattern attribute can be used to specify a pattern to display an option value. The pattern can be any text where all occurrences of {} will be replaced by the option value.
e.g. <ol>[x pattern='<li>{}</li>']</ol> will display the options as a list (same as before but more easy to write and understand).

1. Apple
2. Orange
3. Cherry

Not only that, it can now do what is not possible before. For example, the following shortcode displays the option values as a list with a link to Google image search. Notice that the pattern uses {} twice, one for search query inside the link URL and another one as the link text.
<ol>[x pattern='<li><a href="http://www.google.com/images?q={}">{}</a></li>']</ol>

1. Apple
2. Orange
3. Cherry

When the pattern attribute is used, the default comma separator is ignored. However, if a separator is required, it can be specified using the same sep attribute.
e.g.
<ol>[145 pattern='<li><a href="http://www.google.com/images?q={}">{}</a></li>' sep='<li>---------</li>']</ol> will add a separator item between options on the list.

1. Apple
2. ———
3. Orange
4. ———
5. Cherry

Add the following code to your functions.php or use Code Snippet plugin to enable this functionality.

add_filter('frmpro_fields_replace_shortcodes', 'frm_city_display_option_values_with_pattern', 10, 4);
function frm_city_display_option_values_with_pattern( $replace_with, $tag, $atts, $field ) {
    if ( isset ( $atts['pattern'] ) ) {
		if($replace_with){
			$pattern = $atts['pattern'];
			if(is_array($replace_with)){
				foreach($replace_with as $key => $value) {
					$replace_with[$key] = str_replace('{}', $value, $pattern);
				}
				$replace_with = implode($atts['sep'], $replace_with);
			} else {
				$replace_with = str_replace('{}', $replace_with, $pattern);
			}
		}
    }
    return $replace_with;
}