Skip to Content

SAPUI5 has been based on standard & common technologies (JS/HTML5/CSS3) that lets us to deploy / embed wherever we want ( almost 🙂 ): mobile online or offline (e.g. mixing PhoneGap), NW Portal, ABAP, HTTP Server, Java WAS Server, …

This blog explains How to visualize a Web Page Composer Form with SAPUI5 in SAP NW Portal 7.3.

First of all, I’ve followed this guide to create a new form: http://scn.sap.com/docs/DOC-22253

On step 4.1.2 – Define the presentation of the Web form, I’ve extended XSL style definition in order to load SAPUI5 libs and read XML contents into SAPUI5 components (labels, textviews, etc).

Web Form Definition

This file defines Web Form metadata structure.


<documenttype id="wpc_pc_new" description="SAPUI5 New" showpreview="false" showelementlist="false">
  <properties>
  <property id="fileName" description="xml.xlbl.filename" type="inputfield" size="25" isrequired="true" isfilename="true" />
  <property id="date" description="xml.xlbl.date" type="dateinput" isrequired="true"/>
  </properties>
  <elements>
  <element id="title" description="xml.xlbl.title" type="inputfield" size="50" default="true" isrequired="true" nodelete="true" singleinstance="true"/>
  <element id="author" description="xml.xlbl.author" type="inputfield" size="50" default="true" isrequired="false" nodelete="true" singleinstance="true" />
  <element id="description" description="xml.xlbl.description" type="inputfield" size="150" default="true" isrequired="true" nodelete="true" singleinstance="true"/>
  <element id="image" description="xml.xlbl.image" type="imageselect" default="true" isrequired="false" nodelete="true" singleinstance="true"/>
  </elements>
</documenttype>

Web Form Presentation

This file transforms XML content into an HTML page with SAPUI5. Previously I’ve deployed a SAPUI5 app com.sap.scn.demo with SAPUI5 libs (/com.sap.scn.demo/resources/sap-ui-core.js). If your portal has installed SAPUI5 addOn it is possible access directly to SAPUI5 libs on your portal.


<?xml version="1.0"?>
<!DOCTYPE stylesheet[
<!ENTITY apos  "'" >
<!-- replace &apos; with html escape character for ' -->
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:wpc="com.sap.nw.wpc.km.service.editor.xslt.XsltHelperCore">
  <xsl:template match="/">
  <html>
  <head>
  <!-- No cache, Force IE9 -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="X-UA-Compatible" content="IE=IE9"/>
  <meta charset="UTF-8"/>                                   
  <-- Load SAPUI5 Libs -->
  <script src="/com.sap.scn.demo/resources/sap-ui-core.js"
  id="sap-ui-bootstrap"
  data-sap-ui-libs='sap.ui.commons'
  data-sap-ui-theme="sap_goldreflection">               
  </script>
  <script>
  jQuery.sap.includeStyleSheet("/com.sap.scn.demo/css/custom.css");
  jQuery.sap.includeStyleSheet("https://fonts.googleapis.com/css?family=Playfair+Display");
  var mainLayout = new sap.ui.commons.layout.MatrixLayout({
  layoutFixed : true,
  columns : 1,
  width : '100%',
  height : '100%',
  widths : ['100%'] });
  var oLayout = new sap.ui.commons.layout.MatrixLayout({
  layoutFixed : true,
  columns : 2,
  width : '100%',
  height : '100%',
  widths : ['200px', ''] });
  var leftLayout = new sap.ui.commons.layout.VerticalLayout({width: '100%'});
  var rightLayout = new sap.ui.commons.layout.VerticalLayout({width: '100%'});
  var oRow = new sap.ui.commons.layout.MatrixLayoutRow();
  var oCell = new sap.ui.commons.layout.MatrixLayoutCell({padding: sap.ui.commons.layout.Padding.Both, colSpan : 1, vAlign: sap.ui.commons.layout.VAlign.Top});
  oCell.addContent(leftLayout);
  oRow.addCell(oCell);
  oCell = new sap.ui.commons.layout.MatrixLayoutCell({padding: sap.ui.commons.layout.Padding.Both, separation: sap.ui.commons.layout.Separation.SmallWithLine, colSpan : 1, vAlign: sap.ui.commons.layout.VAlign.Top});
  oCell.addContent(rightLayout);
  oRow.addCell(oCell);
  oLayout.addRow(oRow);
  $( document ).ready(function() {
  var label;
  var field;
  var layoutField;
  <!-- Left -->
  var oImage = new sap.ui.commons.Image({width:'200px'});
  <xsl:for-each select="document/elements/element">
  <xsl:if test="@type='image'">
  oImage = new sap.ui.commons.Image({width:'200px'});
  oImage.setSrc('/irj/go/km/docs/<xsl:value-of select="current()"/>');
  </xsl:if>
  </xsl:for-each>
  leftLayout.addContent(oImage);
  leftLayout.addContent(new sap.ui.commons.layout.AbsoluteLayout({width: "1px", height: "10px"}));
  <xsl:for-each select="document/elements/element">
  <xsl:if test="@type='author'">
  layoutField = new sap.ui.commons.layout.MatrixLayout({
  layoutFixed : true,
  columns : 2,
  width : '100%',
  widths : ['75px', '125px'] });
  label = new sap.ui.commons.TextView();
  label.setText('Author:');
  field = new sap.ui.commons.TextView({design: sap.ui.commons.TextViewDesign.Italic});
  field.setText('<xsl:value-of select="current()"/>');
  layoutField.createRow(label, field);
  leftLayout.addContent(layoutField);
  leftLayout.addContent(new sap.ui.commons.layout.AbsoluteLayout({width: "1px", height: "10px"}));
  </xsl:if>
  </xsl:for-each>
  <xsl:for-each select="document/properties/property">
  <xsl:if test="@type='date'">
  layoutField = new sap.ui.commons.layout.MatrixLayout({
  layoutFixed : true,
  columns : 2,
  width : '100%',
  widths : ['75px', '125px'] });
  label = new sap.ui.commons.TextView();
  label.setText('Date:');
  field = new sap.ui.commons.TextView({design: sap.ui.commons.TextViewDesign.Italic});
  field.setText('<xsl:value-of select="current()"/>');
  layoutField.createRow(label, field);
  leftLayout.addContent(layoutField);
  leftLayout.addContent(new sap.ui.commons.layout.AbsoluteLayout({width: "1px", height: "10px"}));
  </xsl:if>
  </xsl:for-each>
  <!-- Right -->
  <xsl:for-each select="document/elements/element">
  <xsl:if test="@type='title'">
  field = new sap.ui.commons.TextView({
  text : '<xsl:value-of select="current()"/>',
  wrapping : false,
  design: sap.ui.commons.TextViewDesign.H2
  });
  rightLayout.addContent(field);
  </xsl:if>
  </xsl:for-each>
  <xsl:for-each select="document/elements/element">
  <xsl:if test="@type='shortDescription'">
  field = new sap.ui.commons.TextView({
  text : '<xsl:value-of select="current()"/>',
  design: sap.ui.commons.TextViewDesign.Italic,
  wrapping : false
  });
  rightLayout.addContent(field);
  </xsl:if>
  </xsl:for-each>
  mainLayout.createRow(oLayout);
  mainLayout.placeAt('content');
  });
  </script>                         
  </head>
  <body class="sapUiBody" role="application">
  <div id="debugInfo"></div>
  <div id="content"></div>
  </body>
  </html>
  </xsl:template>
</xsl:stylesheet>

Result

webformsapui5.PNG

SAPUIfy all you can 🙂

Enjoy!

To report this post you need to login first.

3 Comments

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

      1. Marcelo Durante

        Hi Angel,

        I’ve followed that guide, it’s not exactly what I need but I think it’s close enough. I’ll keep digging around it.

        Thanks anyway!

        Best regards,

        Marcelo

        (0) 

Leave a Reply