I have two fields, one which need to be dependent on the other field's value. The 1st field is "RELEASE" which has "latest" and "on-going" as the dropdown options. The 2nd field is "BUILD" which should be editable only when we select "on-going" as the release. When the release is "latest" it should take a default value and not be editable.
test.html
{{> afQuickField name='Release' options='allowed' }}
<span title = "eg:PRODUCT/10.X.X.1234 or PRODUCT:latest">
<a style="font-size:1.2em"><h5>ProductBuild</h5></a>
</span>
{{> afQuickField name='PRODUCT_BUILD' }}
I'm also trying to set the tool tip for PRODUCT_BUILD field so that when a user hover over it, he/she will know the correct format like "PRODUCT:latest" for Latest and "PRODUCT/10.X.X.1234" for "On-going".
schema.js
Release:{
type: String,
label: "Release",
optional: true,
allowedValues:["LR-Latest Release","OR-Ongoing Release"],
autoform:{
afFieldInput:{
firstOption:"(Select the Release)"
}
}
},
PRODUCT_BUILD:{
type:String,
label:' ',
regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
defaultValue:"PRODUCT:latest"
},
How can I do this?
One of two ways of doing this:
One: Use readonly property within the autoform.
Release:{
type: String,
label: "Release",
optional: true,
allowedValues:["LR-Latest Release","OR-Ongoing Release"],
autoform:{
afFieldInput:{
firstOption:"(Select the Release)"
}
}
},
PRODUCT_BUILD:{
type:String,
label:' ',
regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
defaultValue:"PRODUCT:latest",
autoform:{
readonly: function(){
if(AutoForm.getFieldValue('Release') == 'on-going'){
// if the above does not get you the "Release" field's value then try:
// AutoForm.getFieldValue('Release','formID');
// if your formID is dynamically set, then use AutoForm.getFormId(); to get the form's ID
return false;
}
else {
return true;
}
}
}
},
Two: Use a custom function to set/unset readonly property
Release:{
type: String,
label: "Release",
optional: true,
allowedValues:["LR-Latest Release","OR-Ongoing Release"],
autoform:{
afFieldInput:{
firstOption:"(Select the Release)"
}
},
custom: function(){
if(this.value == 'on-going'){
$('[name=PRODUCT_BUILD]').prop('readonly', true);
}
else {
$('[name=PRODUCT_BUILD]').prop('readonly', false);
}
}
},
PRODUCT_BUILD:{
type:String,
label:' ',
regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
defaultValue:"PRODUCT:latest",
},
You can play around with both methods here before you actually try implementing it.