Extension ID

com.castsoftware.sapui5

What's new?

See SAPUI5 - 1.0 - Release Notes for more information.

Description

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

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
  

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.
• 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).

{
	"_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.

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)

<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:

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):

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" });

Supported SAPUI5 versions

Version	Supported
1.28 and above
1.26
1.24
1.22
1.20

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

CAST AIP compatibility

This extension is compatible with:

CAST AIP release	Supported
8.3.x
8.2.x
8.1.x
8.0.x
7.3.5 and all higher 7.3.x releases

Supported DBMS servers

This extension is compatible with the following DBMS servers:

CSS	Oracle	Microsoft

Prerequisites

An installation of any compatible release of CAST AIP (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:

• HTML5/JavaScript

Download and installation instructions

Please see: 

• Download an extension
• Install an extension

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

Using the CAST Delivery Manager Tool:

• 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

• Run the Package action: 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 SAPUI5 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

• Deliver the Version

Analyzing

Using the CAST Management Studio:

• Accept and deploy the Version in the CAST Management Studio. No Analysis Units will be created automatically relating to the AngularJS source code - this is the expected behaviour. However, if your AngularJS related source code is part of a larger application (for example a JEE application), then other Analysis Units may be created automatically:

Click to enlarge

• In the Current Version tab, add a new Analysis Unit specifically for your AngularJS 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 SAPUI5 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.

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:

Icon	Description
	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

Rules

None