Form Validation for Custom Objects in Customer Portal

Question

The more I delve into the CP documentation, the more I realize how much of my assumptions were turning out to be wrong. At the moment in the quest to understand the system efficiently, I'm looking to build a form consisting of only custom objects (Non-Incident/Non-Answer/Non-Contact) and then try and use that on the customer portal.

To keep things simple, all I'm trying to do is have a 2-field form (both textboxes) and a submit button as the front end. The following are the things which I'm trying to do:

• Use input textboxes in the form of <rn:widget .... /> so that I can make use of attributes like required, validate_on_blur etc. I'm not sure if those attributes can be used for custom objects as well, but we will get to that later.
• Use the already defined form validation methods that are used for standard objects (if at all this is possible) so that I don't have to go about re-inventing the wheel.
• After successful validation, post the form data to my custom controller from where I can save that data.

I soon realized that I simply can't use the standard input/FormInput (to generate text boxes) widget for custom objects. I also found that I can't use the standard input/TextInput widget too. After some R&D, I finally managed to find a solution by creating a widget from scratch and adding appropriate HTML inside its view.

So far so good. My first step was taken care of. I was able to use

<rn:widget path="/custom/nl/custom_input" name="Packagename$Objectname.c$Fieldname" required = "true" />

in the form's view page.

The next step, Form Validation, is the point which is confusing me to no limits. I'm having trouble understanding the code given in the documentation and hence decided to make a thread about it here.

I came across this which unfortunately didn't help much. I also came across another thread (can't seem to find the URL) in which the OP had used a custom widget which was extending the input/TextInput widget and wanted to know how to apply validation to that textbox. The answer given was to override the onValidate function of input/TextInput and return false if error or return the event object if success.

So am I right in assuming that perhaps I can follow a similar approach? Since I'm using a new widget, is there a similar method which I can override and return true or false? And if yes, what would be the name of the function? Any help much appreciated.

Answer 1

I had figured it out through a series of trial and error methods. What I did was extend my custom input with Rightnow.Field inside its logic.js file.

Custom.Widgets.nl.custom_input = RightNow.Field.extend({
    overrides: {            
        constructor: function() {               
            this.parent();

            /* Call a custom function on form submit */
            this.parentForm().on("submit", this.onValidate, this);
        }
    },

The following functions were taken from the logic.js file of SiteInfo (A custom object sample code provided in the CP documentation) and included inside my input's logic.js file to complete the validation process.

• onValidate
• _displayError
• _toggleErrorIndicator

That automated the whole process and the validation was taken care of. Well, at least for the textboxes...

Answer 2

Are you using CP2 or CP3 and which version of RightNow? I'll work with the assumption that it's CP2 here.

You're question is almost two part: 1) which widget can I use, and 2) how do I extend validation?

Since it sounds like you just want to use required and validate_on_blur standard widget attributes, then I think your first approach is better. You should be able to achieve what you have described with out-of-the-box functionality.

Using Standard Widgets

Try using a standard widget again using dot notation to access the field; similar to the approach in ROQL:

<rn:widget path="input/FormInput" name="Packagename.Objectname.Fieldname" required = "true" />

Custom objects do not have custom fields since the object itself is custom. So, there is no c$ prefix to access a field on a custom object. That notation only applies to custom fields on standard objects.

Also, of note, the FormInput widget is just a wrapper for the other input widgets, including TextInput.

Creating Widget Validation

If you want to use your custom widget, then you would need to override the appropriate methods in your logic.js file as you mentioned. Depending on how you created the custom widget, onValidate, or whatever your validation method is, may not actually be a method in that file yet; you have to create it. In that case, you need to setup an event listener for your text field and then perform an action on the event. If you want to use blur, it would be something like the following (which is basically what the standard input widgets do)

RightNow.Widget.MyWidget = function(data, instanceID) {
    //Setup widget data
    this._inputField = document.getElementById("rn_" + this.instanceID + "_" + this.data.js.name);
    YAHOO.util.Event.addListener(this._inputField, "blur", this._blurValidate, null, this);
}

RightNow.Widget.TextInput.prototype = {
     _blurValidate: function()
     {
         //validate your field data
     }
}

The CP3 approach is a bit different, especially since there is robust custom widget inheritance. So, if you are using CP3 and you still want to go the custom widget route, then check back.

Also, all of the standard widget code should be exposed to you via the src folder in WebDAV. If you have access to WebDAV through your profile, which you should since you are developing CP, then you can review how the standard widgets work and apply the same principles to your code.