Adding Errors with JS

Charlie Jonas

Kinda have two questions here: 1: Adding a validation error to a field: I have some fields that are required before continuing to the next step of the wizard. Is there any way to leverage the built in field errors? 2: I'm currently using the page "Problems" but not very effectively:

  helpers.error = (function(skuid){      return{          add: function(message){              var myProblem = {isDisplayed:false,message:message};              skuid.page.displayProblem(myProblem);              skuid.page.problemsIndicator.text('Problems');              skuid.page.problemsWrapper.show();          },          clear: function(){              skuid.page.problemsContainer.empty();              skuid.page.problemsIndicator.text('');              skuid.page.problemsWrapper.hide();          }      };  })(skuid);    helpers.error.add('Huston, We have a problem');  

Results in something like this: This works, but I'm wondering if you guys have a better way of managing these. Or are the problems meant specifically for SKUID page errors and no so much for user interaction?

Zach McElrath

skuid.page.addProblem() is meant for Skuid Page level errors, like major runtime errors that can be corrected by going to the Page Builder. The kind of messages displayed when you have missing required fields, or when there's a save problem, are always dealt with at the skuid.ui.Editor level. Editors have a messages property storing their messages. There is an API method on Editor called "handleMessages" that lets you tell Editors to display messages, and you can pass in various Severities of message: - (no severity specified): message displays in blue - 'WARNING': displays in yellow - 'ERROR' / 'FATAL': displays in red Duplicates are not displayed twice --- rather, a number is displayed to the right indicating how many of this message the editor now has. All types of messages can be removed by the user simply by clicking on them. Here is an example:

    var $ = skuid.$;  var pageTitle = $('#MyPageTitle');  var editor = pageTitle.data('object').editor;  editor.handleMessages(     [         {            message: 'This is a regular message, should be in blue'         },  // Since this is a duplicate, it should not be displayed twice         {            message: 'This is a regular message, should be in blue'         },         {            message: 'This is a Warning message, should be in yellow',            severity: 'WARNING'         },         {            message: 'This is a Error/Fatal message, should be in red',            severity: 'ERROR'         }     ]  );      

which produces this:

Charlie Jonas

Perfect. What's the best method for clearing these out? ---Update--- editor.messages.empty(); works pretty well

Zach McElrath

Yeah that's how I'd do it.

Moshe Karmel

Hey Zach I enjoyed the deep dive today, I'm just having a problem with the editor syntax I tryed using the above code, and I;m getting an error on this line var editor = pageTitle.data('object').editor; that: Uncaught TypeError: Cannot read property 'editor' of undefined Any ideas?

Zach McElrath

Hi Moshe, the problem here is that, assuming that your pageTitle variable is something like var pageTitle = $('#MyPageTitle'); this DOM element cannot be found. So the question is, in what JavaScript context are you running this code? If you are running it from within an "Inline" JavaScript resource, can you post the code for this resource? One of the important things to consider when writing JavaScript in Skuid Pages is to ensure that the Component you are requesting is actually in the DOM / has already been built when you run JavaScript that looks for that component. If your JavaScript code is in a basic Skuid Page, loaded via an Inline JavaScript, then you need to make sure your code is in a jQuery ready() block so that it will be loaded once all Skuid components have been built, like this:

    (function(skuid){       var $ = skuid.$;     $(function(){          // Find a Page Title component whose "Unique Id" property         // has been set to "MyPageTitle"          var pageTitle = $('#MyPageTitle');         // Get the editor for the Component         var editor = pageTitle.data('object').editor;     });    })(skuid);      

The one scenario where this will not work is if your JavaScript code is in a Page that is being INCLUDED via a Page Include component that's inside a Tab with Deferred Tab Rendering enabled. In this case, the contents of the Page Include will not be loaded immediately on page load, and so the jQuery ready() block will not help. Your code will instead have to listen for the Page Include to be loaded, like this:

    (function(skuid){       var $ = skuid.$;     $(function(){         // Run this code the first time, and only the first time,         // that a 'pageload' event          // is triggered on the document body.         // Such an event is triggered as soon as a Page Include component         // is finished loading.          $(document.body).one('pageload',function(){             // Find a Page Title component whose "Unique Id" property            // has been set to "MyPageTitle"            var pageTitle = $('#MyPageTitle');            // Get the editor for the Component            var editor = pageTitle.data('object').editor;          });     });    })(skuid);      

Moshe Karmel

Thanks Zach, I'm running code in an inline(snippet), and I tried refrencing your code inside that snippet, the thing I'm confused about is where do I place your code. Can this function be called inside of my existing function, or should I be creating a separate snippet for this code (function(skuid){ var $ = skuid.$; $(function(){ // Find a Page Title component whose "Unique Id" property // has been set to "MyPageTitle" var pageTitle = $('#MyPageTitle'); // Get the editor for the Component var editor = pageTitle.data('object').editor; }); })(skuid); and will the variables be accesible outside of this function?

Zach McElrath

What part of your page is calling your Snippet? e.g. is this a Wizard Step button, or a Page Title button, or a custom field renderer, or a Row Action?

Moshe Karmel

Wizard step.

Zach McElrath

Ok. So this is a custom Wizard Step button. You should be able to call the original code posted above without all the stuff I just said Make sure that when you go to your Page Title component, that its "Unique Id" attribute is set to something like "MyPageTitle", and that in your code below you are replacing "MyPageTitle" with whatever the Unique Id is set to. Then your Snippet button should be able to access this Component as posted above:

    var $ = skuid.$;  var pageTitle = $('#MyPageTitle');  var editor = pageTitle.data('object').editor;  editor.handleMessages(     [         {            message: 'This is a regular message, should be in blue'         },  // Since this is a duplicate, it should not be displayed twice         {            message: 'This is a regular message, should be in blue'         },         {            message: 'This is a Warning message, should be in yellow',            severity: 'WARNING'         },         {            message: 'This is a Error/Fatal message, should be in red',            severity: 'ERROR'         }     ]  );    

Moshe Karmel

Sorry for the Rookie mistake, you're right, that I never set up a unique ID for the page name, I just assumed it was defaulted to the page name. Thanks for the great lesson though.

Zach McElrath

**Update**: As of the Skuid Superbank release, the best way to clear messages is to use the editor.clearMessages(); --- see the docs on skuid.ui.Editor: http://help.skuidify.com/m/11720/l/205332-skuid-ui-editor

Prashant Singh

after the error i want to stop the button action sequence flow can anyone help me in this?