How to make fields mandatory on a service portal widget

[orlando3]

Good evening everyone,

I am attempting to make 3 fields mandatory on a widget in the service portal. I did not know that this was a possibility as i am use to doing most of the development on the ITIL side, any way, i need to make grade, series, and state mandatory, could someone point me in the direction of some resources that explain how mandatory fields work on SP widgets? I am very new when it comes to Service Portal development.

(function() {


	if (input && input.searchSubmitted) {
		gs.addInfoMessage('search submitted');
	}
	if($sp.getParameter('id')=='hirenow_search'){
		data.show_report=true;
	}else{
		data.show_report=false;
	}
	data.report3=$sp.getWidget("report",{
		"report_id": 'de75b9b01b0468d4594d43bae54bcb9c',
		widget_parameters:JSON.stringify({"report_id":
																			{
																				"value": "de75b9b01b0468d4594d43bae54bcb9c",
																				"displayValue": "Total Upcoming Announcements"},
																			"show_title":
																			{"value": "true","displayValue": "true"}})
	});

	data.report2=$sp.getWidget("report",{
		"report_id": 'bfd3b1341bc068d4594d43bae54bcb62',
		widget_parameters:JSON.stringify({"report_id":
																			{
																				"value": "bfd3b1341bc068d4594d43bae54bcb62",
																				"displayValue": "Total Available Applicants"},
																			"show_title":
																			{"value": "true","displayValue": "true"}})
	});
	data.report1=$sp.getWidget("report",{
		"report_id": 'a56396f41b0c68d4594d43bae54bcb76',
		widget_parameters:JSON.stringify({"report_id":
																			{
																				"value": "a56396f41b0c68d4594d43bae54bcb76",
																				"displayValue": "Total Available Announcements"},
																			"show_title":
																			{"value": "true","displayValue": "true"}})
	});
	var locations=[]; //define array first
	var state=[];
	var announcements = [];
	var grade=[];
	var series=[];

	var grAppAnn = new GlideRecord('x_g_fpa_hire_applicant_announcement');
	grAppAnn.orderBy('u_applicant')
	grAppAnn.query();

	while(grAppAnn.next()) {
	}

	var serGR = new GlideRecord('x_g_fpa_hire_series');
	serGR.orderBy('u_code');
	serGR.query();
	while(serGR.next()){
		series.push(serGR.getDisplayValue());
	}

	var citGR = new GlideAggregate('x_g_fpa_hire_location');
	//locGR.orderBy('duty_location');
	citGR.groupBy('duty_location');
	citGR.query();
	while(citGR.next()){
		locations.push(citGR.duty_location.toString());
	}
	
	var staGR = new GlideAggregate('x_g_fpa_hire_location');
	//staGR.orderBy('duty_state');
	staGR.groupBy('duty_state');
	staGR.query();
	while(staGR.next()){
		state.push(staGR.duty_state.toString());
	}

	var gr = new GlideRecord('x_g_fpa_hire_job_announcement');
	gr.orderBy('u_grade', 'u_series');
	gr.query();
	while(gr.next()) {
		var gra = '';
		gra = parseInt(gr.u_grade) || 0;
		var ann = '';
		ann = gr.u_announcement_number.toString();
		if(grade.indexOf(gra) === -1)
		{
			grade.push(gra);
		}
		if(announcements.indexOf(ann) === -1)
		{
			announcements.push(ann);
		}
	}

	grade.sort(function(a, b){return a - b});

	data.locations=locations;
	data.state=state;
	data.grade=grade;
	data.series=series;
	data.header = gs.getMessage(options.header_text) || '';
	data.description = gs.getMessage(options.description) || '';
	data.announcements = announcements;
	data.showTitle = options.show_title_filter == 'true';
	data.showSeries = options.show_series_filter == 'true';
	data.showLocation = options.show_location_filter == 'true';
	data.showState = options.show_location_filter == 'true';
	data.showGrade = options.show_grade_filter == 'true';
	data.showFPL = options.show_fpl_filter == 'true';
	data.showAnnouncementNumber = options.show_announcement_number_filter == 'true';
	data.showKeywords = options.show_keywords_filter == 'true';

})();

[Bhawanjit Sing2 · Accepted solution]

1. If you have created a custom widget then use the below method.

<input type="text" required/>

//Client script

$scope.submit =  function(){

if(!$scope.state){
spUtil.addErrorMessage("Please fill the required fields.");
return;
}

}

2. But if you are using the OOB form widget then you just have to set the field as mandatory in the table.

[orlando3]

Hi @Bhawanjit Singh Saini 

Should this be added at the end of my script?

[Vikas-Malhotra]

Hi Kaleb,

Basic idea is to do the validation check on submit. The order doesn't matter as long as your function definition is correct and you are able to call this function on submit of your form.

As per the above example, make sure you are calling submit function, onclick of the submit button or you may also user server.update..

Thanks, Vikky

[Bhawanjit Sing2]

Hi Kaleb,

As Vikky explained, You need to check whether the field has value or not before updating the data to the respective SN table.

If the field is empty you need to throw an error message asking the user to fill all required fields.