I have a simple scenario where I want to show and/or hide different fields on my form based on selection(s) made in another select field.
For example, I have something like this:
var valArray = [option1, option2, option3];
I want to find out all possible combinations made by the user for the multi-select field and based on the selection I want to either show or hide another field.
I've put together a recursive to be able to handle this cleanly in the future, if this does come up again.
my recursive func:
function getCombinationsRecursively(values){
var result = [];
var f = function(prefix, values) {
for (var i = 0; i < values.length; i++) {
result.push(prefix + ',' + values[i]);
f(prefix + values[i], values.slice(i + 1));
}
}
f('', values);
return result;
}
The problem with this recursive is it that in the array that's returned it puts the comma and space before the first and the last value in the array as well.
This method becomes rather verbose and ugly, once there are more than 3 values in the array, due to all the different combination. I'm wondering whether I can use this recursive to achieve something similar.
There is a bug in my recursive function, where it appends an extra space and , at the first and last value of the array. I'm wondering if there is a way to combine this function, and use some CSS to assign a specific function to a field so everytime the field is displayed it automatically executes that function.
Here is my recursive:
function getCombinationsRecursively(values){
var result = [];
var f = function(prefix, values) {
for (var i = 0; i < values.length; i++) {
result.push(prefix + values[i]);
f(prefix + values[i], values.slice(i + 1));
}
f('', values);
return result;
}
}
Could you please provide a more detailed description of your case so I could think of possible solutions. The screenshot of the form would also be helpful.
So let's imagine that we have an a field in the form that is a multi select (checkboxes).
Now when using javascript in the form, when we want to access the values of that select box using fd.BeforeSafe function, an array is returned of string values. The array that is returned can be of length 1, 2, 3.. however many selection our user has made in the selectbox. Now based on the values in the array, we want to execute some functions that are unique to each specific value in the array.
Now this is pretty simple to accompish using the approach you provided IF our select list only have a maxmimum of 3 or 4 values. If this list is much larger, it's really hard and ugly to handle this using if/else statements.
I'm thinking of using a recursive to handle all the possible combinations that can be present in the array. What I mean by combination is that, sometimes a user will only select 1 and 3 in the select list and not 2, 4 , 5, 6. We need to be able to account for all possible combinations that a user can possibly select and handle what function gets executed with that.
Thank you for these details.For your case, I can suggest you to use the switch statement instead of conditional statements, so the code will look like this:
fd.spRendered(function() {
fd.field('mChoice').$on('change', function (props) {
$(fd.field('Field1').$parent.$el).hide();
$(fd.field('Field2').$parent.$el).hide();
$(fd.field('Field3').$parent.$el).hide();
$(fd.field('Field4').$parent.$el).hide();
for (var i = 0; i < props.length; i++) {
//show fields if the option is selected
switch (props[i]) {
case 'Option 1':
$(fd.field('Field1').$parent.$el).show();
break;
case 'Option 2':
$(fd.field('Field2').$parent.$el).show();
break;
case 'Otion 3':
$(fd.field('Field3').$parent.$el).show();
break;
case 'Otion 4':
$(fd.field('Field4').$parent.$el).show();
}
}
});
});
I have a similar situation, where i want to hide buttons depending on a lookup-field called 'Status'.
I have approx 20 Status in the according list.
My code is like followed:
fd.spRendered(function() {
function hideButton() {
if (fd.field('Status').value == 29 || 31) {
$(".status1-4").show();
$(".status5").hide();
$(".status5-1").hide();
$(".status5-2").hide();
}
else {
$(".status1-4").hide();
$(".status5").show();
$(".status5-1").show();
$(".status5-2").show();
}
}
//hide/show button on form load
hideButton();
//hide/show button when the user changes the field
//fd.field('Status').$on('change', hideButton);
});
How can i add more conditions like
if (fd.field('Status').value == 50) show or hide field1
if (fd.field('Status').value == 51) show or hide field2
if (fd.field('Status').value == 52) show or hide field3
//get the ID of the selected status
switch(fd.field('Status').value.ID) {
case 50:
//hide field
$(fd.field('FieldName1').$parent.$el).hide();
break;
case 51:
//hide field
$(fd.field('FieldName2').$parent.$el).hide();
break;
case 52:
//hide field
$(fd.field('FieldName3').$parent.$el).hide();
}
I have tried this following code, but it is not working:
fd.spRendered(function() {
switch(fd.field('Status').value.ID) {
case 29:
//hide field
$('.status5').$parent.$el).hide();
$('.status5-1').$parent.$el).hide();
$('.status5-2').$parent.$el).hide();
break;
case 31:
//hide field
$('.status5').$parent.$el).hide();
$('.status5-1').$parent.$el).hide();
$('.status5-2').$parent.$el).hide();
break;
case 50:
//hide field
$('.status4').$parent.$el).hide();
$('.status5-2').$parent.$el).hide();
});
});
If you want to show/hide fields on form load and when the field value is changed, you need to create a function. The conditional statement should be used within the created function, like this:
fd.spRendered(function() {
function hideButton() {
switch(fd.field('Status').value.ID) {
case 29:
//hide field
$('.status5').$parent.$el).hide();
$('.status5-1').$parent.$el).hide();
$('.status5-2').$parent.$el).hide();
break;
case 31:
//hide field
$('.status5').$parent.$el).hide();
$('.status5-1').$parent.$el).hide();
$('.status5-2').$parent.$el).hide();
break;
case 50:
//hide field
$('.status4').$parent.$el).hide();
$('.status5-2').$parent.$el).hide();
}
//hide/show button on form load
hideButton();
//hide/show button when the user changes the field
//fd.field('Status').$on('change', hideButton);
});
Am I able to use similar code to show/hide a data table based on the selection made in a different field? I have a SharePoint form with Product Type and then a data table with some info for users to enter but the data table is only supposed to show for one type. Any guidance on this?
You can use the code below to show/hide DataTable dynamically.
fd.spRendered(function() {
function hideOrShowDT() {
if (fd.field('Field1').value == 'Option1') {
// Show control
fd.control('Control1').hidden = false;
} else {
// Hide control
fd.control('Control1').hidden = true;
}
}
// Calling hideOrShowDT when the field value changes
fd.field('Field1').$on('change',hideOrShowDT);
// Calling hideOrShowDTon form loading
hideOrShowDT();
});
