Changing Custom Check Boxes Profile Field Display

[seasides]

i wasn't able to find anything when searching, so i figured i'd ask myself.


is there a way to change how the check box custom field displays the choices? so instead of them being written horizontally (example: option1, option2, etc) they're displayed vertically like:
option1
option2
etc

i'd prefer to not use javascript, but if it's my only option i don't mind, however i don't know how to write that myself. is there a way to write the {foreach}{if} code to change how the choices are displayed?

[seasides]

bump.

[seasides]

bump.

[Bennett 🚀]

Jul 20, 2020 14:26:35 GMT -8 seasides said:

i wasn't able to find anything when searching, so i figured i'd ask myself.


is there a way to change how the check box custom field displays the choices? so instead of them being written horizontally (example: option1, option2, etc) they're displayed vertically like:
option1
option2
etc

i'd prefer to not use javascript, but if it's my only option i don't mind, however i don't know how to write that myself. is there a way to write the {foreach}{if} code to change how the choices are displayed?

It doesn't seem like you're able to iterate a custom field's values if they're an array (which they are in the case of a checkbox field) in a layout template.
You will most likely need to use javascript to do so:

Given you have the default template for the Mini Profile

{foreach $[user.mini_custom_field]}

<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>

{/foreach}

You can add the following to your Global Footer:

Changing the orange with the name of your field (lowercase version), and changing the blue to whatever you want the output to be styled as. I just left it as a plain div so that options would go on a new line. If you could provide the name of your field and the HTML you want per option, I can fit that in for you.

<script type="text/javascript">
	function updateCheckboxCustomFields(){
		let profileFields = document.querySelectorAll('.custom-field-season');
		profileFields.forEach(function(field){

			let selections = field.innerText.replace(/(.+?):/, '');

			field.innerHTML = field.innerHTML.replace(selections, selections.split(', ').map(function(field){
				return "<div>"+field+"</div>";
			}).join(''));
		});
	}
	$(document).ready(function(){
		updateCheckboxCustomFields();
		proboards.on('pageChange', function(){
			updateCheckboxCustomFields();
		});
	});

</script>

[seasides]

thank you for responding Bennett 🚀 !

i got it to work perfectly on the miniprofile, but i was wondering if there was a way to do the same thing on another layout template?

what i'm trying to do is have my custom field display vertically on the forum wrapper and right now the script you gave me only has it show on the mini profile and no where else. is there a way to change that?

[Bennett 🚀]

Jul 23, 2020 15:16:34 GMT -8 seasides said:

thank you for responding Bennett 🚀 !

i got it to work perfectly on the miniprofile, but i was wondering if there was a way to do the same thing on another layout template?

what i'm trying to do is have my custom field display vertically on the forum wrapper and right now the script you gave me only has it show on the mini profile and no where else. is there a way to change that?

It should work if that same custom field class is being put on wherever you're outputting on the forum wrapper as well. Could you copy / paste what section of the layout wrapper code in question so I could see it?

[seasides]

Bennett 🚀

this is all i have to get the custom field show up on the forum wrapper, everything else is still default pb coding that hasn't been changed so that shouldn't effect anything.

{foreach $[current_user.mini_custom_field]}
{if $[current_user.mini_custom_field.name] == "Missions"}
$[current_user.mini_custom_field.value]
{/if}
{/foreach}

just in case you need it, this is your script edited to read my custom field:

<script type="text/javascript">
function updateCheckboxCustomFields(){
let profileFields = document.querySelectorAll('.custom-field-missions');
profileFields.forEach(function(field){

let selections = field.innerText.replace(/(.+?):/, '');

field.innerHTML = field.innerHTML.replace(selections, selections.split(', ').map(function(field){
return "<div>"+field+"</div>";
}).join(''));
});
}
$(document).ready(function(){
updateCheckboxCustomFields();
proboards.on('pageChange', function(){
updateCheckboxCustomFields();
});
});

</script>

i didn't edit it other than change the name to read my custom field since i wanted to make sure it worked with the basics first.

[Bennett 🚀]

Jul 24, 2020 14:21:39 GMT -8 seasides said:

Bennett 🚀

this is all i have to get the custom field show up on the forum wrapper, everything else is still default pb coding that hasn't been changed so that shouldn't effect anything.

{foreach $[current_user.mini_custom_field]}
{if $[current_user.mini_custom_field.name] == "Missions"}
$[current_user.mini_custom_field.value]
{/if}
{/foreach}

just in case you need it, this is your script edited to read my custom field:

<script type="text/javascript">
function updateCheckboxCustomFields(){
let profileFields = document.querySelectorAll('.custom-field-missions');
profileFields.forEach(function(field){

let selections = field.innerText.replace(/(.+?):/, '');

field.innerHTML = field.innerHTML.replace(selections, selections.split(', ').map(function(field){
return "<div>"+field+"</div>";
}).join(''));
});
}
$(document).ready(function(){
updateCheckboxCustomFields();
proboards.on('pageChange', function(){
updateCheckboxCustomFields();
});
});

</script>

i didn't edit it other than change the name to read my custom field since i wanted to make sure it worked with the basics first.

Yup so all you would have to add to the forum wrapper template would be:

{foreach $[current_user.mini_custom_field]}
{if $[current_user.mini_custom_field.name] == "Missions"}
<span class="custom-field-missions">$[current_user.mini_custom_field.value]</span>
{/if}
{/foreach}

[seasides]

ohhhh, thank you so much Bennett 🚀 ! everything works perfectly. thank you for helping <3