We have a requirement for tabular data entry in a service catalog. After looking at the plugin ServiceNow Share - Catalog Table Variable , I decided instead to give this a try myself using a product I am a good bit familiar with, datatables.js.
I have built a prototype of this idea, and would like to share the current work with the community.
My approach for this prototype is as follows:
1. Use a UI macro to add dependencies to DOM for various script (application file, moment.js, log.js, ect)
2. use a UI macro and embed a table element in the catalog item DOM
UI Macro - Add table HTML
3. use a UI macro to add buttons to the catalog item form for table record save / edit
UI Macro - sc_add_record_button
3. Create a JS class for managing the UI interaction between datatables and the catalog item variables
UI script - ServiceCatalogDataTables
The scripts listed here are attached below for your review.
After page load, the user is presented with a standard catalog item form. The form represents a single record in a table. After the user fills out the form, and presses the add button,
the datatables class is called, the table initialized, and the form data is added to the table presentation.
Datatables provides pagination, sorting, and filtering. When the user has completed entering data, the table data can be serialized in an on-submit handler and then either saved in the serialized format with the catalog item variables, or submitted via ajax to a dedicated table in service now, such as an import set row, ect...
