Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
daniel_vladinov
Explorer


Have you ever imagined a world in which your SAPUI5/OpenUI5 dev/test environment will help you fix UI issues before they are even discovered? Well, this is not fiction anymore. With the UI5 Support Assistant you can easily and efficiently check whether your apps are following the UI5 best practicesproduct standard requirements or SAP Fiori Design Guidelines.



Picture 1: Support Assistant tool in use

SAPUI5 is the strategic technology to move towards appealing and standard-compliant web designs and Fiori apps, based on this UI5 framework, have become the mainstream for S/4 HANA. However, with experience we've come to realize that the guidelines and best practices, although documented, are not widely known or followed by all stakeholders and development teams. Also, it is a familiar fact that consultation tickets, software bugs or performance issues are often more costly and difficult to resolve when discovered late. So, we started thinking how we can ensure that guidelines are being followed correctly and at the same time help speed up the development process and reduce costs. In other words, how we can make life easier.

The solution was the development and release of the latest support tool - the Support Assistant, which became available as of SAPUI5/OpenUI5 version 1.48. It is embedded in the SAPUI5 framework and allows you to check directly in the browser runtime whether an existing or newly developed Fiori or freestyle app follows UI5 best practices, product standard requirements or SAP Fiori Design Guidelines.

The tool is easy to start. You can either use the URL parameter sap-ui-support=true or open it from the Technical Information Dialog using the key combination ALT+CTRL+SHFT+P. You can find more information in the Support Assistant Documentation.



Picture 2: Activating the Support Assistant

You are probably wondering if you need to be using a new SAPUI5 version to be able to take advantage of this tool. The answer is: No. The Support Assistant is designed to run in a separate instance side-by-side with the UI5 app and to appear in a separate frame, so it can be used to analyze any SAPUI5-based application down to version 1.44.17.

So, how exactly does the Support Assistant work?

It's a tool, based on rules. Their main idea is to turn human knowledge and expertise into machine readable and executable format. They check for known or expected issues and provide links to the exact documentation pages where solutions are explained. Support rules are very easy to be authored and tested directly over the running application. A handy API to explore UI5 elements or console logs and traces is provided for the rules JavaScript check() function. They help you prevent early in the development process common programming and runtime mistakes that may affect performanceusability, consistencyaccessibility or functionality of your UI5 app. Just select the Rules, click 'Analyze' and check the Issues detected. Easy-peasy, right!



Picture 3: Support Assistant Rules

So, if you are still wondering why the Support Assistant should be your go-to, here are just a few of its many benefits:

  • It helps you reveal potential issues and ensure best practices and design guidelines are followed.

  • It can automatically check for specific re-occurring or expected UI issues and suggest on-the-spot solutions and documentation links.

  • It helps to lower development and maintenance cost for SAP internally and for customers.

  • It makes the development process faster and more efficient by providing help and support at the right time.


Stay tuned for more posts about the Support Assistant in which we'll give you more information about the support rules and about specific features of the tool.

The next post of our UI5ers Buzz blog series will cover “Useful Tools for developing UI5 with WebStorm”.

How are we doing? Let us know by leaving a comment here or contacting us in the slack channel.

Previous Post: UI5ers Buzz #16

Talk to you soon,
Daniel Vladinov








Daniel Vladinov is a Product Owner at SAP with 13+ years of experience in the company. Member of the UI5 (HTML/JS UI library created by SAP) development unit in Sofia. Strongly focused on UI5 supportability tools.


9 Comments
MikeDoyle
Active Contributor
0 Kudos
Thanks for the info Daniel.  It's great that the tool supports versions down to 1.44, as that is the stable/maintenance release for the 'Fiori 2' design.

I assume it's been tested with a SAP Cloud Platform portal service FLP?  I just did a test with a site on Maintenance 1.44.  When I open the ALT+CTRL+SHFT+P dialog I can see that we are running 1.44.19 and the Activate Support Assistant button appears.  When I click it nothing happens and I get the following in the console: Support Assistant could not be loaded from the URL you entered

I tried with the url parameter too and the result was the same.

 

 
daniel_vladinov
Explorer
0 Kudos
Hi, Mike

Yes, the Support Assistant should be functional after 1.44.17 and is also tested / working with FLP. In fact - with any SAPUI5-based application.
We've also seen some situations when it doesn't load properly. Depending on the FLP/Cloud hosting settings, it might be cross-domain rules loading issues (see architecture), e.g. there is “Content Security Policy” set on application level and the Support Assistant cannot be loaded. setup;

Would you open browser's dev tools (F12) and observe in the Network/Console logs for errors?

Kind Regards, Daniel
0 Kudos
Same here, tested on version 1.48.6, 1.48.11, console shows error: "Support Assistant could not be loaded from the URL you entered"
I found the solution for my problem, when you press Ctrl + Shift + Alt + P, and you are using resource from CDN, in dialog you have to go to settings, and from Reccomended locations choose SAPUI5 CDN, and then click Activate Support Assistant.



That should do it.

Notice also options setting to open SA in new window.

 
Former Member
Really exciting tool! Wish it'd been around a few months ago 🙂

 
ddeconin
Advisor
Advisor
0 Kudos
Same here. And workaround from below makes no difference..
ddeconin
Advisor
Advisor
0 Kudos
My Error is

HEAD https://flpnwc-site/myapp/sap/ui5/1/resources/sap/ui/support/Bootstrap.js 404 (Not Found)
window.XMLHttpRequest.send @ jquery.sap.trace-dbg.js:124
X.send @ xhr-dbg.js:516
send @ jquery-dbg.js:9203
ajax @ jquery-dbg.js:8684
q.ajax @ jquery.sap.global-dbg.js:1697
_loadAssistant @ TechnicalInfo.js?eval:6
_startAssistant @ TechnicalInfo.js?eval:6
onOpenAssistant @ TechnicalInfo.js?eval:6
a.fireEvent @ EventProvider-dbg.js:229
a.fireEvent @ Element-dbg.js:593
(anonymous) @ ManagedObjectMetadata-dbg.js:426
B.ontap @ Button-dbg.js:239
a._handleEvent @ Element-dbg.js:301
U._handleEvent @ UIArea-dbg.js:786
dispatch @ jquery-dbg.js:4737
g @ jquery-mobile-custom-dbg.js:1972
p @ jquery-mobile-custom-dbg.js:2050
dispatch @ jquery-dbg.js:4737
c3.handle @ jquery-dbg.js:4549
trigger @ jquery-dbg.js:7819
(anonymous) @ jquery-dbg.js:7903
each @ jquery-dbg.js:365
each @ jquery-dbg.js:137
trigger @ jquery-dbg.js:7902
P @ jquery-mobile-custom-dbg.js:1543
R @ jquery-mobile-custom-dbg.js:1553
dispatch @ jquery-dbg.js:4737
c3.handle @ jquery-dbg.js:4549
16:55:54.813 jquery.sap.global-dbg.js:999 2017-11-15 16:55:54.752909 Support Assistant could not be loaded from the URL you entered
ChrisSolomon
Active Contributor
Just started using it. Pretty cool. Let's see where it goes from here!

(*any way to totally deactivate it? ie. you don't want some clever user running it in production?)
daniel_vladinov
Explorer
Hi Christopher,

thank you for the interest exploring it - would be glad to know your feedback.

As for deactivation - there is no such feature currently, but your question had triggered me, so we would consider it in future.