Scoped Form Widget Instance

Updated: Dec 11, 2020



I came across an interesting issue when developing some requirements recently. I'm finding more and more organizations like the view of the Form widget in the Service Portal rather than the out-of-the-box Ticket Conversations widget. This article mainly focuses on how to do cool things with the Form widget within a scoped application and not the Global scope.


Form Widget


The form widget is a widget developed by ServiceNow that resides in the Global scope. I mention that it's in the Global scope because I needed to tweak it recently to accomplish requirements in a scoped app, and received an error message that I didn't want to deal with. I'm not big into hackery of out-of-the-box widgets because I want them to work how ServiceNow intended them to work, and I'd probably miss some big security hole in poking around. Note: I received this error on an Orlando instance:

Function hasRightsTo is not allowed in scope.

I checked the community and couldn't find an easy way around this with Application Cross Scope Privileges, which led me to my solution. This may no longer be an issue in Paris or newer instances, but the lesson is still the same, you don't have to clone the form widget to do some pretty cool stuff with it.


Note: Make sure your scoped table provides Can Write access to the Global scope, or you won't be able to post Work Notes, etc. if choosing to embed the Activity Log Formatter in the form view and using it from the Form widget.


Page Route Maps


Page Route Maps are awesome. They give you the flexibility to route from out-of-the-box pages to custom pages. In this example, when a user submits a record producer, I want to redirect them to the form widget instead of the out-of-the-box page.


You can apply the Page Route Map on a portal by portal basis, meaning that it only applies to your custom portal, or multiple portals, and there's a nice 'active' field to turn it on and off.


You can see here, I'm routing anything that points to the 'ticket' page to my cloned form page 'order_form'




View


The Form widget is where you can really harness the power of views on the Service Portal (or any custom portal). Out of the box the Form widget utilizes the 'sp' view but this can be changed with an option to any view of your choosing, lets say for instance you have a large user base of ServiceNow and perhaps the 'sp' view doesn't work for all users of the table, or you just don't want to mess with out-of-the-box functionality. You can actually create your own view on the table and point your instance of the form widget to utilize that view.


In my demo, I've created a record producer to create a record (scoped application) and I want to display the variables the user submitted on the form widget for that custom table. I can create my own view to do this, and not touch the 'default', 'sp', or other out-of-the-box views, which means I can do whatever I want with this view to accomplish my requirements.


At this point, I created a custom application and a table called 'Scoped Orders' extended from the Case table.


1. I performed an 'insert and stay' within scope on the 'Incident Variable Editor' formatter, pointed it to my table and renamed it 'Order Variable Editor'



2. I created a view called 'order_portal' and modified it for the fields I wanted to show on the portal.



Options


Instead of using the 'sp' view I want to use the 'order_portal' view I created especially for this requirement. In order to do so, I need to append the following option into my scoped form widget instance:


	"view": {
		"value": "order_portal",
		"displayValue": "order_portal"
	}

Here's a final view of what the options I used for my requirements:


{
	"disableUIActions": {
		"value": "true",
		"displayValue": "true"
	},
	"showFormView": {
		"value": "false",
		"displayValue": "false"
	},
	"omitHeaderOptions": {
		"value": "true",
		"displayValue": "true"
	},
	"view": {
		"value": "order_portal",
		"displayValue": "order_portal"
	}
}

CSS


This is what makes the form widget instance shine. Here's a screenshot of the out-of-the-box form widget without the options to use the 'order_portal' we set above, so it's using the 'sp' view by default.



This is where Google Dev Tools (or any other developer tools) is your best friend, as you really can drill down into elements on the page to tweak your CSS exactly how you want it. Using Dev Tools, I was able to find the class for form sections, hide the 'Save' button, remove borders, etc.


Here's the CSS I used in my scoped form widget instance:


.container-caption {
  color:#148F77;
}

.panel-title.ng-scope {
  color:#FFFFFF;
  background-color:#FFFFFF;
  display: none;
}

.panel-heading {
  background-color:#FFFFFF;
  border-bottom: none;
  padding: 5px 5px 5px 5px;
}

.panel-title {
  color:#FFFFFF;
}

.panel-footer {
  background-color: #FFFFFF;
  border-bottom: none;
  border-top: none;
  padding: 1px 1px 1px 1px;
  display: none;
}

.btn-primary {
  color: #FFFFFF;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}

.panel {
  border: none;
}

.h4 {
  font-size: 28px !important;
}


Other Widgets


I created two more widgets on the page to show the Order Number in larger text, since I removed it from the form widget, as well as the status. I placed these into their own containers, and set it as a header, so as the user scrolls, they can still see the number and status.



Here's a final view of the form:





Recap


I had a specific layout requested and I had to do this all within a scoped application. This one really made me think creatively about how I could accomplish everything I wanted without touching the Global scope and creating a widget clone. It also reminded me the power of views and formatters. This isn't a prescription on what you would need to do, meaning you may or may not need to clone pages in scope, you could just use the out-of-the-box form page if it suits your needs.

  1. Scoped Table you want to insert your Record Producer into

  2. Scoped Variable Formatter

  3. Scoped View

  4. Scoped Record Producer with Variables

  5. Scoped Portal

  6. Scoped Form Page

  7. Scoped Page Route Map

  8. Scoped Form Widget Instance

  9. Scoped Number Widget

  10. Scoped Status Widget


Resources


ServiceNow Documentation: Form Widget

serviceportal.io: Form Widget


Thanks for reading, I hope shines light on the power of widget instances especially when working within scoped applications and having to sidestep some of the limitations ServiceNow puts in place with their out-of-the-box widgets.

315 views0 comments

Recent Posts

See All