1. Why Client Side UI Actions
2. How this method works and its advantages
3. Client Side Button Widget (and how to add it to a Portal Page)
4. Final thoughts
5. Save without mandatory (= Save as draft)
6. Confirm on deletes (Confirm Popup)
   
7. Instead of modifying the OOTB Form Widget, a sibling widget is added which injects all client side code
8. No Cloning Required: Form Widget is not changed
9. Upgrade Safety: Form Widget is not changed
10. No Change to UI Action configuration required
11. Client Side Code is strictly separated from Server Side Code
12. The Widget which enables the Client Side Buttons has less than 40 lines of code
13. The method works both in global scope and as well as in a scoped app

To enable Client Side UI Actions, the following has to be considered:

• The UI Actions that are currently visible on the Portal remain unchanged (this means that they still have to be marked as "Client: false" and "Form button: true")
• A new widget must be created, this widget must be a sibling of Form Instance on the Page that displays the form.
  The steps to do that are shown below.

Client Side Buttons Widget (and how to add it to a Portal Page)

1. Create a new widget in the scope of your choice (global or scoped - it doesn't matter)
2. Fill in the following fields:
   Name: Client Side Buttons
   ***Client Controller:*
   api.controller=function() {
   /* widget controller /
   var c = this;
   c.buttonClicked = function (action, g_form) {
   if (action.action_name.includes('delete')) {
   return confirm('Are you sure you want to delete this record?');
   } else if (action.sys_id == '<sys_id_of_my_ui_action') {
   // do stuff like spModal.open
   }
   };
   };
   **Link:*
   function link(scope, element, attrs, controller) {
   var formWidgetSysId = 'fd1f4ec347730200ba13a5554ee490c0';
   var formElement = element
   .parent()
   .closest('div') // column
   .find('.v' + formWidgetSysId);
   if (formElement.length === 0) {
   // form widget not yet loaded, try again in 50ms
   setTimeout(link.apply.bind(link, null, arguments), 50);
   return;
   }
   // save the OOTB triggerUIAction and replace it with our own (that calls client side code)
   var formScope = formElement.scope();
   var ootbTriggerUIAction = formScope.triggerUIAction;
   formScope.triggerUIAction = function (action) {
   var g_form = getGForm(formElement);
   var result = controller.buttonClicked(action, g_form);
   if (result || result === undefined) {
   return ootbTriggerUIAction(action);
   }
   };
   function getGForm(formElement) {
   return formElement
   .find('div[form_model]') // this contains the actual form (sp-model)
   .children()
   .last() // execItemScripts() div which contains the getGlideForm-function
   .scope()
   .getGlideForm();
   }
   }
3. Save the Form

Enable the Buttons on Service Portal Form Page:

1. Open the Service Portal Page Record (for the OOTB form: sp_page.list -> filter for id=form)
2. Click the Column that contains the Form Widget and copy the sys_id of the Column (sp_column) Record
3. Enter sp_instance.list in the filter navigator and create a new Instance (sp_instance) Record
4. Enter the following Data:
   Widget: Client Side Buttons
   Column : Open the magnifying lens and apply the filter: [Sys ID] ["starts with" or "is"] [sys_id_from_step2]
   
   Order: 2
5. Save the Record

The Page Record should now look like this:

Final thoughts

The Client Controller is prepared with an example that shows you how to add code, GlideAjax is also supported, however if you want to add asynchronous calls, you have to do a few modifications to the Widget (hint: use $q).

If you want the whole "Batteries included"-Package, please take a look at the "Swiss Tool" in the official ServiceNow App Store, which includes (just a small extract):

• a more advanced version of the client side portal buttons
• related *and* embedded lists for the ootb form widget
• mandatory attachment handling
• UI Policy based button visible/disable states