I'm trying to take a field value (that's a two option check box) and if it is checked then set the visibility on a section to be true, and if it's not checked then to set the visibility to false. I have it set on the field to call the function on an on change event.
When I go into the form and either check the box or uncheck the box it gives me a script error.
This is the function I'm using:
function SetProductVisible(){
if (Xrm.Page.getAttribute("ee_productspecific").getValue()){
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(true);
}
else{
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(false);
}
};
Thank you for your help.
The fields default value is also set to "No"
Ensure that you are using the right quotation marks by replacing “ and ” with ".
As mentioned in the comments, also ensure that you are using the right name for your tab and section, and check the developer console for more information about the error.
here is your solution...
I created a new field on the CRM form called "log_showhide" which is a two option field. You need to edit the code below to match your Section name and field name with the correct values...
Furthermore, I would set the code to run on load of the form as well as on change of your field.
This method is applicable to Microsoft Dynamics 365 v9.x
function hideOrShow(executionContext){
var a = executionContext.getFormContext().getAttribute("log_showhide").getValue();
if (a == 0) {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(true);
} else {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(false);
}
}
Rather than doing a custom web resource to show/hide a field or section, I would recommend you go with a Business Rule. With a Business Rule you can set up a simple check of the value of one field and hide other fields based on that.
Another way to hide a section by field's parent. Just refer a field on that section:
function SetProductVisible()
{
var some_section = Xrm.Page.getControl("new_field_on_that_section_name").getParent();
some_section.setVisible(Xrm.Page.getAttribute("ee_productspecific").getValue());
};
Related
I have an HTML input field where certain characters shouldn't be allowed. The functional part is solved, but I would like to display a tooltip/message next to the input field while it contains illegal characters.
I have a boolean which keeps track of this, but I've been unable to make a satisfactory tooltip/message.
I've tried tweaking uib-tooltip, but It requires the user to hover over the input area. I've tried making a span/div/label that's hidden/displayed based on the boolean, but my CSS skills aren't strong enough.
The app uses Angularjs and Bootstrap 3.
The input field is not part of a form.
where you catch that boolean just say to display the div next to input like
myDiv.visible = true;
Without knowing your exact Javascript, I can't really answer it directly.
I would do something like
function invalid() {
if (invalid = true) {
document.getElementById("alert").style.visibility = 'visible'
}
}
make sure the error message is set to hidden,
then have the checker function run on focus..
<input type="text" onfocus="invalid()">
https://jsfiddle.net/we67geke/1/
This comment by user Lex solved the problem.
You can manually set the visibility of the uib-tooltip using the
tooltip-is-open attribute. Simply use the same boolean you are using
to keep track of the invalid characters.
As you mentioned
The app uses Angularjs and Bootstrap 3.
I suggest that you should use Boostrap tooltip. Use $('#element').tooltip('show') and $('#element').tooltip('hide') with your flag to handle status of Tooltip.
I don't know how your codes work, my idea seems like:
HTML:
<input type=text (keypress)="eventHandler()"> // angular >= 2
<input type=text ng-keypress="eventHandler()"> // angular 1
Angular code:
eventHandler() {
if (isIllegal) {
$('#element').tooltip('show');
} else {
$('#element').tooltip('hide');
}
}
Something like that.
Bootstrap Tooltip: https://getbootstrap.com/docs/3.3/javascript/#tooltips
I am using Sitecore 7.2 with Web Forms for Marketers 2.4.
Using wffm form designer I created a form that has a droplist in it.
I want to be able to hide or unhide another field in the same form based on the selected value of the droplist. Through my research I came up with exporting the form (via form designer export) and pointing the sublayout to that exported form.
I then added and onChange event to the droplist.
<cc3:droplist runat="server" title="Country" emptychoice="True" id="field_xyz" cssclass="scfDropListBorder fieldid.%7bxyz%7d name.Country" controlname="Country" fieldid="{xyz}" enableviewstate="False" onchange="checkField()">
I then added a javascript to the bottom of the page.
function checkField() {
alert("Hello! I am an alert box!!");
var a = document.getElementById("field_xyz");
alert(a.options[a.selectedIndex].value);
var cityTextBox = document.getElementById("field_abc").parentNode.parentNode;
if (a == "United States") {
cityTextBox.style.display = "block";
} else {
cityTextBox.style.display = "none";
}
alert("Ending Script");
}
I can get the 'Hello!' alert to show every time but not the 'ending' alert and the value of 'a' is always null from what I can tell.
Is what I'm trying to do even possible in Sitecore?
I read something else that said they had a problem because of encapsulation and protection levels.
I can also confirm that when I submit the form it does show up in the WFFM reports so I know it is submitting properly.
Any help/advice/direction would be appreciated.
I've never used the export functionality so can't comment to it's effectiveness or ease of use. My suggestion would be to simply use from custom css classes and jquery on the front-end to hide/show depending on the selected value.
Create 2 new css classes under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes. Call them "hide-dependent" and "dependent-field"
Add your fields and then on the country field select "hide-dependent" as the CSS class, and for the City select "dependent-field"
Add the following Javascript to your own sites js file.
The code will bind a handler to fire onchange, checked the selected value and then hide/show all field with the dependent-field class. Specifying the chained field-border ensures that we are hiding the whole row and not just the select box.
(function ($) {
var HideDependentFied = function (value) {
var condition = (value == "USA");
$(".dependent-field.field-border").toggle(condition);
};
$(document).ready(function() {
var $field = $(".hide-dependent.field-border select");
$field.on("change", function() {
HideDependentFied(this.value)
});
HideDependentFied($field.val());
});
})($scw);
The above code is using an Immediately Invoked Function Expression and passing is $scw, which is the jQuery variable used by WFFM.
You may also want to fire the function on document ready, to ensure the field is hidden on load and only shown when the appropriate value is selected.
I am facing a small problem regarding input validation in mvc telerik grid.
I have it set to batch editting and I'm modifing the cells in an InCell mode.
Now whenever a user enters an invalid value in one of the inputs(Telerik's comboboxes/autocompletes), I'd like to display a message that
the entered value is iligal(this far I've managed on my own).
In addition to the message I'd like to revert the cell's value to it's previus value before
the user input.
So far I've tried:
grid.CancelCell(this);
$('#grid .t-grid-edit-cell input[type="text"]').value or innerText = prevVal;
The closest so far was e.newVal = e.oldVal, although it sometimes throws me a wierd exception in the jquery scripts or displays the combobox's drop down.
All the validatios and things I've tried are from the grid's client event OnSave()
It's same like what i searched before and I have solution for you.
On your OnSave() method has event like OnSave(e) and that 'e' carry all the elemnts and functions inside in my example after validation if not ok i can change that value to old value. Also you can use inspecter element log to look up what is inside 'e'
function onSave(e){
if(!validation)
{
///
}
else
{
e.cell.firstChild.value = "0"; // that is my edited cell
}
}
I have a dropdown which has countries and in the same form on 2nd line I have ZipCode texbox. I want to limit the minLenght of the zipcode field dynamically. For example If US is slected zipcode should not be less than 5 and for other countries some other minLength Limit. My form uses a parsley validator
I wrote below function onChange event of my country dropdown
function setZipLimit() {
alert("in Zip limit" + document.getElementById("billingCountry").value);
if (document.getElementById("billingCountry").value == "US") {
alert("I am in US");
$('#billingForm').parsley('destroy');
$('#billingPostalCode').data('minlength', 3);
$('#billingForm').parsley();
} else {
$('#billingForm').parsley('destroy');
$('#billingPostalCode').data('minlength', 10);
$('#billingForm').parsley();
}
}
But this doesnt seem to be helping. Can you please help me?
You cant just edit the Attribute, because parsley.js initially Reads the form and gets its Values. Changing them Afterwards shouldnt have any Effect.
However you can use the Parsley.js API for Javascript functions to Edit the constraints. You already used them to destroy and Build Parsley. Parsley got the following Function:
$( '#field' ).parsley( 'updateConstraint', { minlength: 6 } );
There are also some with addConstraint and removeConstraint in the Documentation:
http://parsleyjs.org/documentation.html
If your Form gets more complex and you have several of those dynamic cases, i recommend to only Destroy and Rebuild specific Parts of your Form. The Reason is (from an issue I had recently):
If you Destroy Parsley, change some Fields, build Parsley and then Destroy it again because another if Statement takes place, your previous Changes get thrown away, because Build only reads the js inbetween the Destroy and Build and reads the Form.
I am trying to use the JQuery MaskInput plugin on a SSN field but I dont see anyway to make it display "***-**-****" after the user leaves the fields.
Did anyone get this working>
I havent tested this, but it may get you headed in the right direction. The masked input plugin has a completed function that can be called when the user has finished entering their value. You can use it to grab the value and store it in a hidden field to retain it and replace the current text with whatever you desire.
var $txt_SNN = $("#txt_SSN");
$txt_SNN.mask("999-99-9999", {
completed: function() {
$('#hdf_SNN').val($txt_SNN.val());
$txt_SNN.val("999-99-9999");
}
});
$txt_SNN.mask("999-99-9999").blur(function() {
$(this).attr('type', 'password');
});`
This should do it. Although I didn't test it.