[Show Case] The (Service) Portal Experience App: Client Side UI Actions on OOTB Form and Data Table

[Markus Kraus]

Did you ever need to customize your ServicePortal because you needed to add Client Side UI Actions?

Then it is time to revert all your changes and go back to OOTB and install the Portal Experience Scoped Application:

https://github.com/kr4uzi/ServiceNow-Portal-Experience

Examples and ATF can be found here:
https://github.com/kr4uzi/ServiceNow-Portal-Experience-Verification

Fork this repository: 

1. Install App
2. Add (new!) Client Script Logic to existing (!) UI Actions
3. Enjoy

Disclaimer: No widgets or pages were touched in the making of this application!

Security Note: Annotations are vulnerable to Code Injection, the Portal Experience App has a built-in protection against these attacks.

Features:

Client Side UI Actions

Portal UI Action Configuration (similar to Workspace)

Form Annotations

List UI Actions and Field Styles

100% ATF Coverage (Only ATF steps included in Portal Experience, the Validation is contained in different app also available on my GitHub)

[larstange]

Hi @Markus Kraus 

Thank you very much for this very nice implementation. It solves many limitations on the service portal.

I am current using it to implement a self service solution in our contract management module.

But when logged in as a admin i get this error when opening a contract in service portal. I cannot figure out what to do to fix this, can you give me some pointers?

I have found the PXPExtension record in sys_extension_point and clicked Create Implementation but that does not fix it. What else do I need to do?

[Markus Kraus]

@larstange Did you create the extension point implementation in the correct scope ("global")?

[larstange]

@Markus Kraus Ahh thank you - that did the trick.

A couple of other questions now that I have you

1. Is it possible to pass values retrieved from the portal script to a function running aftewards in the server script part. Couldn't figure out how to do it, so im just using ajax for now.
2. It it possible to set a condition so a UI action is only shown on the portal and not in the backend forms, since i only have content in the portal script, they will not work in backend forms.
3. Do you have an example of how to make a field style. What do you fill out in CSS class and Portal style

[Markus Kraus]

@larstange 

1.) There is probably a hacky way which would allow this (e.g. by doing some kind of g_scratchpad/gs.addInfoMessage magic), but I would strongly advise not to use this and stick to best practice: GlideAjax

2.) Yes, simply add the following to the UI-Action's Condition:
gs.action.getGlideURI().toString().startsWith('api/now/sp')
3.) You can check out the Portal Experience Verification app with several examples (it will install a new module which gives you direct access:
https://github.com/kr4uzi/ServiceNow-Portal-Experience-Verification

[larstange]

Thank you for your help - you are an absolute Champ!

[larstange]

Hi @Markus Kraus 

We are very pleased with your  solution as it has enabled us to make a much better self service experience for our contract modul within service portal.

We are now moving to Employee Center, but here your module causes a strange behaviour in the My tasks (HRM Todos Summary) widget. If you refresh the page in the browser when on the page (hrm_todos_page) with this widget your plugin causes it not to refresh. There will just be a "Loading" spinner. This does not happen on instances without your application installed.

Is that something you can look into?

[Markus Kraus]

@larstange Thx for the info. Please update your fork for the fix.

Underlying bug was the built-in spUtil.update throttle. This was necessary for large data-tables where a frequent update would trigger the recordWatcher to reload the whole table every time a record is changed. Now this throttle is per scope and as such only scopes that will frequently reload will be affected.

Maybe this also needs some redesign but at the moment the Employee Center should be working fine again.

[larstange]

Thank you for a very fast response. I can confirm that it works

[Julien]

Hi Markus,

This seems to be exactly what we're looking for.

Small issue for me is, I'm not a github user. I have downloaded a zip with all your files, but that's about as far as I could go. Is there a way to make it work outside of the github sphere?

Thanks for your feedback and have a great day.

[Markus Kraus]

@Julien The application is purely meant to be distributed via git for the following reasons:

- Upgradeability: With git, the application can be easily (read: automatically) upgraded. This is not possible when using update sets

- Maintenance: With Platform upgrades features of this application need to tested and updated. Currently only git is a viable option to distribute those updates

- Idea, Incident, Problem and Change Management: On git, you can create an issue to notify me about things not working, or if you got an improvement idea, you can also post it there.

There are several options to have a smooth experience, one would be to use another of my applications available on github: ServiceNow Marketplace (allows you to easily install and maintain every GitHub Application there is).

If your customer/organization is already using GitHub this is easy going and you can adapt the following instructions to install the application:
https://www.servicenow.com/community/developer-articles/data-leak-analyser-gt-due-to-the-recent-now-...

If GitHub is currently not used, not planned to be used or shall not be used (e.g. because of security or privacy reasons), please reach out to me via personal message so we can discuss the best option for you (in terms of maintenance and installation/upgrade).

[SUMI-SNOW1]

Hi @Markus Kraus 

I have imported the Portal Experience application on the Client's ServiceNow instance.
After making the changes to the UI Action, I am receiving the error 'this.setScope is not a function' on the Portal page.

I can see its from the UI Script 'form_infuse' but not sure why?

Can you please advise how to resolve this issue?

Many thanks,
Sumanth

[Markus Kraus]

@SUMI-SNOW1 Thanks for reporting this via github 🙂 The issue is fixed.