Skip to Content

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 15+ 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.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Doyle

    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.

     

     

    (0) 
  2. Daniel Vladinov Post author

    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) 
      1. Diether De Coninck

        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

        (0) 
  3. branislav popadic

    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.

     

    (1) 

Leave a Reply