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 ' 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
SAPUIfy all you can
Enjoy!