Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 

Dear Portal fans and SAPUI enthusiasts,

since current evaluation version of SAPUI5 (1.8.4) is still not running out of the box on Portal 7.3 (SP8) and it still takes time until it will come out of the box within the Portal itself, my friends mirco.graf2 , axel.jung3 and myself  tried to make SAPUI5 runnable by ourselves. 

As a result here's what we did to archive a running SAPUI5 framework completely integrated into a NWDI DC including a full working the demokit including working suggestion box and fileupload demo.

After deployment, all resources are available for your own SAPUI5 apps (Abstract Portal Components or Servlets, whatever you prefer). With a little trick also CodeCompletion delivered with the SAPUI5 toolkit is available for Abstract Portal Components js-files.

So here's what has to be done 😉 If you follow our instructions, it will take about 10-15 minutes only!

1. Create a "war"-DC and a corresponding "ear"-DC to deploy the complete framework on the portal.
     (If you do not want to use NWDI, just create a local DC within NWDS)

     Which Public Parts and Dependencies you need, can be taken from these two screenshots

     (only "Build Time" Property needs to be selected as Dependency Detail)

2. Download the Download Evaluation Package for UI Development Toolkit for HTML5 (current Version 1.8.4)

     and extract the containing sapui.war to your local file system

3. Copy the two files resources/sap-ui5.js and resources/sap-ui5-dbg.js from your filesystem into the "war"-DC

     (Destination: WebContent/resources)

4. Copy the index.html into the "war"-DC (Destination: WebContent)

5. Copy all jars from WEB-INF/lib to WebContent/WEB-INF/lib

6. Copy the web.xml into WebContent/WEB-INF (leave it as it is for now, it will be adapted later)

7. Now extract the demokit.war (also contained in the Evaluation Package) to your local file system

8. Copy the complete .index folder to WebContent (switch to Navigatior View if you do not see this folder ;-))

9. Copy  complete content, js, theme and  docs folders to WebContent

     (Before you start copying, rename the "Apps" folder within content to "apps".

     Otherwise the Mobile Controls within the demokit won't work)

10. Copy the search.html to WebContent

11. Rename the index.html within the demokit.war to demokit.html and copy it to WebContent, too.

12. Within the new demokit.html change line 599 (our contextroot will be "sapui", not "demokit")

suggestUrl: "/demokit/suggest?q={searchTerms}"

     to

suggestUrl: "/sapui/suggest?q={searchTerms}"

13. Copy all three files within classes\com\sap\ui5\demokit\search to WebContent/WEB-INF/classes/com/sap/ui5/demokit/search

14. Copy all not yet copied jars from WEB-INF/lib to WebContent/WEB-INF/lib

    (commons-fileupload-1.2.1.jar, commons-io-1.3.2.jar, demokit-uilib-1.8.4-opt.jar, lucene-core-3.0.2.jar etc.)

15. Adjust the WebContent/WEB-INF/web.xml of the new "war"-DC as printed below.

     (Or just take this version and replace the existing one)

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>sapui5</display-name>
  <servlet>
    <display-name>ResourceServlet</display-name>
    <servlet-name>ResourceServlet</servlet-name>
    <servlet-class>com.sap.ui5.resource.ResourceServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ResourceServlet</servlet-name>
    <url-pattern>/resources/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>ResourceServlet</servlet-name>
    <url-pattern>/test-resources/*</url-pattern>
  </servlet-mapping>
  <context-param>
    <param-name>com.sap.ui5.resource.DEV_MODE</param-name>
    <param-value>true</param-value>
  </context-param>
  <context-param>
    <param-name>com.sap.ui5.resource.USE_CACHE</param-name>
    <param-value>true</param-value>
  </context-param>
  <context-param>
    <param-name>com.sap.ui5.resource.VERBOSE</param-name>
    <param-value>false</param-value>
  </context-param>
  <!-- enable CORS -->
  <context-param>
    <param-name>com.sap.ui5.resource.ACCEPTED_ORIGINS</param-name>
    <param-value>*</param-value>
  </context-param>
  <!-- Cache Control Filter to prevent caching of any resource        -->
   <filter>
    <display-name>CacheControlFilter</display-name>
    <filter-name>CacheControlFilter</filter-name>
    <filter-class>com.sap.ui5.resource.CacheControlFilter</filter-class>
    </filter>   
    <filter-mapping>
        <filter-name>CacheControlFilter</filter-name>
        <url-pattern>*.html</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>CacheControlFilter</filter-name>
        <url-pattern>*.js</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>CacheControlFilter</filter-name>
        <url-pattern>*.css</url-pattern>
    </filter-mapping>
  <servlet>
    <display-name>DiscoveryServlet</display-name>
    <servlet-name>DiscoveryServlet</servlet-name>
    <servlet-class>com.sap.ui5.discovery.DiscoveryServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>DiscoveryServlet</servlet-name>
    <url-pattern>/discovery/*</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>SearchServlet</display-name>
    <servlet-name>SearchServlet</servlet-name>
    <servlet-class>com.sap.ui5.demokit.search.SearchServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>SearchServlet</servlet-name>
    <url-pattern>/search</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>SearchServlet</servlet-name>
    <url-pattern>/keywords</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>SearchServlet</servlet-name>
    <url-pattern>/suggest</url-pattern>
  </servlet-mapping>
  <context-param>
    <param-name>searchIndexLocation</param-name>
    <param-value>/.index</param-value>
  </context-param>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <context-param>
       <param-name>repositoryDirectory</param-name>
       <param-value>./temp/demokit/upload</param-value>
  </context-param>
   <servlet>
    <display-name>FileUploadServlet</display-name>
    <servlet-name>FileUploadServlet</servlet-name>
    <servlet-class>com.sap.ui5.fileupload.FileUploadServlet</servlet-class>
  </servlet>
  <servlet>
    <display-name>FileUploadCheckServlet</display-name>
    <servlet-name>FileUploadCheckServlet</servlet-name>
    <servlet-class>com.sap.ui5.fileupload.FileUploadIntrospectorServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>FileUploadServlet</servlet-name>
    <url-pattern>/upload/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>FileUploadCheckServlet</servlet-name>
    <url-pattern>/upload-check/*</url-pattern>
  </servlet-mapping>
   </web-app>

Remarks:


We mixed up both, the web.xml file of the origin sapui5.war and the web.xml file of the origin demokit.war into one file. It contains all Servlets, necessary for the SAPUI5 framework itself as well as those, necessary for the demokit (e.g. FileUploadServlets). Since the demokit contains all documentation about SAPUI5, this should be a good decision.

Take a look at the documentation within the demokit! All possible adjustments of the web.xml properties are described there in detail

(DEV-mode, CacheBuster etc.).

To make the FileUpload work within the demokit, you need to adjust the context parameter repositoryDirectory to your current portal settings.

To get your current server settings, just write a simple Abstract Portal Component executing following code:

Properties props = System.getProperties();
            Enumeration<Object> enms = props.keys();
            while (enms.hasMoreElements()) {
                Object object = (Object) enms.nextElement();
                response.write("<br>" + object.toString() + ": " + props.get(object).toString());
            }   

Output for "java.io.tmpdir" should give you your server settings ("./temp" in our case). So adjust the web.xml accordingly.

16. Set context root "sapui" within the application.xml of the earlier created "ear"-DC.

     (Guess sapui5 will be used by SAP later, so sapui should be fine ;-))

 <module>
    <web>
      <web-uri>xxx.xx~cp~sapui5~war.war</web-uri>
      <context-root>sapui</context-root>
    </web>
  </module>

17. Build and Deploy the "ear"-DC containing the "war"-DC. THATS IT, YOUR ARE DONE!

RESULT:

The complete "war"-DC should look like this:

Following URLs are now available:

http(s)://<yourportal.de>/sapui/index.html  (Welcome to SAPUI5 - First explanation how to access SAPUI5)

http(s)://<yourportal.de>/sapui/demokit.html (The SAPUI5 Demokit including Documentation)

SAPUI5 Resources are now available via http(s)://<yourportal.de>/sapui/resources/sap-ui-core.js for example

Now you can develop your own SAPUI5 apps. Below you find an example jsp, we included within an Abstract Portal Component:

<head>
         <meta http-equiv='X-UA-Compatible' content='IE=edge' />
         <title>BulkWorkerUI</title>
        <script type="text/javascript">
                        window["sap-ui-config"] = {
                            theme : "sap_goldreflection",   //sap_platinum, sap_goldreflection
                            libs : "sap.ui.commons",
                            debug : true,
                            trace : false
                        };
        </script>
                            <script id="sap-ui-bootstrap"
                    type="text/javascript"
                        src="/sapui/resources/sap-ui-core.js">
        </script>
                       <script type="text/javascript">  
            jQuery.sap.registerModulePath("bulkworker", "/xxx.xx~cp~portal~transport/bulkworker");
            var view = sap.ui.view({id:"IdBulkWorkerView", viewName:"bulkworker.BulkWorkerView", type:sap.ui.core.mvc.ViewType.JS});
            view.placeAt("bulkui");
        </script>
    </head>
    <body class="sapUiBody">
        <div id="bulkui"></div>
    </body>
</html>

Take a look at line 18! By this line of code, we set up the path to the SAPUI5 MVC javascript files within the Abstract Portal Component DC. Read the API documentation within the demokit to see, what this line of code doing 😉 Below you see how an example project structure could look like:

CodeCompletion within NWDS

Install the SAPUI Toolkit contained within the Evaluation Package as described there. You will see that for Abstract Portal Component Projects the js editor does not support CodeCompletion for SAPUI5 yet. To overcome with this, edit the .project file of the corresponding DC and add the following to the existing natures:

 <nature>org.eclipse.wst.jsdt.core.jsNature</nature> 

Now you can add the SAPUI5 core libs according the screenshot below.

Now CodeCompletion is available for the js editor, too. (P.S.: demokit documentation tells you how to do this, too)

Portal Integration

Until now (SP8), Portal does not support a special SAPUI5 iView. Therefore, if you would create an iView out of the Abstract Portal Component the resulting iView will be rendered containing the Portal CSS files as well as the SAPUI5 CSS files. This is causing conflicts and therefore a not working UI in IE for example.

To overcome with this, integrate your SAPUI5 app via an URL-iView. To call your app without any portal css files call it according to following url-syntax:

http(s)://<yourportal.de>/irj/go/prtrw/prtroot/<application_alias>.<ComponentName>

Enjoy working with SAPUI5!!!!

4 Comments
Labels in this area