I'm working on some Javascript to add custom fields to a container. This whole thing is inside a Block. When the fields get added, an error gets thrown for each field stating "Model does not contain validation widgets".Below is the Javascript I'm running. Any ideas?---
var parent = document.querySelector('#'+$parameters.InContainer);
console.log(parent);
var container = parent.querySelector(".CustomFieldContainer");
console.log(container);
var defs = JSON.parse($parameters.vFieldDefs);
console.log(defs);
for (i = 0; i < defs.length; i++) {
def = defs[i];
console.log(def);
id = $actions.EscapeHTML($actions.StripEmoji(def.FieldId));
id = id.replace(/[^a-z0-9+]+/gi, '_');
name = $actions.EscapeHTML($actions.StripEmoji(def.SetDesc));
attributes = "class=\"customField\" name=\"" + id + "\" id=\"" + id + "\"";
attributes += " data-originalName=\"" + name + "\" ";
attributes += ((def.FieldLen) ? " maxlength=\"" + def.FieldLen + "\"" : "");
attributes += ((def.IsRequired) ? " required " : "");
html = "";
label = "<label id=\"label_" + id + "\" for=\"" + id + "\">" + $actions.EscapeHTML(def.FieldLabel) + "</label>";
switch (def.FieldTypeDesc) {
case "Selection":
html += "<select " + attributes + ">";
for (x = 0; x < def.DictionaryValues.length; x++) {
opt = def.DictionaryValues[x];
html += "<option value=\"" + opt.DictionaryKey + "\">" + opt.DictionaryValue + "</option>";
}
html += "</select>";
break;
case "Text":
html += "<input type=\"text\" " + attributes + " />";
case "Long Text":
html += "<textarea " + attributes + "></textarea>";
case "Number":
html += "<input type=\"number\" " + attributes + " />";
case "Currency":
html += "<input type=\"number\" step=\"0.01\" " + attributes + " min=\"0\" max=\"100\" />";
case "Percent":
html += "<input type=\"number\" " + attributes + " min=\"0\" max=\"100\" />";
case "Date":
html += "<input type=\"date\" " + attributes + " />";
} // end switch
container.insertAdjacentHTML("beforeend", html);
Hi Matt,
If possible could you please share the sample .oml file along with the implementation with us to help you better.
or else
please share the screen clip of the defined Block's widget tree (collapsed view)
also the information regarding the input parameter values passed to the JS node, along with the block actions referred within the JS script (I'm trying to replicate the same implementation in my env but require more information)
Kiind regards,
Benjith Sam
Here's the .oml file. An example of the JSON being used to compile the fields is in the next comment.
JSON being used to generate the fields:
[
{
"SetOID": 12572424,
"ObjectDesc": "CLAIM",
"SetDesc": "Administrative Fields",
"FieldID": "HOW REPORTED",
"FieldLabel": "How was the claim reported?",
"SortOrder": 1,
"IsRequired": 1,
"FieldLen": 50,
"FieldTypeDesc": "Selection",
"DictionaryValues": [
"DictionaryKey": "EMAIL",
"DictionaryValue": "Email"
},
"DictionaryKey": "FAX",
"DictionaryValue": "Fax"
"DictionaryKey": "MAIL",
"DictionaryValue": "Mail"
"DictionaryKey": "PHONE",
"DictionaryValue": "Phone"
"DictionaryKey": "WEB",
"DictionaryValue": "Web"
"DictionaryKey": "APP",
"DictionaryValue": "Phone App"
]
"FieldID": "WHO REPORTED",
"FieldLabel": "Relationship to Claim",
"SortOrder": 2,
"DictionaryKey": "POLICY",
"DictionaryValue": "Policyholder"
"DictionaryKey": "ATTY",
"DictionaryValue": "Attorney"
"DictionaryKey": "AGENT",
"DictionaryValue": "Agent"
"DictionaryKey": "PA",
"DictionaryValue": "Public Adjuster"
"DictionaryKey": "OTHER",
"DictionaryValue": "Other"
"DictionaryKey": "CLAIMANT",
"DictionaryValue": "Claimant"
"FieldID": "LARGE LOSS REPORT?",
"FieldLabel": "Large Loss Report Required?",
"SortOrder": 3,
"DictionaryKey": "NO",
"DictionaryValue": "No - Not Reportable as a Large Loss"
"DictionaryKey": "RELEASED",
"DictionaryValue": "No - No Additional Reports Required"
"DictionaryKey": "YES",
"DictionaryValue": "Yes - Currently On Report or First Report Pending"
"FieldID": "LARGE LOSS REPORT DUE DATE",
"FieldLabel": "Large Loss Report Due Date",
"SortOrder": 4,
"IsRequired": 0,
"FieldLen": 10,
"FieldTypeDesc": "Date",
"DictionaryValues": []
"FieldID": "LLR REPORTABLE",
"FieldLabel": "Large Loss Reportable?",
"SortOrder": 8,
"DictionaryKey": "Y_INJURY",
"DictionaryValue": "Y - Severity of Injury"
"DictionaryKey": "Y_PROP_DAM",
"DictionaryValue": "Y - Severity of Property Damage"
"DictionaryKey": "N_NO",
"DictionaryValue": "No"
"SetDesc": Administrative Fields",
"FieldID": "NYLL",
"FieldLabel": "New York Labor Law Applies?",
"SortOrder": 9,
"DictionaryValue": "Yes"
"DictionaryValue": "NO"
"DictionaryKey": "NA",
"DictionaryValue": "N/A"
Sorry for the late reply, was unable to check the shared .oml file early because of some time constraint :)
See this sample app- JSCustomCntrDemo
Observed points:
1) One place in the shared JSON value was missing with a double quotes as mentioned below
2) The defined script in the JS node was also had some mistakes
for e.g. referencing the incorrect object attribute value (I got it corrected)
I did some structure change as well to make it work.. Refer the attached .oml file
It was a bit tricky task but really enjoyed solving it :)
Hope this helps you!
Kind regards,
So, the sample OML you sent me works, but when I put it back in my application, same errors. I can't submit the entire app to be looked at, but someone has to have seen this error message before and have some idea what it means. We're just blindly changing stuff now because not even Google knows what the heck might cause this and the stack trace is all "bowels of Outsystems" stuff so it's of no use in debugging either.
Matt Holden wrote:
The error message "Model does not contain validation widgets" has occurred because of the following reason
- The container named as CustomFieldContanier's (defined within the CustomField Block), Style Classes property value is referencing the container element itself as its value as shown below:
Instead of that the respective container Style Classes property value should be defined as a string value i.e. "CustomFieldContanier" - value in between the double quotes as shown below:
In addition with the above mentioned points, I also observed that the CustomField Block does have a input parameter called InContainerName, which I guess is passed with a parent screen container's Id value and the same value is used within the Block OnInitialize action flow JS node to hook the respective element..
That will also lead to JS error because the parent element i.e. referred container is not loaded yet in the DOM when it got referenced,
Order of execution of the Screen and block life cycle event is occurred as follows...
1) Screen OnInitialize
2) Block OnInitialize
3) Block OnReady
4) Block OnRender
5) Screen OnReady
6) Screen OnRender
Sure. But how can I reference that in JS?
Introduce an input parameter in the JS node and pass the container Id runtime property value as shown below
Regards,
Burned by the container referencing itself error :(