Page tree
Skip to end of metadata
Go to start of metadata

Summary: This document provides basic information about the extension providing SAPUI5 support for Web applications.

Extension ID

com.castsoftware.sapui5

What's new?

See SAPUI5 - 1.1 - Release Notes for more information.

Description

This extension provides support for SAPUI5, the SAP JavaScript UI library.

Note that the extension supports SAP Fiori applications using the SAPUI5 framework for front-end development.

  • SAP Fiori is a new user experience for SAP software. To overcome the complexity of traditional SAP GUIs, SAP Fiori has been developed.
  • SAP Fiori focuses mainly on mobility and uses the SAPUI5 Framework for front-end development.

In what situation should you install this extension?

The main purpose of this extension is to modelize the front-end part (SAPUI5 source code) of your SAP Application and to identify links between HTTP request services and ABAP operations /JavaScript functions, to enable linking from the Web App front-end right through to the back-end. Therefore if your SAP application contains SAPUI5  source code and you want to view these object types and their links with other objects, then you should install this extension.

Object structure

  • creates SAPUI5 Applications
  • creates SAPUI5 Views (XML and JS Views Only)
  • creates SAPUI5 Fragments
  • creates SAPUI5 Controllers
  • creates SAPUI5 Model Functions (controller functions accessible from views)
  • creates SAPUI5 Components
  • creates SAPUI5 OData Models
  • creates SAPUI5 JSON Models
  • creates SAPUI5 Objects (SAPUI5 objects except controllers, components and models)
  • creates HTML5 Get/Post/Put/delete http requests services
  • creates SAPUI5 ABAP Get/Post/Put/delete operations
  • creates SAPUI5 ABAP CDS View operations

Link structure

  • Creates links from views to controllers
  • Creates links between controllers and components
  • Creates links between javascript functions and Http request services
  • Creates links between ABAP operations and ABAP functions
  • Creates links between Http request services and ABAP operations (through web service linker)

Transactions

  • Default entry point is the html file content.
  • Applications and views are Transaction entry-points.
  • SAPUI5 ABAP operations are entry-points when they are not called by another object.
  • JSON Models are Transaction end-points.
  • Http request services are end-points when they do not call another object.

Technical information

SAPUI5 Applications

SAPUI5 Applications can be defined in two ways:

HTML files

They can be found in an html file (mostly index.html) files where we can find the following code:

	<title>Shopping Cart</title>

	<script
		id='sap-ui-bootstrap'
		type='text/javascript'
		src='../../../../../resources/sap-ui-core.js'
		data-sap-ui-theme='sap_bluecrystal'
		data-sap-ui-libs='sap.m'
		data-sap-ui-compatVersion="edge"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.cart" : "./"
		}' >
	</script>
  • This code contains "sap-ui-bootstrap", and "Shopping Cart" is the application name.
  • The value of "data-sap-ui-resourceroots" is also used to create fullnames of objects.
  • The "Component.js" file present at the same place as "index.html" is the main component associated to the application.

manifest.json

They can be found in a manifest.json file where we can find the following code:

  • The code contains "sap.app", and the application name is found in the title parameter - note that if the title starts with "{{", then the application name is founc in id (in the example below, the name is "masterdetail".
  • The "Component.js" file present at the same place as "manifest.json" is the main component associated to the application.
  • The metadata part can be used if not present in the component code (see later in the component description).
 Click here to view the code example...
{
	"_version": "1.2.0",

	"sap.app": {
		"_version": "1.2.0",
		"id": "sap.ui.demo.masterdetail",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",

		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/here/goes/your/serviceUrl/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri" : "localService/metadata.xml"
				}
			}
		}
	},
...

	"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "sap.ui.demo.masterdetail.view.App",
			"type": "XML",
			"id": "app"
		},
...

		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.ui.demo.masterdetail.i18n.i18n"
				}
			},
			"" : {
				"dataSource": "mainService",
				"settings": {
					"metadataUrlParams": {
						"sap-documentation": "heading"
					}
				}
			}
		},

		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "sap.ui.demo.masterdetail.view",
				"controlId": "idAppControl",
				"controlAggregation": "detailPages",
				"bypassed": {
					"target": ["master", "notFound"]
				},
				"async": "true"
			},

			"routes": [
				{
					"pattern": "",
					"name": "master",
					"target": ["object", "master"]
				},
				{
					"pattern": "Objects/{objectId}",
					"name": "object",
					"target": ["master", "object"]
				}
			],

			"targets": {
				"master": {
					"viewName": "Master",
					"viewLevel": 1,
					"viewId": "master",
					"controlAggregation": "masterPages"
				},
				"object": {
					"viewName": "Detail",
					"viewId": "detail",
					"viewLevel": 2
				},
				"detailObjectNotFound": {
					"viewName": "DetailObjectNotFound",
					"viewId": "detailObjectNotFound"
				},
				"detailNoObjectsAvailable": {
					"viewName": "DetailNoObjectsAvailable",
					"viewId": "detailNoObjectsAvailable"
				},
				"notFound": {
					"viewName": "NotFound",
					"viewId": "notFound"
				}
			}
		}
	}
}

SAPUI5 Components

SAPUI5 Components are defined by the following code. What is important is the top part of the file where we can find "sap.ui.define", "'sap/ui/core/UIComponent'", and "return UIComponent.extend("sap.ui.demo.cart.Component"".

  • The component name is found in the first parameter of the "extend" call.
  • With regard to the main component associated to the application, we use the "metadata" part to find views and root.
  • If the metadata part is not present here, it can be present in the "manifest.json" file representing the application.
  • A call link is created from the application to the "init" function of the main component.
  • A call link is created from the "init" function of a component to the "createContent" function of the same component.
 Click here to view the code example...
sap.ui.define([
	'sap/ui/core/UIComponent',
	'sap/m/routing/Router',
	'sap/ui/model/resource/ResourceModel',
	'sap/ui/model/odata/ODataModel',
	'sap/ui/model/json/JSONModel'
], function (UIComponent,
			Router,
			ResourceModel,
			ODataModel,
			JSONModel) {

	return UIComponent.extend("sap.ui.demo.cart.Component", {

		metadata: {
			includes : ["css/style.css"],
			routing: {
				config: {
					routerClass: Router,
					viewType: "XML",
					viewPath: "sap.ui.demo.cart.view",
					controlId: "splitApp",
					transition: "slide",
					bypassed: {
						target: ["home" , "notFound"]
					}
				},
				routes: [
					{
						pattern: "category/{id}",
						name: "category",
						target: "categoryView"
					},
					{
						pattern: "category/{id}/product/{productId}",
						name: "product",
						target: ["categoryView", "productView"]
					}
				],
				targets: {
					productView: {
						viewName: "Product",
						viewLevel: 3,
						controlAggregation: "detailPages"
					},
					categoryView: {
						viewName: "Category",
						viewLevel: 2,
						controlAggregation: "masterPages"
					}
				}
			}
		},

		init: function () {
			// call overwritten init (calls createContent)
		},

		createContent: function () {
			// create root view
			return sap.ui.view({
				viewName: "sap.ui.demo.cart.view.App",
				type: "XML"
			});
		},
....
	});

});

SAPUI5 XML view

SAPUI5 XML files are found in XML files whose name ends with ".view.xml" where we can find the following code.

  • For XML view detection, we use "mvc:View" where mvc is defined as "sap.ui.core.mvc" or "sap.ui.core" or "sap.m".
  • The value of "controllerName" is also used to find the used controller.
  • A use link is created from the view to the used controller
  • A call link is created from the view to the "onInit" model function of the used controller
  • Some call links are created from the view to the various model functions of the controller when they are called from the view (in the example below "handleCartButtonPress" and "handleAddButtonPress" are called)
 Click here to view the code example...
<mvc:View
	controllerName="sap.ui.demo.cart.view.Product"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:control="control"
	xmlns:h="http://www.w3.org/1999/xhtml">
	<Page
		id="page"
		title="{Name}"
		showNavButton="{device>/isPhone}"
		navButtonPress="handleNavButtonPress" >
		<headerContent>
			<Button
				icon="sap-icon://cart"
				visible="{device>/isPhone}"
				tooltip="{i18n>TO_CART_BUTTON_TOOLTIP}"
				press="handleCartButtonPress" />
		</headerContent>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button
					icon="sap-icon://add"
					text="{i18n>PRODUCT_ADD_BUTTON_TEXT}"
					tooltip="{i18n>PRODUCT_ADD_BUTTON_TOOLTIP}"
					press="handleAddButtonPress" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>

SAPUI5 JS Views

JS Views are .js files whose name ends with ".view.js". For example:

 Click here to view the code example...
sap.ui.jsview("shoppingcart.Category", {
 
    /** Specifies the Controller belonging to this View.
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf shoppingcart.Category
    */
    getControllerName : function() {
        return "shoppingcart.Category";
    },
 
    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
    * Since the Controller is given to this method, its event handlers can be attached right away.
    * @memberOf shoppingcart.Category
    */
    createContent : function(oController) {
         
        var oList = new sap.m.List({
            id: "listId"
        })
         
        oList.bindItems({
            path : "products>/collection",
            template : new sap.m.StandardListItem({
                title: "{products>category}",
                type: sap.m.ListType.Navigation,
                press:function(evt){
                    oController.categoryListItemPress(evt);
                }
            })
        });
         
        return new sap.m.Page({
            title: "Category",
            content: [oList]
        });
    }
 
});

SAPUI5 Controllers

SAPUI5 Controllers are defined by the following code. What is important is the top part of the file where we can find "sap.ui.define", "'sap/ui/core/mvc/Controller'", and "return Controller.extend("sap.ui.demo.cart.view.Product"":

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/demo/cart/model/formatter',
	'sap/m/MessageToast',
	'sap/m/MessageBox'
], function (Controller, formatter, MessageToast, MessageBox) {
	return Controller.extend("sap.ui.demo.cart.view.Product", {
		formatter : formatter,

		onInit : function () {
			var oComponent = this.getOwnerComponent();

			this._router = oComponent.getRouter();
			this._router.getRoute("product").attachPatternMatched(this._routePatternMatched, this);
			this._router.getRoute("cartProduct").attachPatternMatched(this._routePatternMatched, this);

			// register for events
			var oBus = sap.ui.getCore().getEventBus();
			oBus.subscribe("shoppingCart", "updateProduct", this.fnUpdateProduct, this);
		},

		handleAddButtonPress : function () {
		}
	});
});

SAPUI5 Model functions

SAPUI5 Model functions are controller functions which can be called from a view. They are defined in the same code as used for the Controller above. For example, "handleAddButtonPress" is a model function.

SAPUI5 XML fragments

SAPUI5 XML fragments are parts of views. They are found in XML files whose name ends with ".fragment.xml" where we can find the code example below:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:commons="sap.ui.commons">
	<Carousel>
		<pages>
			<f:SimpleForm title="Server" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
			<f:SimpleForm title="Kitchen" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
			<f:SimpleForm title="Bedroom" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
		</pages>
	</Carousel>
</core:FragmentDefinition>

The item "core:FragmentDefinition" is used to the detect the XML fragment, where core is defined as "sap.ui.core.mvc" or "sap.ui.core" or "sap.m".

When the following code is found in a controller, this means that the fragment "smartHome.view.Chart" is added to the view of the controller in the id "idChartPage" of the view.

oChartPage = this.getView().byId("idChartPage");
oChartContent = sap.ui.xmlfragment(this.getView().getId(), "smartHome.view.Chart", this);
oChartPage.addContent(oChartContent);

Call links from the view to the fragments (when preceding js code is found in controller) are created:

Click to enlarge

Fragments can also be defined with some ids inside:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<BusyDialog id="idServerBusyDialog" class="sapUiSizeCompact" title="{i18n>serverBusyDialogWindowTitle}" text="{i18n>serverBusyDialogWindowText}" showCancelButton="true"
		cancelButtonText="{i18n>serverBusyDialogWindowCancelButtonText}" close="onServerBusyDialogWindowClosed"/>
</core:FragmentDefinition>

When the following code is found in a controller:

oServerBusyDialog = this.getView().byId("idServerBusyDialog").open();
oServerBusyDialog = sap.ui.xmlfragment(this.getView().getId(), "smartHome.view.ServerBusyDialog", this);
this.getView().addDependent(oServerBusyDialog);

This means that the part of the fragment  "smartHome.view.ServerBusyDialog" referenced by id "idChartPage" is opened by the controller (as a modal window) and added to the view.

  • A call link from the view to the fragment is created
  • A call link from the controller function where this code is called to the fragment is created

SAPUI5 JSON Models

SAPUI5 JSON Models are end-points for transactions. They occur where data is accessed in read or write mode. They are defined when the following code is found in controllers or components. The model name is here "cartProducts":

			var oCartModel = new JSONModel({
				entries: [],
				totalPrice: "0",
				showEditAndProceedButton: false
			});
			this.setModel(oCartModel, "cartProducts");
  • An access read link is created from the code to the model when the following code is present:
var oCartModel = this.getView().getModel("cartProducts");
var oCartData = oCartModel.getData();
  • An access write link is created from the code to the model when the following code is present:

SAPUI5 OData models

SAPUI5 OData models are end-points for transactions. They occur where data is accessed in read or write mode. They are defined when the following code is found in controllers or components. The model name is here "/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/".

var oModel = new ODataModel("/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/", true);
oModel.setDefaultCountMode("None");

this.setModel(oModel);

Http resource services

SAP has developed its own functions in order to call ABAP functions through services. The following statements are supported:

Http Delete resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
oModel.remove("myUrl(PARAM=...)", {
	success: ...,
	error: ...
	});

Http Post resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
oModel.create("myUrl", c, null, function(oData, response) {
	});

Http Put resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
oModel.udate("myUrl", ...);

Http Get resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl?...):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModelData = new sap.ui.model.odata.ODataModel(url, true);
var relPath = "myUrl?...";
oModelData.read(relPath, null, [], false, function(oData, response) {
	});

SAPUI5 ABAP operations

SAP has developed services in ABAP so ABAP methods can be called from javascript client side. The following statements are supported:

service is identified as a parameter in "set_schema_namespace" method called in the "DEFINE" method of the class inheriting from "/IWBEP/CL_MGW_PUSH_ABS_MODEL".

This service name is the prefix of all urls of methods of a same class.

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC .
  method DEFINE.
*&---------------------------------------------------------------------*
*&           Generated code for the MODEL PROVIDER BASE CLASS         &*
*&                                                                     &*
*&  !!!NEVER MODIFY THIS CLASS. IN CASE YOU WANT TO CHANGE THE MODEL  &*
*&        DO THIS IN THE MODEL PROVIDER SUBCLASS!!!                   &*
*&                                                                     &*
*&---------------------------------------------------------------------*
super->define( ).

model->set_schema_namespace( 'YMYSERVICE_EFORM_SRV' ).

SAPUI5 Delete operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~DELETE_ENTITY.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_delete_entity(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~delete_entity(...).
 ENDCASE.
endmethod.


SAPUI5 Post operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_ENTITY.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_create_entity(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~create_entity(...).
 ENDCASE.
endmethod.


SAPUI5 Put operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~UPDATE_ENTITY.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_update_entity(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~update_entity(...).
 ENDCASE.
endmethod.


SAPUI5 Get operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITYSET.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_get_entityset(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~get_entityset(...).
 ENDCASE.
endmethod.


Here is a snapshot showing a full transaction from a SAPUI5 XML view to a SAP table with a link between client and ABAP server (Http request service and SAPUI5 ABAP operation):

SAPUI5 CDS View operation (named /ZCDSAN_PROJ_LIST)

Such an operation is created for one CDS view with annotation

@OData.publish: true

At the end of analysis, operations witch are not called from a http request service are deleted.


JQuery resources services

SAP has developed its own functions using the JQuery framework in order to call web servers. These calls are managed by the JQuery extension. The following statements are supported:

jQuery.sap.sjax({
 url: "http://localhost/qmacro/test",
 dataType: "json"
 });


jQuery.sap.syncGet("syncGet_url", { dataType: "json" });


jQuery.sap.syncGetJSON("syncGetJSON_url", { dataType: "json" });


jQuery.sap.syncGetText("syncGetText_url", { dataType: "json" });


jQuery.sap.syncPost("syncPost_url", { dataType: "json" });

sap.ui.core.routing.Router.navTo() support


this.router.navTo("SearchDeliveries");

An access link is created from the javascript function to the SAPUI5 view corresponding to the first parameter.

The manifest.json file found at the application root, describing the SAPUI5 application is used to make the connection between the parameter and the view (routes section):

{
	"sap.ui5": {
		"rootView": {
			"viewName": "main.app.TrackingApp.view.TrackingApp",
			"type": "XML"
		},
		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"async": true,
				"viewPath": "main.app.TrackingApp.view",
				"controlAggregation": "pages",
				"controlId": "idAppControl",
				"clearControlAggregation": false
			},
			"routes": [
				{
					"name": "SearchDeliveries",
					"pattern": "SearchDeliveries",
					"target": [
						"SearchDeliveries"
					]
				},
            ]
        }
    }
}


Supported SAPUI5 versions

VersionSupported
1.28 and above(tick)
1.26(error)
1.24(error)
1.22(error)
1.20(error)

Function Point, Quality and Sizing support

This extension provides the following support:

  • Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
  • Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist
Function Points
(transactions)
Quality and Sizing
(tick)(error)

AIP Core compatibility

This extension is compatible with:

AIP Core release
Supported
8.3.x(tick)

Supported DBMS servers

DBMS

Supported?

CSS / PostgreSQL(tick)

Prerequisites

(tick)An installation of any compatible release of AIP Core (see table above)

Dependencies with other extensions

Some CAST extensions require the presence of other CAST extensions in order to function correctly. The SAPUI5 extension requires that the following other CAST extensions are also installed:

Note that when using the CAST Extension Downloader to download the extension and the Manage Extensions interface in CAST Server Manager to install the extension, any dependent extensions are automatically downloaded and installed for you. You do not need to do anything.

Download and installation instructions

The extension will be automatically downloaded and installed in AIP Console when you deliver SAPUI5 source code. You can also manually install the extension using the Application - Extensions interface. When installed, follow the instructions below to run a new analysis/snapshot to generate new results:

Packaging, delivering and analyzing your source code

Once the extension is installed, no further configuration changes are required before you can package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is as follows:

Packaging and delivery

Note that the SAPUI5 extension does not contain any discoverers or extractors, therefore, no "SAPUI5" projects will be detected. However, the Web Files Discoverer extension will be automatically installed (it is a "shipped" extension which means it is delivered with AIP Core) and will automatically detect projects as HTML5 if specific files are delivered, therefore ensuring that Analysis Units are created for your source code.

Using AIP Console

Using CAST Management Studio

 Click here to expand...
  • create a new Version
  • create a new Package for your SAPUI5 source code using the Files on your file system option:

Click to enlarge

  • Define the root folder of your Application source code:

Click to enlarge

  • Before delivering the source code, check the packaging results:
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will not find any "projects" related to the SAPUI5 application source code - this is the expected behaviour. However, if your ReactJS related source code is part of a larger application (for example a JEE application), then other projects may be found during the package action (click to enlarge):

With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will automatically detect "HTML5 file projects" (see Web Files Discoverer for more technical information about how the discoverer works) related to the SAPUI5 application source code. In addition, if your SAPUI5 related source code is part of a larger application (for example a JEE application), then other projects may also be found during the package action (click to enlarge):

  • Deliver the Version

Analyzing

Using AIP Console

AIP Console exposes the technology configuration options once a version has been accepted/imported, or an analysis has been run. Click Universal Technology (3) in the Config (1) > Analysis (2) tab to display the available options for your SAPUI5 source code:

Then choose the relevant Analysis Unit (1) to view the configuration:

Using the CAST Management Studio

 Click here to expand...
  • Accept and deploy the Version in the CAST Management Studio.
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • No Analysis Units will be created automatically relating to the ReactJS source code - this is the expected behaviour. However, if your SAPUI5 related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

  • In the Current Version tab, add a new Analysis Unit specifically for your SAPUI5 source code, selecting the Add new Universal Analysis Unit option:

  • Edit the new Analysis Unit and configure in the Source Settings tab:
    • a name for the Analysis Unit
    • ensure you tick the HTML5/JavaScript option (the SAPUI5 extension depends on the HTML5 and JavaScript extension - and therefore the Universal Analyzer language for the AngularJS extension is set as HTML5/JavaScript)
    • define the location of the deployed SAPUI5 source code (the CAST Management Studio will locate this automatically in the Deployment folder):

  • Run a test analysis on the Analysis Unit before you generate a new snapshot.
With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • "HTML5" Analysis Units will be created automatically (see Web Files Discoverer for more technical information about how the discoverer works) related to the ReactJS application source code. In addition, if your ReactJS related source code is part of a larger application (for example a JEE application), then other Analysis Units may also be created:

  • There is nothing further to do, you can now run a test analysis on the Analysis Unit before you generate a new snapshot.

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten):

Click to enlarge


Objects

The following objects are displayed in CAST Enlighten:

IconDescription

SAPUI5 Application
SAPUI5 Component
SAPUI5 Controller
SAPUI5 OData Model
SAPUI5 HTML View
SAPUI5 JS View

SAPUI5 JSON Model
SAPUI5 JSON View
SAPUI5 Model Function
SAPUI5 Object

SAPUI5 XML Fragment

SAPUI5 XML View

SAPUI5 ABAP Get Operation

SAPUI5 ABAP Post Operation

SAPUI5 ABAP Put Operation

SAPUI5 ABAP Delete Operation

SAPUI5 CDS View Operation

Structural Rules

The following structural rules are provided:

Summary: This document provides basic information about the extension providing SAPUI5 support for Web applications.

Extension ID

com.castsoftware.sapui5

What's new?

See SAPUI5 - 1.1 - Release Notes for more information.

Description

This extension provides support for SAPUI5, the SAP JavaScript UI library.

Note that the extension supports SAP Fiori applications using the SAPUI5 framework for front-end development.

  • SAP Fiori is a new user experience for SAP software. To overcome the complexity of traditional SAP GUIs, SAP Fiori has been developed.
  • SAP Fiori focuses mainly on mobility and uses the SAPUI5 Framework for front-end development.

In what situation should you install this extension?

The main purpose of this extension is to modelize the front-end part (SAPUI5 source code) of your SAP Application and to identify links between HTTP request services and ABAP operations /JavaScript functions, to enable linking from the Web App front-end right through to the back-end. Therefore if your SAP application contains SAPUI5  source code and you want to view these object types and their links with other objects, then you should install this extension.

Object structure

  • creates SAPUI5 Applications
  • creates SAPUI5 Views (XML and JS Views Only)
  • creates SAPUI5 Fragments
  • creates SAPUI5 Controllers
  • creates SAPUI5 Model Functions (controller functions accessible from views)
  • creates SAPUI5 Components
  • creates SAPUI5 OData Models
  • creates SAPUI5 JSON Models
  • creates SAPUI5 Objects (SAPUI5 objects except controllers, components and models)
  • creates HTML5 Get/Post/Put/delete http requests services
  • creates SAPUI5 ABAP Get/Post/Put/delete operations
  • creates SAPUI5 ABAP CDS View operations

Link structure

  • Creates links from views to controllers
  • Creates links between controllers and components
  • Creates links between javascript functions and Http request services
  • Creates links between ABAP operations and ABAP functions
  • Creates links between Http request services and ABAP operations (through web service linker)

Transactions

  • Default entry point is the html file content.
  • Applications and views are Transaction entry-points.
  • SAPUI5 ABAP operations are entry-points when they are not called by another object.
  • JSON Models are Transaction end-points.
  • Http request services are end-points when they do not call another object.

Technical information

SAPUI5 Applications

SAPUI5 Applications can be defined in two ways:

HTML files

They can be found in an html file (mostly index.html) files where we can find the following code:

	<title>Shopping Cart</title>

	<script
		id='sap-ui-bootstrap'
		type='text/javascript'
		src='../../../../../resources/sap-ui-core.js'
		data-sap-ui-theme='sap_bluecrystal'
		data-sap-ui-libs='sap.m'
		data-sap-ui-compatVersion="edge"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.cart" : "./"
		}' >
	</script>
  • This code contains "sap-ui-bootstrap", and "Shopping Cart" is the application name.
  • The value of "data-sap-ui-resourceroots" is also used to create fullnames of objects.
  • The "Component.js" file present at the same place as "index.html" is the main component associated to the application.

manifest.json

They can be found in a manifest.json file where we can find the following code:

  • The code contains "sap.app", and the application name is found in the title parameter - note that if the title starts with "{{", then the application name is founc in id (in the example below, the name is "masterdetail".
  • The "Component.js" file present at the same place as "manifest.json" is the main component associated to the application.
  • The metadata part can be used if not present in the component code (see later in the component description).
 Click here to view the code example...
{
	"_version": "1.2.0",

	"sap.app": {
		"_version": "1.2.0",
		"id": "sap.ui.demo.masterdetail",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",

		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"mainService": {
				"uri": "/here/goes/your/serviceUrl/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri" : "localService/metadata.xml"
				}
			}
		}
	},
...

	"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "sap.ui.demo.masterdetail.view.App",
			"type": "XML",
			"id": "app"
		},
...

		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.ui.demo.masterdetail.i18n.i18n"
				}
			},
			"" : {
				"dataSource": "mainService",
				"settings": {
					"metadataUrlParams": {
						"sap-documentation": "heading"
					}
				}
			}
		},

		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "sap.ui.demo.masterdetail.view",
				"controlId": "idAppControl",
				"controlAggregation": "detailPages",
				"bypassed": {
					"target": ["master", "notFound"]
				},
				"async": "true"
			},

			"routes": [
				{
					"pattern": "",
					"name": "master",
					"target": ["object", "master"]
				},
				{
					"pattern": "Objects/{objectId}",
					"name": "object",
					"target": ["master", "object"]
				}
			],

			"targets": {
				"master": {
					"viewName": "Master",
					"viewLevel": 1,
					"viewId": "master",
					"controlAggregation": "masterPages"
				},
				"object": {
					"viewName": "Detail",
					"viewId": "detail",
					"viewLevel": 2
				},
				"detailObjectNotFound": {
					"viewName": "DetailObjectNotFound",
					"viewId": "detailObjectNotFound"
				},
				"detailNoObjectsAvailable": {
					"viewName": "DetailNoObjectsAvailable",
					"viewId": "detailNoObjectsAvailable"
				},
				"notFound": {
					"viewName": "NotFound",
					"viewId": "notFound"
				}
			}
		}
	}
}

SAPUI5 Components

SAPUI5 Components are defined by the following code. What is important is the top part of the file where we can find "sap.ui.define", "'sap/ui/core/UIComponent'", and "return UIComponent.extend("sap.ui.demo.cart.Component"".

  • The component name is found in the first parameter of the "extend" call.
  • With regard to the main component associated to the application, we use the "metadata" part to find views and root.
  • If the metadata part is not present here, it can be present in the "manifest.json" file representing the application.
  • A call link is created from the application to the "init" function of the main component.
  • A call link is created from the "init" function of a component to the "createContent" function of the same component.
 Click here to view the code example...
sap.ui.define([
	'sap/ui/core/UIComponent',
	'sap/m/routing/Router',
	'sap/ui/model/resource/ResourceModel',
	'sap/ui/model/odata/ODataModel',
	'sap/ui/model/json/JSONModel'
], function (UIComponent,
			Router,
			ResourceModel,
			ODataModel,
			JSONModel) {

	return UIComponent.extend("sap.ui.demo.cart.Component", {

		metadata: {
			includes : ["css/style.css"],
			routing: {
				config: {
					routerClass: Router,
					viewType: "XML",
					viewPath: "sap.ui.demo.cart.view",
					controlId: "splitApp",
					transition: "slide",
					bypassed: {
						target: ["home" , "notFound"]
					}
				},
				routes: [
					{
						pattern: "category/{id}",
						name: "category",
						target: "categoryView"
					},
					{
						pattern: "category/{id}/product/{productId}",
						name: "product",
						target: ["categoryView", "productView"]
					}
				],
				targets: {
					productView: {
						viewName: "Product",
						viewLevel: 3,
						controlAggregation: "detailPages"
					},
					categoryView: {
						viewName: "Category",
						viewLevel: 2,
						controlAggregation: "masterPages"
					}
				}
			}
		},

		init: function () {
			// call overwritten init (calls createContent)
		},

		createContent: function () {
			// create root view
			return sap.ui.view({
				viewName: "sap.ui.demo.cart.view.App",
				type: "XML"
			});
		},
....
	});

});

SAPUI5 XML view

SAPUI5 XML files are found in XML files whose name ends with ".view.xml" where we can find the following code.

  • For XML view detection, we use "mvc:View" where mvc is defined as "sap.ui.core.mvc" or "sap.ui.core" or "sap.m".
  • The value of "controllerName" is also used to find the used controller.
  • A use link is created from the view to the used controller
  • A call link is created from the view to the "onInit" model function of the used controller
  • Some call links are created from the view to the various model functions of the controller when they are called from the view (in the example below "handleCartButtonPress" and "handleAddButtonPress" are called)
 Click here to view the code example...
<mvc:View
	controllerName="sap.ui.demo.cart.view.Product"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:control="control"
	xmlns:h="http://www.w3.org/1999/xhtml">
	<Page
		id="page"
		title="{Name}"
		showNavButton="{device>/isPhone}"
		navButtonPress="handleNavButtonPress" >
		<headerContent>
			<Button
				icon="sap-icon://cart"
				visible="{device>/isPhone}"
				tooltip="{i18n>TO_CART_BUTTON_TOOLTIP}"
				press="handleCartButtonPress" />
		</headerContent>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button
					icon="sap-icon://add"
					text="{i18n>PRODUCT_ADD_BUTTON_TEXT}"
					tooltip="{i18n>PRODUCT_ADD_BUTTON_TOOLTIP}"
					press="handleAddButtonPress" />
			</Toolbar>
		</footer>
	</Page>
</mvc:View>

SAPUI5 JS Views

JS Views are .js files whose name ends with ".view.js". For example:

 Click here to view the code example...
sap.ui.jsview("shoppingcart.Category", {
 
    /** Specifies the Controller belonging to this View.
    * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
    * @memberOf shoppingcart.Category
    */
    getControllerName : function() {
        return "shoppingcart.Category";
    },
 
    /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
    * Since the Controller is given to this method, its event handlers can be attached right away.
    * @memberOf shoppingcart.Category
    */
    createContent : function(oController) {
         
        var oList = new sap.m.List({
            id: "listId"
        })
         
        oList.bindItems({
            path : "products>/collection",
            template : new sap.m.StandardListItem({
                title: "{products>category}",
                type: sap.m.ListType.Navigation,
                press:function(evt){
                    oController.categoryListItemPress(evt);
                }
            })
        });
         
        return new sap.m.Page({
            title: "Category",
            content: [oList]
        });
    }
 
});

SAPUI5 Controllers

SAPUI5 Controllers are defined by the following code. What is important is the top part of the file where we can find "sap.ui.define", "'sap/ui/core/mvc/Controller'", and "return Controller.extend("sap.ui.demo.cart.view.Product"":

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/demo/cart/model/formatter',
	'sap/m/MessageToast',
	'sap/m/MessageBox'
], function (Controller, formatter, MessageToast, MessageBox) {
	return Controller.extend("sap.ui.demo.cart.view.Product", {
		formatter : formatter,

		onInit : function () {
			var oComponent = this.getOwnerComponent();

			this._router = oComponent.getRouter();
			this._router.getRoute("product").attachPatternMatched(this._routePatternMatched, this);
			this._router.getRoute("cartProduct").attachPatternMatched(this._routePatternMatched, this);

			// register for events
			var oBus = sap.ui.getCore().getEventBus();
			oBus.subscribe("shoppingCart", "updateProduct", this.fnUpdateProduct, this);
		},

		handleAddButtonPress : function () {
		}
	});
});

SAPUI5 Model functions

SAPUI5 Model functions are controller functions which can be called from a view. They are defined in the same code as used for the Controller above. For example, "handleAddButtonPress" is a model function.

SAPUI5 XML fragments

SAPUI5 XML fragments are parts of views. They are found in XML files whose name ends with ".fragment.xml" where we can find the code example below:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns:commons="sap.ui.commons">
	<Carousel>
		<pages>
			<f:SimpleForm title="Server" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
			<f:SimpleForm title="Kitchen" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
			<f:SimpleForm title="Bedroom" editable="false" class="sapUiSmallMarginTopBottom">
				<f:content></f:content>
			</f:SimpleForm>
		</pages>
	</Carousel>
</core:FragmentDefinition>

The item "core:FragmentDefinition" is used to the detect the XML fragment, where core is defined as "sap.ui.core.mvc" or "sap.ui.core" or "sap.m".

When the following code is found in a controller, this means that the fragment "smartHome.view.Chart" is added to the view of the controller in the id "idChartPage" of the view.

oChartPage = this.getView().byId("idChartPage");
oChartContent = sap.ui.xmlfragment(this.getView().getId(), "smartHome.view.Chart", this);
oChartPage.addContent(oChartContent);

Call links from the view to the fragments (when preceding js code is found in controller) are created:

Click to enlarge

Fragments can also be defined with some ids inside:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<BusyDialog id="idServerBusyDialog" class="sapUiSizeCompact" title="{i18n>serverBusyDialogWindowTitle}" text="{i18n>serverBusyDialogWindowText}" showCancelButton="true"
		cancelButtonText="{i18n>serverBusyDialogWindowCancelButtonText}" close="onServerBusyDialogWindowClosed"/>
</core:FragmentDefinition>

When the following code is found in a controller:

oServerBusyDialog = this.getView().byId("idServerBusyDialog").open();
oServerBusyDialog = sap.ui.xmlfragment(this.getView().getId(), "smartHome.view.ServerBusyDialog", this);
this.getView().addDependent(oServerBusyDialog);

This means that the part of the fragment  "smartHome.view.ServerBusyDialog" referenced by id "idChartPage" is opened by the controller (as a modal window) and added to the view.

  • A call link from the view to the fragment is created
  • A call link from the controller function where this code is called to the fragment is created

SAPUI5 JSON Models

SAPUI5 JSON Models are end-points for transactions. They occur where data is accessed in read or write mode. They are defined when the following code is found in controllers or components. The model name is here "cartProducts":

			var oCartModel = new JSONModel({
				entries: [],
				totalPrice: "0",
				showEditAndProceedButton: false
			});
			this.setModel(oCartModel, "cartProducts");
  • An access read link is created from the code to the model when the following code is present:
var oCartModel = this.getView().getModel("cartProducts");
var oCartData = oCartModel.getData();
  • An access write link is created from the code to the model when the following code is present:

SAPUI5 OData models

SAPUI5 OData models are end-points for transactions. They occur where data is accessed in read or write mode. They are defined when the following code is found in controllers or components. The model name is here "/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/".

var oModel = new ODataModel("/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/", true);
oModel.setDefaultCountMode("None");

this.setModel(oModel);

Http resource services

SAP has developed its own functions in order to call ABAP functions through services. The following statements are supported:

Http Delete resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
oModel.remove("myUrl(PARAM=...)", {
	success: ...,
	error: ...
	});

Http Post resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
oModel.create("myUrl", c, null, function(oData, response) {
	});

Http Put resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
oModel.udate("myUrl", ...);

Http Get resource service (uri =sap/opu/odata/sap/YMYSERVICE_EFORM_SRV/myUrl?...):

var url = "/sap/opu/odata/sap/YMYSERVICE_EFORM_SRV";
var oModelData = new sap.ui.model.odata.ODataModel(url, true);
var relPath = "myUrl?...";
oModelData.read(relPath, null, [], false, function(oData, response) {
	});

SAPUI5 ABAP operations

SAP has developed services in ABAP so ABAP methods can be called from javascript client side. The following statements are supported:

service is identified as a parameter in "set_schema_namespace" method called in the "DEFINE" method of the class inheriting from "/IWBEP/CL_MGW_PUSH_ABS_MODEL".

This service name is the prefix of all urls of methods of a same class.

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC .
  method DEFINE.
*&---------------------------------------------------------------------*
*&           Generated code for the MODEL PROVIDER BASE CLASS         &*
*&                                                                     &*
*&  !!!NEVER MODIFY THIS CLASS. IN CASE YOU WANT TO CHANGE THE MODEL  &*
*&        DO THIS IN THE MODEL PROVIDER SUBCLASS!!!                   &*
*&                                                                     &*
*&---------------------------------------------------------------------*
super->define( ).

model->set_schema_namespace( 'YMYSERVICE_EFORM_SRV' ).

SAPUI5 Delete operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~DELETE_ENTITY.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_delete_entity(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~delete_entity(...).
 ENDCASE.
endmethod.


SAPUI5 Post operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_ENTITY.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_create_entity(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~create_entity(...).
 ENDCASE.
endmethod.


SAPUI5 Put operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~UPDATE_ENTITY.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_update_entity(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~update_entity(...).
 ENDCASE.
endmethod.


SAPUI5 Get operation (named /YMYSERVICE_EFORM_SRV/myUrl)

CLASSPOOL_NAME YCL_MY_CLASSPOOL_MPC_EXT .
  
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_ENTITYSET.


 DATA lv_entityset_name TYPE string.
lv_entityset_name = io_tech_request_context->get_entity_set_name( ).

CASE lv_entityset_name.


   when 'myUrl'.
*     Call the entity set generated method
     myurl_get_entityset(...).
...
   when others.
     super->/iwbep/if_mgw_appl_srv_runtime~get_entityset(...).
 ENDCASE.
endmethod.


Here is a snapshot showing a full transaction from a SAPUI5 XML view to a SAP table with a link between client and ABAP server (Http request service and SAPUI5 ABAP operation):

SAPUI5 CDS View operation (named /ZCDSAN_PROJ_LIST)

Such an operation is created for one CDS view with annotation

@OData.publish: true

At the end of analysis, operations witch are not called from a http request service are deleted.


JQuery resources services

SAP has developed its own functions using the JQuery framework in order to call web servers. These calls are managed by the JQuery extension. The following statements are supported:

jQuery.sap.sjax({
 url: "http://localhost/qmacro/test",
 dataType: "json"
 });


jQuery.sap.syncGet("syncGet_url", { dataType: "json" });


jQuery.sap.syncGetJSON("syncGetJSON_url", { dataType: "json" });


jQuery.sap.syncGetText("syncGetText_url", { dataType: "json" });


jQuery.sap.syncPost("syncPost_url", { dataType: "json" });

Miscellaneous links

sap.ui.core.routing.Router.navTo() support


this.router.navTo("SearchDeliveries");

An access link is created from the javascript function to the SAPUI5 view corresponding to the first parameter.

The manifest.json file found at the application root, describing the SAPUI5 application is used to make the connection between the parameter and the view (routes section):

{
	"sap.ui5": {
		"rootView": {
			"viewName": "main.app.TrackingApp.view.TrackingApp",
			"type": "XML"
		},
		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"async": true,
				"viewPath": "main.app.TrackingApp.view",
				"controlAggregation": "pages",
				"controlId": "idAppControl",
				"clearControlAggregation": false
			},
			"routes": [
				{
					"name": "SearchDeliveries",
					"pattern": "SearchDeliveries",
					"target": [
						"SearchDeliveries"
					]
				},
            ]
        }
    }
}


Supported SAPUI5 versions

VersionSupported
1.28 and above(tick)
1.26(error)
1.24(error)
1.22(error)
1.20(error)

Function Point, Quality and Sizing support

This extension provides the following support:

  • Function Points (transactions): a green tick indicates that OMG Function Point counting and Transaction Risk Index are supported
  • Quality and Sizing: a green tick indicates that CAST can measure size and that a minimum set of Quality Rules exist
Function Points
(transactions)
Quality and Sizing
(tick)(error)

AIP Core compatibility

This extension is compatible with:

AIP Core release
Supported
8.3.x(tick)

Supported DBMS servers

DBMS

Supported?

CSS / PostgreSQL(tick)

Prerequisites

(tick)An installation of any compatible release of AIP Core (see table above)

Dependencies with other extensions

Some CAST extensions require the presence of other CAST extensions in order to function correctly. The SAPUI5 extension requires that the following other CAST extensions are also installed:

Note that when using the CAST Extension Downloader to download the extension and the Manage Extensions interface in CAST Server Manager to install the extension, any dependent extensions are automatically downloaded and installed for you. You do not need to do anything.

Download and installation instructions

The extension will be automatically downloaded and installed in AIP Console when you deliver SAPUI5 source code. You can also manually install the extension using the Application - Extensions interface. When installed, follow the instructions below to run a new analysis/snapshot to generate new results:

Packaging, delivering and analyzing your source code

Once the extension is installed, no further configuration changes are required before you can package your source code and run an analysis. The process of packaging, delivering and analyzing your source code is as follows:

Packaging and delivery

Note that the SAPUI5 extension does not contain any discoverers or extractors, therefore, no "SAPUI5" projects will be detected. However, the Web Files Discoverer extension will be automatically installed (it is a "shipped" extension which means it is delivered with AIP Core) and will automatically detect projects as HTML5 if specific files are delivered, therefore ensuring that Analysis Units are created for your source code.

Using AIP Console

Using CAST Management Studio

 Click here to expand...
  • create a new Version
  • create a new Package for your SAPUI5 source code using the Files on your file system option:

Click to enlarge

  • Define the root folder of your Application source code:

Click to enlarge

  • Before delivering the source code, check the packaging results:
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will not find any "projects" related to the SAPUI5 application source code - this is the expected behaviour. However, if your ReactJS related source code is part of a larger application (for example a JEE application), then other projects may be found during the package action (click to enlarge):

With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • the CAST Delivery Manager Tool will automatically detect "HTML5 file projects" (see Web Files Discoverer for more technical information about how the discoverer works) related to the SAPUI5 application source code. In addition, if your SAPUI5 related source code is part of a larger application (for example a JEE application), then other projects may also be found during the package action (click to enlarge):

  • Deliver the Version

Analyzing

Using AIP Console

AIP Console exposes the technology configuration options once a version has been accepted/imported, or an analysis has been run. Click Universal Technology (3) in the Config (1) > Analysis (2) tab to display the available options for your SAPUI5 source code:

Then choose the relevant Analysis Unit (1) to view the configuration:

Using the CAST Management Studio

 Click here to expand...
  • Accept and deploy the Version in the CAST Management Studio.
Without the Web Files Discover

If you are not using the Web Files Discoverer, the following will occur:

  • No Analysis Units will be created automatically relating to the ReactJS source code - this is the expected behaviour. However, if your SAPUI5 related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

  • In the Current Version tab, add a new Analysis Unit specifically for your SAPUI5 source code, selecting the Add new Universal Analysis Unit option:

  • Edit the new Analysis Unit and configure in the Source Settings tab:
    • a name for the Analysis Unit
    • ensure you tick the HTML5/JavaScript option (the SAPUI5 extension depends on the HTML5 and JavaScript extension - and therefore the Universal Analyzer language for the AngularJS extension is set as HTML5/JavaScript)
    • define the location of the deployed SAPUI5 source code (the CAST Management Studio will locate this automatically in the Deployment folder):

  • Run a test analysis on the Analysis Unit before you generate a new snapshot.
With the Web Files Discoverer

If you are using the Web Files Discoverer, the following will occur:

  • "HTML5" Analysis Units will be created automatically (see Web Files Discoverer for more technical information about how the discoverer works) related to the ReactJS application source code. In addition, if your ReactJS related source code is part of a larger application (for example a JEE application), then other Analysis Units may also be created:

  • There is nothing further to do, you can now run a test analysis on the Analysis Unit before you generate a new snapshot.

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten):

Click to enlarge


Objects

The following objects are displayed in CAST Enlighten:

IconDescription

SAPUI5 Application
SAPUI5 Component
SAPUI5 Controller
SAPUI5 OData Model
SAPUI5 HTML View
SAPUI5 JS View

SAPUI5 JSON Model
SAPUI5 JSON View
SAPUI5 Model Function
SAPUI5 Object

SAPUI5 XML Fragment

SAPUI5 XML View

SAPUI5 ABAP Get Operation

SAPUI5 ABAP Post Operation

SAPUI5 ABAP Put Operation

SAPUI5 ABAP Delete Operation

SAPUI5 CDS View Operation

Structural Rules

The following structural rules are provided:

  • No labels