Matt Holden
Rank: #13753
37Views
14Comments
Model dos not contain validation widgets
Question

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 + " />";

            break;

        case "Long Text":

            html += "<textarea " + attributes + "></textarea>";

            break;

        case "Number":

            html += "<input type=\"number\" " + attributes + " />";

            break;

        case "Currency":

            html += "<input type=\"number\" step=\"0.01\" " + attributes + " min=\"0\" max=\"100\" />";

            break;

        case "Percent": 

            html += "<input type=\"number\" " + attributes + " min=\"0\" max=\"100\" />";

            break;      

        case "Date":

            html += "<input type=\"date\" " + attributes + " />";

            break;

            

    }   // end switch

    

    container.insertAdjacentHTML("beforeend", html);

}

0
0
on 2020-10-21
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75

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

0
0
on 2020-10-21
Copy link to comment
Matt Holden
Rank: #13753

Here's the .oml file. An example of the JSON being used to compile the fields is in the next comment.

CustomFieldsDemoHelp.oml

0
0
on 2020-10-21
Copy link to comment
Matt Holden
Rank: #13753

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"

      }

    ]

  },

  {

    "SetOID": 12572424,

    "ObjectDesc": "CLAIM",

    "SetDesc": "Administrative Fields",

    "FieldID": "WHO REPORTED",

    "FieldLabel": "Relationship to Claim",

    "SortOrder": 2,

    "IsRequired": 1,

    "FieldLen": 50,

    "FieldTypeDesc": "Selection",

    "DictionaryValues": [

      {

        "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"

      }

    ]

  },

  {

    "SetOID": 12572424,

    "ObjectDesc": "CLAIM",

    "SetDesc": "Administrative Fields",

    "FieldID": "LARGE LOSS REPORT?",

    "FieldLabel": "Large Loss Report Required?",

    "SortOrder": 3,

    "IsRequired": 1,

    "FieldLen": 50,

    "FieldTypeDesc": "Selection",

    "DictionaryValues": [

      {

        "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"

      }

    ]

  },

  {

    "SetOID": 12572424,

    "ObjectDesc": "CLAIM",

    "SetDesc": "Administrative Fields",

    "FieldID": "LARGE LOSS REPORT DUE DATE",

    "FieldLabel": "Large Loss Report Due Date",

    "SortOrder": 4,

    "IsRequired": 0,

    "FieldLen": 10,

    "FieldTypeDesc": "Date",

    "DictionaryValues": []

  },

  {

    "SetOID": 12572424,

    "ObjectDesc": "CLAIM",

    "SetDesc": "Administrative Fields",

    "FieldID": "LLR REPORTABLE",

    "FieldLabel": "Large Loss Reportable?",

    "SortOrder": 8,

    "IsRequired": 0,

    "FieldLen": 50,

    "FieldTypeDesc": "Selection",

    "DictionaryValues": [

      {

        "DictionaryKey": "Y_INJURY",

        "DictionaryValue": "Y - Severity of Injury"

      },

      {

        "DictionaryKey": "Y_PROP_DAM",

        "DictionaryValue": "Y - Severity of Property Damage"

      },

      {

        "DictionaryKey": "N_NO",

        "DictionaryValue": "No"

      }

    ]

  },

  {

    "SetOID": 12572424,

    "ObjectDesc": "CLAIM",

    "SetDesc": Administrative Fields",

    "FieldID": "NYLL",

    "FieldLabel": "New York Labor Law Applies?",

    "SortOrder": 9,

    "IsRequired": 0,

    "FieldLen": 50,

    "FieldTypeDesc": "Selection",

    "DictionaryValues": [

      {

        "DictionaryKey": "YES",

        "DictionaryValue": "Yes"

      },

      {

        "DictionaryKey": "NO",

        "DictionaryValue": "NO"

      },

      {

        "DictionaryKey": "NA",

        "DictionaryValue": "N/A"

      }

    ]

  }

]

0
0
on 2020-10-21
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75

Hi Matt,

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

"SetDesc":  Administrative Fields", 

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,

Benjith Sam

ReactiveJSCustomCntr.oml

0
0
on 2020-10-22
Copy link to comment
Matt Holden
Rank: #13753

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.



0
0
on 2020-10-22
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75

Matt Holden wrote:

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.

Hi Matt,

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 


Hope this helps you!


Kind regards,

Benjith Sam

0
0
on 2020-10-22
Copy link to comment
Matt Holden
Rank: #13753

Sure. But how can I reference that in JS?


0
0
on 2020-10-22
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75

Matt Holden wrote:

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,

Benjith Sam

0
0
on 2020-10-22
Copy link to comment