Adding Errors with JS

  • 1
  • Question
  • Updated 4 years ago
  • Answered
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?
Photo of Charlie Jonas

Charlie Jonas

  • 670 Points 500 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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:

Photo of Charlie Jonas

Charlie Jonas

  • 670 Points 500 badge 2x thumb
Perfect. What's the best method for clearing these out?

---Update---

editor.messages.empty();

works pretty well
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yeah that's how I'd do it.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
**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
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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);


Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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'
}
]
);

Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Wizard step.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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. :)