Using 'Form' widget vs coding a custom form yourself

[jorgegrc]

Hello all,

I was wondering how do you cope with pages in the Service Portal that enable users to create new records, such as an incident creation page.

From my understanding, there's two main ways to do this:

1. Use the "Form" widget and create a view to define a custom layout for the portal
2. Code the form layout yourself using HTML & CSS and handle form logic (such as submission and validation) by writing more code in the Client and Server scripts

I guess that with the first approach it is quicker to set up and easier to maintain, plus you can wrap the out of the box "Form" widget with your own new one that simply sets the options to pass for that Form widget, but you miss the "customization" (in terms of appearence) that you can achieve by handcoding the form yourself. 

So by using the first approach you will have the looks of a standard platform form but you don't have to deal with form validation, form submission and manual record creation when the user submits the form...

What are your thoughts about this? Have you done it one way or the other?

Cheers!

[Raju Koyagura]

It depends on the requirement. We most of the time use Form widget (to avoid extra code and for easy maintenance), if there are no specific requirements of form UI look and feel. We will prefer the second approach (completely custom form), if we are more concerned about the look and feel, color combinations and additional buttons/validations...etc. 

[jorgegrc]

What happens if you need to use a reference field in the form? This is another advantage of using the "Form" widget, isn't it? I think there is no easy way to have a reference field on a tailor made form

[Erik Stolberg]

You have to query (either GlideRecord or API GET) and build an array:

/**** get all company records ******/
data.company_table = "core_company";
var companies = [];

var companyGR = new GlideRecord(data.company_table);
companyGR.addQuery("u_active",true);
companyGR.orderBy("name");
companyGR.query();
while (companyGR.next()) {
	/* create array of company names */
	companies.push(companyGR.getDisplayValue());
}

Or you can create an object and push in both display and record values, as well as labels:

data.view = 'sp';
data.users = [];
data.labels = [];
data.fields = $sp.getListColumns(data.user_table, data.view).split(",");

/**** get all user records ******/
var userGR = new GlideRecord('sys_user');

/* put the field labels into the labels array */
data.labels = $sp.getFields(userGR, data.fields);

/* filter, query, sort users */
userGR.addQuery("u_flagged", true);
userGR.orderBy("name");
userGR.query();
while (userGR.next()) {
	var userObj = {};

	if (!$sp.canReadRecord(userGR))
		continue;

	//Push values for each of the fields in data.fields
	$sp.getRecordDisplayValues(userObj, userGR, data.fields.toString());
	$sp.getRecordValues(userObj, userGR, 'sys_id,u_flagged');
	data.users.push(userObj);
}

[Community Alums]

You can customize the looks of anything you want by modifying the CSS. I wouldn't re-code a widget for looks alone.