Skip to Content
Author's profile photo Angel Puertas

New cocktail: SAPUI5 & Web Page Composer

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!

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Angel, great blog!

      I hope you can help me on this question: Have you ever tried to extend or develop a new content editor for WCP with SAPUI5?

      I've followed this, Creating Component Editors for Composite Web Form Elements, but it's aimed to 7.0 instead of 7.3/7.4. Besides, it's, in the end, a Portal Component.

      Thanks in advance!

      Best regards,

      Marcelo

      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Thanks Marcelo!

      I've only integrated TinyMCE as an advanced WPC rich text editor following this guide:

      http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a0983d9b-327e-2e10-1aac-b33328877548?QuickLink=index&…

      Hope this helps,

      Cheers

      Author's profile photo Former Member
      Former Member

      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