Combination charts allow multiple layers of a graph to share the same category, but have their own values and series grouped and drawn in different styles.

A combination chart consist of two components:

• sap.makit/CombinationChartcontrol
• sap.makit/Layerelement

To create a combination chart, create aCombinationChartcontrol and add multipleLayerelements. TheCombinationChartcontrol serves as a container for the combination chart and multiple charts are added by means of 'layers' aggregation: each chart in theCombinationChartis represented by theLayerobject. TheCombinationChartcontrol contains all the properties, aggregations, events, and methods that are shared by all layers.

Steps

1. Load sapui5 and add makit library
2. Get the Data.I am using custom data.data should be like this
3. Create CombinationChart control and define categoryRegions

     4.Create Layers.

     5.Add columns

     6.Bind data to layers

     7.Add layers to combination chart.

     8.Add combination chart to Page and add page to App control.

Pre-requisites

1.sapui5 framework

2.sap.makit library loaded.

Steps

   1.First step is to include sap.makit library in index.html file

    2.Create sap.makit.Chart control and give properties.

Pre-requisites

1.HCP(Hana Cloud Platform)Account with SAP WEB IDE enabled.

Steps

1. Configure OData destination.I am using northwind OData service.From HCP cockpit choose destinations->New Destinations

2.Start SAPWebIDE from Services of HCP cockpit

3.From SAP Web IDE menu select File->New->Project from Template

4.Select 'SAPUI5 Application template'.From Available versions we have two options SAPUI5 Innovation and SAPUI5 1.28.Select SAPUI5 1.28

5.Give a meaningful project name.I am giving OdataConsumingApp.Leave namespace empty.Click Next.select view type XML and name view1(we are not changing it).Click Next.Click Finish.A new project will be created in workspace.

6.Right Click Application->New->OData Service.

7.Select Service URL from sources.Then Select Odata service from dropdown menu.If you dont see your service in drop down check step 1.Type in service URL and click play button.If no error occur we can see service details in right side of the service selection.Click Next. Click Finish.Now the selected OData service is connected to our App.

8.Its time to do some coding.Open component.js in code editor by double clicking.Paste below code in init method after the call to the base component.This is for accessing the service url from the config and creating an OData model and setting it to application.

9.Now we will add some code for view.Open View1.view.xml.Paste below code  inside Page's content aggregation.We are using a list and binding it to Categeries  enitityset of northwind OData service.

10.See our application in action.Right Click on Application->Run->Run As->Web  Application.

Introduction

For space requirements I'm going to split this blog in 5 parts:

A Smart Template is a special template provided by SAP Web IDE where you can create powerful applications just by acting on the user interface, without writing a line of code (or at least a few ones!). This SAP Web IDE template is a sort of wizard that properly implements and configure for you the new SAPUI5 Smart Template Layout available at SAPUI5 Explored

Smart Templates are based on "annotation" files: such files can be found mainly in two different places: they can come together with the service or as separate files in the application itself. If an annotation files comes with the service, then it means that it has been created within a CDS view, just as an annotation to the view itself.

More information about CDS view can be found at CDS Views - SAP HANA Developer Guide for SAP HANA Studio - SAP Library

Here below you can find also an example of this kind of file.

SAP recommends to have, as much as possible, annotations directly on CDS views. If this is not possible or if you want either to enrich or override the annotation file coming from the service with other features, you can have an annotation file directly inside the application.

An annotation file can be added to a Smart Template application in several ways: from Service, from File System, from Workspace, from Annotation URL. A single annotation file can be used by different applications, all using the same OData schema. In order to create an annotation file you can use a special SAP Web IDE plugin named Annotation Modeller (from this moment on here AM): this plugin is automatically included and activated within the latest SAP Web IDE releases.

In this H2G we are going to see how to create an annotation file from scratch and how to use it inside a smart template application. I'm going to use the public gateway system ES4 located at https://sapes4.sapdevcenter.com/: you just need to register at Sign up and get started with the SAP Gateway - Demo Consumption System.

During this long journey through Smart Templates you will see that 3 are the most important files involved in the creation of this kind of applications:

1 - the metadata.xml file: it tells to the application which are the data to be displayed

2 - the annotation file: it tells to the application how data are going to be displayed

3 - the manifest.json file, which ties these two things together.

It's important to consider that no JavaScript code is generated when working with smart templates: this means that content of the application is always rendered just at runtime.

Goals

We are going to create a new application in SAP Web IDE using the "Smart Template Application" template.

The final result will be a sort of Master-Detail application showing, on the first screen, a list of all the Products in the ProductSet collection and, on the second screen, the product's details, plus some information regarding product's sales data.

The two screens will look more or less like these:

If you are impatient and you want to go directly to the final result you can clone the Git repository for the STDemo project listed here in the section "Useful Links"!

Prerequisites

The only two prerequisites for the entire H2G are:

• SAP Web IDE (you can get a free trial account here)
• An account on the ES4 Public Gateway: you can register for free here

Steps

This is the complete list of steps we are going through:

Create a Smart Template application

Run the application without an annotation file

Add a new annotation file

Create the List Report

UI.LineItem

UI.SelectionFields

UI.DataField and UI.DataFieldForAction in the UI.LineItem

Create the Object Page

UI.HeaderInfo

UI.FieldGroup

UI.DataPoint

UI.HeaderFacets

UI.Facets

UI.CollectionFacets

UI.ReferenceFacets

Useful links

Here below you can find some useful links for understanding Smart Templates:

Let's continue with the next part where we will see How to use Smart Templates with SAP Web IDE - Creation!

Creation of a new application from Smart Templates

For space requirements I'm going to split this blog in 5 parts:

Let's get started with the creation of our first Smart Template application in SAP Web IDE.

1 - Open your SAP Web IDE

2 - From the File menu choose New --> Project from Template

3 - Choose to start from a new Smart Template Application and click on Next

4 - Enter a name for the project, a title, a namespace and a description and click on Next

5 - Choose the ES4 datasource, select the GWSAMPLE_BASIC service and click on Next

6 - For this H2G we don't want to use any annotation file coming from the server, even because on GWSAMPLE_BASIC we don't have one: so just click on Next

7 - Select the OData Collection and the OData Navigation entity sets and click on Finish. For this exercise we are going to use "ProductSet" as the main entity set and we want to navigate to the Sales Order Line Items

8 - The project is created: what we need to do now, in order to start the application, is to select the Component.js file and click on the Run button on the toolbar

9 - Enter the credentials to the ES4 system if needed

10 - The application starts: however, by clicking on the Go button, you won't be able to get any data from the system because the application doesn't know yet how to display your data

11 - You'll get this error instead, informing you that since you don't have any column in your template, the application cannot show any data

12 - You can add some columns manually by clicking on the little gear icon on the toolbar

13 - For example you can add Price, ProductID and Product Name

14 - The application shows you some data, but the changes you have done to the app won't be saved: those changes are simply not persistent; once you close the app, you will lose those changes.

15 - So, the only way to workaround this problem is to use annotation files and this is what we are going to explore here. Before this, let me firstly change the application title and the ListReport title. The first one can be found in the i18n.properties file located directly under the i18n folder of the webapp directory. The second instead can be found in the i18n file located under the ListReport/ProductSet subfolder

16 - At the end, if you refresh or restart the app you will see the two labels have been successfully updated

Let's continue with the next part where we'll learn How to use Smart Templates with SAP Web IDE - ListReport!

ListReport

For space requirements I'm going to split this blog in 5 parts:

Now that you have seen how to create a Smart Template application, let's see how to configure its ListReport page with SAP Web IDE.

1 - Open your SAP Web IDE and go into your STDemo app

2 - Create a new folder named annotations under webapp

3 - Right click on this new folder and choose New --> Create Annotation.

4 - Create a new annotation by choosing its name (i.e. annotation1.xml) and by selecting the service data source (in this case GWSAMPLE_BASIC), then click on Next

5 - Click on Finish

6 - If you double click on the manifest.json file, you can check that now a new annotation is present in the app and that it has been tied to the metadata.xml file for the selected service

7 - Right click on the new annotation annotation1.xml and choose Open with --> Annotation Modeler

8 - The AM opens. Now we need to choose for which entity set we want to create an annotation. Since ProductSet is the entity set we have chosen as Data Binding OData collection, this is the one automatically proposed. Keep this choice and click on Annotate

9 - A new annotation is created for ProductSet. What we want is to display a list of all members belonging to this collection, so we need to add to this annotation file a new UI.LineItem annotation term: it will take care of displaying this list. Click on the "+" sign located on the Local Annotations row

10 -Add a new UI.LineItem annotation term and click on OK

11 - Once this term has been added, we need to define columns for this table. So click on the "+" sign on the UI.LineItem row

12 - Add a UI.DataField annotation term and click on OK

13 - Do the same for 4 times more. You should have now 5 UI.DataFields added to the UI.LineItem annotation term

14 - Select the first one and bind it to the ProductID value, then click on Apply

15 - Do the same for the other UI.DataFields assigning them to Name, Category, Description and Price

16 - If you start now the application, you will be able to see the ListReport page fully populated

17 - We have not finished yet: we would like to place a filter bar on top of this UI.LineItem component being able to filter by ProductID and Category. Let's go again on the AM and click on the "+" sign aside the Local Annotations row. Select the UI.SelectionFields annotation term and click on OK

18 - Choose first the ProductID field, then click on Add Path and specify Category as well. Then click on the Apply button

19 - Save the annotation

20 - Refresh or restart the application and you should be able to see two search fields just in the page header

21 - As last step in this chapter, we would like to add a button on top of the UI.LineItem object. We would like, with this button, to execute some special Function Import coming from the backend. These functions, if present, are listed in the metadata.xml file. Click on the "+" sign on the UI.LineItem annotation and add a new UI.DataFieldForAction component.

22 - Define a label for this component and select as action the RegenerateAllData function; then click on Apply. As you can see here this is a special function which has its specification in the metadata.xml file. You just need a button to call it. This function is executed on the backend service.

NOTE: Pay attention that in this case this function does nothing here: it's just an example to show how you can attach a button which triggers an action on the backend service

23 - This is how the final layout looks like with the new button

Let's continue with the next part where we'll learn how to add a Object Page to our application which is displayed when you click on one of the ListReport's rows: How to use Smart Templates with SAP Web IDE - Object Page!

Object Page

For space requirements I'm going to split this blog in 5 parts:

The ListReport page has been configured, now let's do the same for the Object Page which displays the details for any row clicked in the ListReport. At moment, if you run the application and click on one of the products, you just get a pretty blank page.

1 - In SAP Web IDE reopen the annotation1.xml file with the AM

2 - So what we can do is to start adding a header to this Object Page. The right annotation for this is the UI.HeaderInfo annotation term. Click on the "+" sign on the root item in the AM and add a UI.HeaderInfo

3 - First of all, enter the singular an plural names for the main entity set of your application. In this case we are working with products so they will be Product and Products

4 - Click on the "+" sign on the UI.HeaderInfo annotation term, select to have the description in the header as well and click on OK. Then save the annotation file

5 - When you start the application you see the header we have just specified

6 - And here you can understand where the singular and plural names for the main entity collection are displayed in the application

7 - We would like now to show also some numeric data just below the header in the Object Page. For this scope you can use a special annotation term called UI.DataPoint: this allows to display a numaric value, for example, and to some extents, to do even some calculations on it. Here, to keep things simple, we want just to show the product's Price. Let's add a new UI.DataPoint annotation in the AM

8 - Just type in the string Price for the Title and choose the field Price for the Value then click on Apply

9 - Save the annotation and refresh the application. You can see that the price is displayed just below the header

10 - You can try to add a new UI.DataPoint to the annotation file to display for example the Tax Tarif Code. This time since you have two UI.DataPoints, in order for them to be correctly identified you need to specify also a Qualifier in at least one of the UI.DataPoint objects. Let's do it here for the Tax Tarif Code and click on Apply

11 - The new UI.DataPoint has been added and displayed

12 - What about if I wanted to display some other numeric values all grouped together as if it was a single DataPoint? This is not possible just with UI.DataPoint components: we need to use a different approach. We could create a UI.FieldGroup to group them together and then display this UI.FieldGroup on the ObjectPage by using another annotation term called UI.HeaderFacets. We are going to see this in the next steps

13 - Add a new UI.FieldGroup object to the annotation file

14 - Add 4 UI.DataFields to this group

15 - Specify for the DataFields the following values: WeightMeasure,Width,Height,Depth. Again since there will be other UI.FieldGroups in this annotation file, let's assign a Qualifier to this new group (i.e. FGTechData). Apply and save the file

16 - Now that the UI.FieldGroup is in place, we can add a UI.HeaderFacets component to collect these three things together: the UI.FieldGroup and the two UI.DataPoints. Let's add a new UI.HeaderFacets annotation term and then 3 UI.ReferenceFacets to it

17 - The 3 UI.ReferenceFacets, once added, should look like in this picture. We need to specify a Label, an ID and a Target Element for all of them

18 - Finally, after saving the annotation file and refreshing the application, you can see the 3 new objects correctly displayed

19 - Let me to introduce now another annotation term: the UI.Identification. This term is used to collect together all the fields that are in charge of identifying a record in the collection. In other words, they could be the mandatory fields you need to fill in order to save a record in that collection. For example, for our Product entity set, they could be ProductID, Name, Category, TypeCode, Description and Price. They could be enough for inserting a new product in the ProductSet. We want to use this annotation term just below the header in the Object Page so that when we create a new record or edit an existing one, its fields are used as data entry fields. You will better understand with this example.

Let's add a UI.Identification term to the annotation file.

20 - Inside this term, add for example 6 UI.DataFields, one for each of the fields mentioned above

21 - Before we use this new term we would like to show for example some other information related to the status of the record. For this we have a special annotation term named UI.StatusInfo which is normally used to show information like the status of an order, of a product or of any other entity in the application. In this case, just for sake of simplicity, we will use it to show the creation date of a product and the last time it was changed.

Both, the UI.Identification and the UI.StatusInfo will be displayed just below the UI.HeaderInfo.

Add the UI.StatusInfo term with two UI.DataFields inside and assign them to the CreatedAt and ChangedAt fields

22 - Now that we have the UI.Identification and the UI.StatusInfo we can put them together in a new annotation term which is the UI.CollectionFacet. First add a UI.Facet term to the annotation, then, by clicking on the "+" sign on its row, add a UI.CollectionFacet to it

Just inside this UI.CollectionFacet let's add 2 UI.ReferenceFacets

23 - Define a label for the UI.CollectionFacet and assign the two UI.ReferenceFacets to the UI.Identification and UI.StatusInfo

24 - Refreshing the application you will see the new terms correctly displayed and if you go in Edit mode the fields that can be editable will be opened

25 - There's just one step missing in our tour on the annotation files. We want to show just below the UI.CollectionFacet another UI.ReferenceFacet linked to some Sales Data of the chosen product. This is feasible of course, but we need to access the entity set of Sales Order Line Items in order to display such data. Go back on the AM, select the SalesOrderLineItemSet and click on Annotate

26 - Add a UI.LineItem annotation term and configure it to display ProductID, NetAmount, TaxAmount and GrossAmount

27 - Go back to the ProductSet and add a new UI.ReferenceFacet in the UI.Facet already present. We need to add it outside the UI.CollectionFacet, so we need to click on the "+" sign at level of the UI.Facets term

28 - Configure this ReferenceFacet with the following parameters:

Remove all the flags from the checkboxes.

As you can see here we are navigating to another entity set (ToSalesOrderLineItems) binding this object to the only one element present there (UI.LineItem).

29 - Finally, save the annotation file and refresh your app: sales data are now displayed in the app

OPTIONAL STEPS: Display a product picture

So far we have never edited the annotation.xml file by using the XML editor, we always used the AM. Well here, as an optional part, I can show you how to display a product's picture in the UI.HeaderInfo term. This is easy if you already have a field in your service providing an URL to the image. You just need to bind this field to the ImageUrl parameter of the UI.HeaderInfo.

Unfortunately we don't have such field for the GWSAMPLE_BASIC service we are using here, so we need to use a workaround: we can collect all the pictures in one folder named images; each picture will have the same name of the associated product. Then from the UI.HeaderInfo/ImageUrl parameter we will point to the related picture in the webapp/images path.

In order to do this we need to manually edit the association1.xml file.

Here are all the required steps:

30 - Import the images folder coming with the application you can clone from the Github repository into your application

31 - Double click on the annotation1.xml file in your app, in order to open it with the XML editor. From the Edit menu click on Beautify in order to properly format the XML code

32 - Find the string

<PropertyValue Property="ImageUrl" String=""/>

and replace it with the following code

<PropertyValue Property="ImageUrl">  <Apply Function="odata.concat">  <String>/webapp/images/</String>  <Path>ProductID</Path>  <String>.jpg</String>  </Apply></PropertyValue>

33 - Save the annotation file and refresh the app: the image is correctly displayed in the UI.HeaderInfo of the Object Page

In the final part of this blog where you will understand how to extend this application to add more nice features to it! For the moment this final part is just planned: stay tuned, it will come soon!

In the blog Step by Step to create CDS view through SmartTemplate + WebIDE andCreate a CRM Service Order Fiori application within a couple of minutes we get an Fiori application generated which needs several fine-tuning on appearance. For example, the status field is by default rendered as a pure input field with technical status code like "OPEN", "PROC" displayed. It is better to render it as a drop down list with human readable text like "Open", "In process" displayed as drop down list item.

I searched in SCN and could not find a working solution for it, so I spent some time for research and would like to share with you here.

Step1 Create a simple CDS view to hold status code and status description

@AbapCatalog.sqlViewName: 'zstatusfixed'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'fixed value'
define view Z_C_Status_Fixedvalue as select from zstatus_fixedval {   @EndUserText.label: 'status key for fixed value'   key zstatus_fixedval.status_code,   @EndUserText.label: 'status description for fixed value'   zstatus_fixedval.status_text
}

Previewed as below:

Here below is the table definition on top of which the CDS view above is created.

For demonstration purpose I create a Z table and only inserted three status items:

Step2 link the status field to the CDS view created in previous step

I have defined the consumption view Z_C_Service_Order_View with below source code:

define view Z_C_Service_Order_View as select from Z_i_Order_View
...
@UI.identification: [ { position: 50 } ]
@Consumption.valueHelp: '_statusfixedvalue'
@ObjectModel: { foreignKey.association: '_statusfixedvalue', mandatory: true }
Z_i_Order_View.txt04,
...

Where does the definition of "_statusfixedvalue" come from?

It is defined in view Z_i_Over_View:

define view Z_i_Over_View as select from XXXX
association [0..1] to Z_C_Status_Fixedvalue as _statusfixedvalue  on  $projection.txt04 = _statusfixedvalue.status_code
{   ...   _status_text.txt04,  ...   @ObjectModel.association.type: #TO_COMPOSITION_CHILD   _statusfixedvalue
}

So far the work on CDS side is done.

Step3 create necessary annotation in ABAP code

Redefine method DEFINE of your MPC_EXT class with following source code:

super->define( ).    DATA lo_annotation TYPE REF TO /iwbep/if_mgw_odata_annotation.    DATA  lo_property TYPE REF TO /iwbep/if_mgw_odata_property.    DATA  lo_entity_set TYPE REF TO /iwbep/if_mgw_odata_entity_set.    lo_entity_set = model->get_entity_set( 'Z_C_Service_Order_View' ).    lo_annotation = lo_entity_set->create_annotation( 'sap' ).    lo_annotation->add( iv_key = 'semantics' iv_value = 'fixed-values').    DATA(lo_entitytype) = model->get_entity_type( 'Z_C_Service_Order_ViewType' ).    lo_entitytype->set_is_value_list( abap_true ).    data(lo_txt_property) = model->get_entity_type( 'Z_C_Service_Order_ViewType' )->get_property( 'txt04' ).    lo_txt_property->set_value_list( /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values ).    data(lo_text_anno) = lo_txt_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' ).    lo_text_anno->add( iv_key = 'text' iv_value = 'to_statusfixedvalue/status_text').    lo_txt_property = model->get_entity_type( 'Z_C_Status_FixedvalueType' )->get_property( 'status_code' ).    lo_txt_property->set_value_list( /iwbep/if_mgw_odata_property=>gcs_value_list_type_property-fixed_values ).    lo_text_anno = lo_txt_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( 'sap' ).    lo_text_anno->add( iv_key = 'text' iv_value = 'status_text').

Note: those ABAP code is necessary, or else you will only get an ugly drop down list: only status code is displayed:

Final result

In display mode and in edit mode, the status description is displayed:

Introduction

One of SAP Web IDE's main features is deploying applications to SAP HANA Cloud Platform (HCP).

In this blog I will showcase this feature and how it should be used in SAP Web IDE.

Definitions

Software Deployment: The process of getting software to the point where it is available for active use.

Git: Widely used version control system for software development.

Past
In the past, due to technical difficulties, the deployment to HCP was done by creating a Git repository and pushing the application's files into it.

This created an unnecessary dependency between the deployment and the Git source control mechanisms.

After we solved the technical difficulties, the deployment was implemented using a dedicated API without the need to use Git actions. This allowed us to make the desired separation between the deployment and the source control.

Present

The deployment to HCP feature is now completely separated from the Git source control.

You have two options (depicted as radio buttons):

• Deploy a new application
• Update an existing application

When choosing to deploy a new application, the account, project name, app name, and version are displayed. You can select a different account (if you're a member in one) or edit the app name and version.

When choosing to update an existing application, the account, project name and version are displayed and you need to select the application you want to update from the dropdown list. Based on previous deployments of this app we prefill the account and app name but it's subject to change.

The list contains all the HTML5 applications in your account.

After deploying your application, it is ready to be used in your account!

Deployment Results

The deployment process creates the app in your HCP account under the HTML5 Applications section with the version you selected.

If your application has the SAPUI5 Client Build project type, an application build is performed in the background of the deployment process.
The build artifacts are then deployed to HCP and represent the productive  and more efficient version of the application. It does not reflect the project's source files. The application is then ready for testing or productive use.

For more information, see Application Build.

Wait, where did my HCP Git go?

When you deploy the application to HCP, the source code is no longer automatically pushed to the HCP Git. Also, it is no longer possible to connect your project to the HCP Git repository via the deployment dialog.

The application's source code should be managed and collaborated with other developers using the great tools of Git - merging, conflict resolution, versioning and more.

One proposal for starting to work with HCP Git:

1. Navigate to your application in the Cockpit and locate its HCP Git repository URL. For more information, see Creating an HTML5 Application.
   
2. Initialize your local Git repository and connect it to the remote Git repository using the URL you obtained from the cockpit.
   
   
   
   
   
3. Use the Git operations to fetch, commit, and push your changes. For more information, see Using Source Control (Git).
   

Suggested Work Model

After creating the application in SAP Web IDE, you can initialize a local Git repository for it and connect it to a remote Git repository on HCP.

Now you can develop your app, collaborate with your peers, and share your code with the help of Git.

Once the development is done and the app is ready to be published, you can deploy it to HCP and make it available for others (e.g. for testing, release, etc).

You can also create a tile for it in your SAP Fiori launchpad on HCP. For more information, see Registering Applications to SAP Fiori Launchpad.

Important Information

• If you want to deploy again an app that was previously deployed, the dialog will open with the Update an existing application radio button selected by default and the application selected in the dropdown list. You can change both options.
  
  
• The Edit Online button in the application's page on HCP clones the Git repository of the application into SAP Web IDE. If nothing was pushed into this repository, a folder with only a git.ignore file will be created in your workspace because the repository is empty.

• If you would like to preview your app directly from HCP, make sure your application contains at least one executable HTML file (e.g. index.html), and that it is configured properly in the neo-app.json's welcomeFile property. For more information, see Welcome File.

If your application does not contain an executable HTML file, the link to the application URL will not be available and the application will not run from HCP.

When previewing the app from FLP on HCP, an executable HTML file is not required.

Introduction

For space requirements this blog has been split in 5 parts:

This is the final part of this blog where I'm going to show you some extensibility concepts related to Smart Templates. So far we have not injected yet any big custom code in the Smart Template application, but we just used the wizard in order to build it: now, in this part, we are going to extend our app with new features, simply by adding some XML and Javascript code to it.

I would like to point out here that what I'm going to show here is something which is still undocumented and things will change for sure in the future. With upcoming versions of SAP Web IDE, probably you won't need to create the extensions manually, but rather you will be guided to add extensions just through easy-to-follow wizards.

I would split this blog in 6 sections/steps:

1. Adding a custom filter controller
2. Adding a custom button to the list report
3. Adding a custom static column
4. Adding a custom calculated column
5. Adding a button to the object page header
6. Add a DataFieldForAnnotation showing the Communication.Contact info

Let's go step by step and let me show you how to extend the STDemo application I have created in the 4 previous parts of this blog.

If you want to grab the extended app you can do it by cloning the repository located here.

STEP 1 - Adding a custom filter controller

As a first step into our Smart Templates extensibility journey, I would like to show you how you can add a custom filter to the SelectionFields annotation term you placed in the annotation file. This, as you can imagine, must be achieved by using some custom code. I would like to collect in a special folder named ext, all the extensions we are going to implement in our application.

1 - So let's create a new subfolder named ext under webapp and under ext other two subfolders named controllers and fragments.

Fragments will host all the pieces of XML code we will use for our components in the views, Controllers all logics behind this extension implementation.

You should come to a structure like this:

2 - Create a new file named ListReportExtension.controller.js under the controllers folder

3 - In this new file let's copy the following code:

sap.ui.controller("com.st.demo.ext.controllers.ListReportExtension", {
onBeforeRebindTableExtension : function(oEvent) {  alert("On Before Rebind Table Extension");
}
});

4 - Save the file.

5 - Create a new file named CustomFilterExtension.fragment.xml, this time under the fragments folder

6 - Paste in this file the following code:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:smartfilterbar="sap.ui.comp.smartfilterbar" xmlns="sap.m">  <smartfilterbar:ControlConfiguration groupId="_BASIC" index="1" key="PriceRangeFilter" label="Price ranges" visibleInAdvancedArea="true">  <smartfilterbar:customControl>            <ComboBox id="PriceRangeFilter-combobox" selectedKey="0">                <core:Item key="0" text="All"/>                <core:Item key="1" text="Price between 0-100"/>                <core:Item key="2" text="Price between 100-500"/>                <core:Item key="3" text="Price between 500-1000"/>                <core:Item key="4" text="Price over 1000"/>            </ComboBox>  </smartfilterbar:customControl>  </smartfilterbar:ControlConfiguration></core:FragmentDefinition>

7 - Save the file

8 - Open the manifest.json file

9 - Go to the XML editor

10 - Locate the part of code showing:

"extends": {     "extensions": {     }
},

11 - Replace this part with the following:

"extends": {     "extensions": {          "sap.ui.viewExtensions": {               "sap.suite.ui.generic.template.ListReport.view.ListReport": {                    "SmartFilterBarControlConfigurationExtension|ProductSet": {                         "className": "sap.ui.core.Fragment",                         "fragmentName": "com.st.demo.ext.fragments.CustomFilterExtension",                         "type": "XML"                    }               }          },          "sap.ui.controllerExtensions": {               "sap.suite.ui.generic.template.ListReport.view.ListReport": {                    "controllerName": "com.st.demo.ext.controllers.ListReportExtension"               }          }     }
},

12 - If you start the application now you can see the new drop down control, but even if you choose something from it and press the Go button, you won't get anything filtered. The only thing you get is this nice message

This message comes from the ListReportExtension.controller.js file where we have defined a function for the event onBeforeRebindTableExtension. This event is fired when you click on the Go button and it's just there that we are going to put our code for filtering table records.

13 - So reopen the ListReportExtension.controller.js and replace the onBeforeRebindTableExtension function with the following:

NOTE: on the line 9 we have the key PriceRangeFilter which must match the same key defined in the CustomFilterExtension.fragment.xml file on the second line.

sap.ui.controller("com.st.demo.ext.controllers.ListReportExtension", {     onBeforeRebindTableExtension: function(oEvent) {          var oBindingParams = oEvent.getParameter("bindingParams");          oBindingParams.parameters = oBindingParams.parameters || {};          var oSmartTable = oEvent.getSource();          var oSmartFilterBar = this.byId(oSmartTable.getSmartFilterId());          if (oSmartFilterBar instanceof sap.ui.comp.smartfilterbar.SmartFilterBar) {               var oCustomControl = oSmartFilterBar.getControlByKey("PriceRangeFilter");               if (oCustomControl instanceof sap.m.ComboBox) {                    var vPriceRange = oCustomControl.getSelectedKey();                    switch (vPriceRange) {                         case "0":                              oBindingParams.filters.push(new sap.ui.model.Filter('Price', null));                              break;                         case "1":                              oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'LE', "100"));                              break;                         case "2":                              oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'BT', "100", "500"));                              break;                         case "3":                              oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'BT', "500", "1000"));                              break;                         case "4":                              oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'GT', "1000"));                              break;                         default:                              break;                    }               }          }     }
});

14 - Save the file

NOTE: Of course if your namespace is different, you need to change it in all the .js files listed here.

15 - Run again the application or refresh it.

16 - Now if you filter Prices for example from 100 to 500, you will get the expected records:

STEP 2 - Adding a custom button to the list report

As a second step, let's add a custom button to the LineItem Annotation Term to execute some special custom functions on our records, like for example in this case, to change the price of a selected product.

Since this feature is not natively present in our application, we need to extend it. The first thing to do is to create a new button and then to add some logic to this button. The extension for creating the new button is placed directly into the manifest.json file.

1 - Open the manifest.json file with the XML editor

2 - Locate the extends section and just after the line

"controllerName": "com.st.demo.ext.controllers.ListReportExtension"

add a comma and then the the following code:

"sap.ui.generic.app": {     "ProductSet": {          "EntitySet": "ProductSet",          "Actions": {               "ChangePrice": {                    "id": "ChangePrice",                    "text": "Change price (Ext)",                    "press": "onChangePrice"               }          }     }
}

like in this picture

3 - If you run the application now, the button is in place, but clicking on it nothing happens, because we need to add some logic behind. Let's reuse the ListReportExtension.controller.js controller we created previously and let's add the following code just before the last "});" statement. Of course you need to put a comma after the onBeforeRebindTableExtension function, because you are adding two further functions to the module. The code to add is the following:

     onChangePrice: function(oEvent) {          var oSmartTable = oEvent.getSource().getParent().getParent().getTable();          var item = oSmartTable.getSelectedItem();          if (item) {               var oContext = item._getBindingContext();               this._showChangePricePopup(oContext);          } else {               sap.m.MessageBox.error("You must first select a row!", {});          }     },     _showChangePricePopup: function(oContext) {          var that = this;          var oModel = this.getView().getModel();          var oField = new sap.ui.comp.smartfield.SmartField({               value: "{Price}"          });          var oParameterDialog = new sap.m.Dialog({               title: "Change Price",               content: [new sap.m.Text({                    text: 'New Price '               }), oField],               beginButton: new sap.m.Button({                    text: "OK",                    press: function() {                         that.getView().getModel().submitChanges();                         oParameterDialog.close();                    }               }),               endButton: new sap.m.Button({                    text: "Cancel",                    press: function() {                         that.getView().getModel().resetChanges();                         oParameterDialog.close();                    }               }),               afterClose: function() {                    oParameterDialog.destroy();               }          });          oParameterDialog.setModel(oModel);          oParameterDialog.setBindingContext(oContext);          oParameterDialog.open();     }

Here we are checking if there is a line selected: if yes the application invokes the _showChangePricePopup function which shows up the text box where you can enter the new price. If there isn't a selected line a message pops up informing the user that he needs to select a product

4 - Run the application and check that the button is perfectly working

STEP 3 - Adding a custom static column

For this new kind of extension we need to create 2 further files, both in the fragments folder. The two files will act as a sort of template for a new custom column in the Smart Table and for any cell of this new column.

In this step, we just want to add a static column to the table: it means that the content of its cells will be fixed and won't change with other columns.

In particular we want to create a new column, to be the last in the table, showing the text "Additional info", so that the user knows that by clicking on a row, he can get the product details.

1 - Create a new file named ListReportResponsiveTableColumns.fragment.xml under the folder ext/fragments

2 - Put in this file the following XML code:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">  <Column>  <Text text="..." />  <customData>  <core:CustomData key="p13nData" value='\{"columnKey": "AdditionalInfo"}' />  </customData>  </Column></core:FragmentDefinition>

3 - Create another file named ListReportResponsiveTableCells.fragment.xml always under ext/fragments

4 - Paste inside this file the XML code

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">  <Text text="Additional info"></Text></core:FragmentDefinition>

5 - Now reopen the manifest.json with the code editor

6 - Just after the SmartFilterBarControlConfigurationExtension extension add a comma and then the code

"ResponsiveTableColumnsExtension|ProductSet": {     "className": "sap.ui.core.Fragment",     "fragmentName": "com.st.demo.ext.fragments.ListReportResponsiveTableColumns",     "type": "XML"
},
"ResponsiveTableCellsExtension|ProductSet": {     "className": "sap.ui.core.Fragment",     "fragmentName": "com.st.demo.ext.fragments.ListReportResponsiveTableCells",     "type": "XML"
}

7 - Run the application and you will get the new column

STEP 4 - Adding a custom calculated column

What about if we want to add a new column having the cells content based on the content of the cells of another column?

For example we want to show a sort of rating indicator which shows 1 star if the product's price is greater than 500 and 5 stars on all other cases. This of course cannot be a likely case, but you can change the logic to display anything more meaningful.

1 - Open the ListReportResponsiveTableColumns.fragment.xml file and add to it the XML code for the new column:

  <Column>  <Text text="Rating"/>  <customData>  <core:CustomData key="p13nData" value='\{"columnKey": "Rating", "leadingProperty":"Price"}'/>  </customData>  </Column>

2) Open the ListReportResponsiveTableCells.fragment.xml file and add the code for the new cell

<RatingIndicator value="{= ${Price} > 500 ? 1:5}" enabled="false"></RatingIndicator>

3)Run again or refresh the app and you get the new calculated column

STEP 5 - Adding a button to the object page header

Let's move now to the Object Page and let's try to add a button in the header bar just aside the buttons for editing and deleting the product.

We won't add any big logic to this button, I just want to show you how you can do it: by clicking on this new button only a nice message will pop up. Feel free to put whatever logic you need under it.

1 - Create a new controller named ObjectPageExtension.controller.js under the ext/controllers folder

2 - Add the following JS code to it

sap.ui.controller("com.st.demo.ext.controllers.ObjectPageExtension", {     onObjectPageCustomAction: function() {          sap.m.MessageBox.success("Hello from ObjectPage custom action!", {});     }
});

NOTE: Again here please pay attention that if you are using a different namespace you need to replace the string "com.st.demo" with yours.

3 - Open the manifest.json file and go in the extends section

4 - Add to the sap.ui.controllerExtensions this new extension

"sap.suite.ui.generic.template.ObjectPage.view.Details": {     "controllerName": "com.team.meeting.ext.controllers.ObjectPageExtension",     "sap.ui.generic.app": {          "ProductSet": {               "EntitySet": "ProductSet",               "Header" : {                    "Actions": {                         "ObjectPageCustomAction" : {                              "id" : "ObjectPageCustomAction",                              "text" : "My Custom Action",                              "press" : "onObjectPageCustomAction"                         }                    }               }          }     }
}

5 - Save the file

6 - Re-run the application and go to the object page. The new button has been added.

STEP 6 - Add a DataFieldForAnnotation showing the Communication.Contact info

In this last step I'm going to show you how to add to the Object Page some fields which are, let's say, "clickable". When clicking on them, indeed, you get some details about the clicked item. Let's take as an example the product's supplier. You want to add this information to your Object Page (i.e. Supplier Id and Supplier Name), but when clicking on the supplier name you want to get the supplier's contact information.

This extension is made directly in the annotation file.

NOTE: At moment we can consider this as an extension because there is no way to do it within the AM.

1 - Open the annotation1.xml file with the AM

2 - Create a new UI.FieldGroup term with the qualifier FGSupplier and add a UI.DataField and a UI.DataFieldForAnnotation terms to it. The UI.DataField can be bound to the SupplierID and the UI.DataFieldForAnnotation can be temporarily left blank as it is, without any assignment because we are going to change this by editing directly the XML code.

3 - Click on Apply and save the annotation file.

4 - Switch to the BusinessPartner entity set and click on the Annotate button and save the file. We are not going to put any annotation term for the time being here because we will add it through the XML editor later. We have just created the annotation placeholder

5 - Now reopen the annotation1.xml file with the XML editor

6 - Beautify the file by clicking onf Edit -> Beautify

7 - Locate the annotation for the BusinessPartner entity set: it should be at the end of the file

8 - Replace the entire annotation with this one:

  <Annotations Target="/IWBEP/GWSAMPLE_BASIC.BusinessPartner">  <Annotation Term="Communication.Contact">  <Record>  <PropertyValue Path="CompanyName" Property="fn"/>  <PropertyValue Property="tel">  <Collection>  <Record>  <PropertyValue EnumMember="Communication.PhoneType/fax" Property="type"/>  <PropertyValue Path="FaxNumber" Property="uri"/>  </Record>  <Record>  <PropertyValue EnumMember="Communication.PhoneType/work Communication.PhoneType/pref" Property="type"/>  <PropertyValue Path="PhoneNumber" Property="uri"/>  </Record>  </Collection>  </PropertyValue>  <PropertyValue Property="email">  <Collection>  <Record>  <PropertyValue Path="EmailAddress" Property="address"/>  </Record>  </Collection>  </PropertyValue>  </Record>  </Annotation>  </Annotations>

9 - Locate the point in the file where you placed the UI.DataFieldForAnnotation term

10 - Replace the entire term with the following:

  <Record Type="UI.DataFieldForAnnotation">  <PropertyValue Property="Label" String="Supplier"/>  <PropertyValue AnnotationPath="ToSupplier/@Communication.Contact" Property="Target"/>  <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance"/>  </Record>

11 - Save the file.

12 - Now we just need to display our new UI.FieldGroup. Open the annotation1.xml file with the AM

13 - Add a new UI.ReferenceFacet to the already existing UI.HeaderFacet

14 - Assign to this new UI.ReferenceFacet the UI.FieldGroup (FGSupplier) we have created previously.

15 - Save the file

16 - Re-run or refresh the application and you will see new extension.

Congratulations! You have successfully extended your Smart Template application! As I said at the beginning of this part, if you want to get the complete source code for this example, feel free to download it from Github here.

Hi All,

for creating standard SMART TEMPLATE  from SAP WEB IDE follow this blog.

Create Smart Template Project.........SAP WEB IDE

To enable some grid table and object view

Manage Smart Template (List View and Object View ) using Annotations file...

For adding some custom controls using Annotation.

Adding Controls on Smart template  using Annotations...SAP WEB IDE

Breakout Application in Smart Template by adding some custom view for adding some  custom controls using XML and JS code.

Step 1: create Smart Template from SAP WEB IDE

Step 2: Select Services

Step 3: Select Entity Set and click on finish.

Step 4: open your project folder in WEB IDE.

Step 5: Create a folder on ext and in side folder create again folder and add file same as highlighted in snapshot.

Step 6: open manifest.json and add extension code for routing .

Step 7: ext/controller/CustomFilter.fragment.xml .

               I am Adding FilterBar in List View.

Step 8: ext/controller/CustomFilter.Controller.js

Step 9: Save it and run project:

SO its was the HOW TO ADD Breakout SMART Template PROJECT .

Thank you

Virendra Soni

SAP Web Ide for development is one of the greatest tool that SAP has created for UI5 development on cloud. Yet It is possible to connect ERP back-end with HANA Cloud Connector it's not possible for most of corporation who block access to their back end SAP system for reasonable concerns. In addition to this, for most of the companies storing the application code on cloud still seems uncomfortable. Now, it's possible to overcome these difficulties using SAP Web Ide with local installation and connect to your back end in the same network. Unfortunately it's still not advised to use as productively but I am sure in a year we can be using local Web Ide for also productive purposes.

Before going in detail first I would like to say that if you have a network access with strong security policies, you will face with some difficulties. Also I recommend to have an admin account. Also, SAP Web IDE is an eclipse based application if you had experience with eclipse it would be helpful. With "based on eclipse" I don't mean the user interface but backend.

Let's start!

1.Install the Local Web IDE
First things first. In the following blog post it's very well defined how to do installation. Just follow the steps  
How To Install SAP Web IDE Locally for Trial in Windows

2.Configure Proxy

Open the file eclipse/orion.ini and write the following lines

-Dhttp.proxyHost=<your_http_proxy>

-Dhttp.proxyUser=<your_proxy_user>

-Dhttp.proxyPassword=<your_proxy_password>

-Dhttp.proxyPort=<your_proxy_port>

-Dhttps.nonProxyHosts=localhost

-Dhttps.proxyHost=<your_https_proxy>

-Dhttps.proxyUser=<your_https_proxy_user>

-Dhttps.proxyPassword=<your_https_proxy_password>

-Dhttps.proxyPort=<your_https_proxy_port>

-Dhttps.nonProxyHosts=localhost

3.Configure Destinations

If you want to connect to your SAP ERP backend the easiest way is to use Hana Cloud Connector. However, if you are in an environment where these type of access is restricted, you have to configure your backend connection manually. Unfortunately, unlike in Hana Cloud Platform destinations can not be added via user interface. You have to create configuration files. To do so:
     1. Go to directory "eclipse\config_master\service.destinations\destinations" where you have unzipped the local web ide folder.

     2. Create a file with your backend name

     3. write the followings inside the configuration file:

#ServiceDestinations

Description=<your system description> Type=HTTP

TrustAll=true

Authentication=NoAuthentication

Name=<your system name>

ProxyType=Internet

URL=https\://<your system url>

WebIDEUsage=odata_abap,ui5_execute_abap,dev_abap

WebIDESystem=<your system name>

WebIDEEnabled=true

sap-client=<your client>

For more information about configuring backend please see SAP Web IDE Developer Guide section "3.3 Optional - Connecting Remote Systems". One important point is here that SAP Note 1977537 must be applied on your backend. Otherwise you will get an error. For more information about this topic have a look at this blog:

Troubleshooting Deployment to an ABAP System from SAP Web IDE

• A "forbidden" error is displayed with no prompt for user credentials because the ICF node for ADT is configured with fixed user credentials. The solution would be to remove the fixed user credentials. This can also occur during the deployment process and result in an "CSRF token validation failed" error. Example: CSRF token validation failed while deploying extended fiori application to ABAP Repository

3.Using Git
This was the most problematic part in my Local SAP Web IDE installation. I guess it's about my proxy settings and you will not have this issues.

First I tried to clone a repository in our network. When I try to clone a repository in our network I got authentication not supported error.

When I checked back at the help document I saw that server certificate must be imported to the JVM. So, If you are using git on your network you have to the same thing. See Section 4.4.3 Importing the Git Server Certificate into the JVM in developer guide.

If you are connecting to a Git server in your company via HTTPS, the Java Virtual Machine (JVM) on which the

Orion installation is running has to trust the server certificate. If the server certificate is not issued by a public

agency, but is based on a company internal root certificate, you have to import the root certificate into the JVM.

Otherwise the verification of the Git server's certificate fails and prevents you from performing Git operations.

To import your certificate into the JVM, fetch the certificate *.cer file from your company's IT department and

store it on your machine, by performing the steps.

 

Microsoft Windows®

1. In the command shell, enter the following command:

cd C:\Program Files\Java\jre<VERSION>

\lib\security

Example:

C:\Program Files\Java\jre7\lib

\security

2. Next, enter the following command:

keytool -import -file <PATH OF THE .cer FILE>

-keystore cacerts -alias <ANY ALIAS>

Mac OS®

1. In the Terminal window, enter the following command:

cd /Library/Java/JavaVirtualMachines/

jdk<VERSION>.jdk/Contents/Home/jre/lib/

security

Example:

/Library/Java/JavaVirtualMachines/

jdk1.7.0_65.jdk/Contents/Home/jre/lib/

security

2. Next, enter the following command:

sudo keytool -import -file <PATH OF

THE .cer FILE> -keystore cacerts -alias <ANY

ALIAS>

When I tried to clone a repository in github, I was able to do. However when I tried to push a change I got again proxy error. I hope you will not get these proxy errors in your network.

IDE Usage:

IDE usage is nearly the same with the one in the cloud at first glance. However there are some significant differences. For instance plugin configuration is not up to date as in cloud. As I mentioned earlier destinations can not be configured via user interface. This is an important drawback. However it's easy to configure. However keep in mind that it's still not in productive usage. I think these configurations can be done via ui in productive version.

Conclusion

SAP Web IDE is great tool with great features like WYSIWYG editor for XML views, code completion, plugin configuration. Having this features on local development environment is an opportunity. On the other hand cloud version is more step forward so, if you don't have any security or network restriction using the cloud version is still better option.

In my opinion the real benefit of web based tool can be exploited when it's used on cloud. Accessing your code anywhere on any device (yet, writing your code on tablet is not practical) is great opportunity. Local Web IDE doesn't doesn't have any difference comparing to Eclipse when we look at this perspective. However lots of feature where available in Web IDE makes ahead.

Let's wait and see what will happen in productive version.

This blog is the second one of a series of blog which we like to call “Becoming a Ninja Web IDE Developer”.

Link to the first blog can be found here

Prerequisites

• SAP Web IDE instance - either trial or production (you can get one here: SAP HANA Cloud Platform )
• Knowledge in UI5/JavaScript development
• Modern web browser (chrome/firefox etc.)

Introduction

Other than Fiori/UI5 development WebIDE also allow developer to extend their WebIDE by developing a WebIDE plugin.

In this blog we will show how you can create a wizard template that will generate a new WebIDE plugin that will be located on the right side pane of the WebIDE.

The right pane plugin

The right pane extension is the most popular WebIDE plugin. If you will open WebIDE you will immediately notice that WebIDE already delivered with out of the box right pane plugins, such plugins are:

• API Reference - provide documentation on different UI5 control that are being used by developers
• GIT client - provide a UI to easily integrate with GIT source control
• Search - search & replace capabilities
• and more

After reading and implementing this blog you will be able to add a new icon to the right pane side of the WebIDE so when you will click on it you will see a the UI that you developed.

In this blog we will not focus on the UI implementation (it will be done on the next blog post) but we will only focus on building a template that will allow you to generate such right pane plugin in 3 clicks of a button.

The template wizard

Template wizard allow developer to generate apps and component easily. The most common scenario is to generate a new master-detail app which connected to an oData source from your backend system. each template contain steps like: name of the project, datasource, pages and more details which are required in order to generate the app.

We will use the same wizard for generate a new right pane plugin. Our wizard steps will be very simple and the result will be a new right pane plugin.

Few points about WebIDE plugins

• WebIDE plugins are known also as WebIDE extensions
• WebIDE plugins allow developers to customize their WebIDE tool.
• WebIDE plugins are developed inside the WebIDE itself and can be run from within the WebIDE
• After development of the plugins is done the developer can publish his/her plugin and share it with other developers (will not be covered in this blog but will be covered later)
• WebIDE plugin can be enabled/disabled by the user at any time
• WebIDE plugin can consume API's which exposed by other plugins. Such API's can be:
  • File system API's - to access files in your repository
  • Document API
  • Events - listening to events that are published by other plugins (for example: an event that will be triggered when the user push his/her code to GIT or when a file has been changed or deleted and more)
• WebIDE plugin must be written in JavaScript and can leverage 3-party libraries.
• The best practice is to build the UI using the UI5 framework although it is not forced by the WebIDE
• WebIDE itself is built from plugin those plugins are called core plugins and it was built like this in order to provide a way to extend it according to the developer requirements and needs.
• When you want to test the WebIDE you can run your plugin from within the WebIDE and then WebIDE will open a new WebIDE instance with this plugin injected.

Plugin vs. Templates

The goal of this blog is to build a template wizard that will allow us to generate a new plugin. However what we are going to build is also a plugin because we want to extend the wizard part of WebIDE and the only way to extend it is by creating a plugin. So what we will do is to create a plugin that will generate our right pane plugin .

As you can see from the picture above one plugin can implement multiple templates so you are not required to create a dedicated plugin each time that you want to add a new template to your wizard you can do it all in one plugin.

In this blog we will create the Template Wizard Plugin and also the Template1 (which will be the right pane in our case) and if we would like to add a new template in the future (for example generate an editor plugin etc.) we will be able to reuse the Template Wizard Plugin and create another template on top of it.

Let's get started!

Creating the Template Wizard Plugin

We will start by creating a new empty plugin in WebIDE.

• To create a new empty plugin please go File> New> Project from Template to open the template wizard.
• Switch to the Plugin Development category and select the Empty Plugin tile and then click Next.

• Give a name to your empty plugin of WebIDEPlugins and click Next
  
• Next give a name and description to your plugin.
  • Name: templatewizardplugins
  • Description: Templates wizard plugin
• Make sure that the include sample implementation code is unchecked and click on Next and then click on Finish
  
  
• After clicking on finish a new WebIDE plugin project will be generated under your workspace
  
  
  
• This project is an empty project and contains only the skeleton of a WebIDE plugin next we will enhance it by creating a new template under it
• The most important file in plugin project is the plugin.json file. This file contains all the plugin customizations like:
  • Which service this plugin requires from other plugins
  • Which services this plugin expose to other plugins
  • Which templates exist under this plugin
  • Which events this plugin subscribed to
  • The plugin name, description
  • And more...
• Please notice that currently our plugin is empty it is not require anything and not expose anything
• This plugin responsible to add a new template that will allow the user to generate a right pane plugin easily. In order to do it we will need to require some services from other WebIDE plugins and use them in our plugin. In order to do it please do the following:
  • open the plugin.json
  • under the requires block please require the following services:
    • filesystem.documentProvider
    • plugindevelopment
    • setting.project

               at the end of this step your plugin.json requires block should look like the following:
           

• go to template:templates block and add the following line (just under the templateType key)
  "supportedProjectTypes" : ["sap.watt.uitools.ide.plugin"],
  
  at the end of this step your plugin.json template:templates block should look like to following:
  
  

The Template

Create a new template

In this section we will finally do some coding. This section is the most complicated one because here we will actually do all the work in order to generate a right pane plugin.

• Select the project that was generated on previous step (WebIDEPlugins)
• Right click on it and Select New> More... 

• In the dialog select Template and click on Next

• In the next step enter the following details:
  • Name: Right Pane
  • Description: Template for generating right pane plugin
  • Type: Project
  • Category: make sure Use existing is selected and change the category to Plugin Development so your template will be saved under the plugin development category. If you want you can also introduce your own category like: Custom Plugins or My Plugins etc. but for this demo we will use an existingone
• Click on Next

• Next we will need to specify our template steps. Because we are now creating a template wizard we need to predefine the wizard steps for it. By default WebIDE will create the 2 steps for you:
  • Select a Template step - request the user to select the template (if you remember one plugin can contain multiple templates...)
  • Project Basic Info step - request the user to fill in the project name
• Next we will need to create only one additional step to create this step simply click on the Add Step button
  
  
• Next we will need to specify the step type that we wish to create. WebIDE will allows you to select from different predefined steps we will select the templateCustomizationStep one because we want to create custom wizard step and not an existing one.
  
  
• Click on Next and then click on Finish.
• WebIDE will generate a new folder under the WebIDEPlugins project folder with the name of rightpane let's explain what exactly was created under this folder:
  • resources - a folder that will contain your plugin code this folder will contain only one file currently that we don't really need. This folder is actually the template source code every folder and file that will be exist under this folder will be generated by our template so at the end this folder should contain the code of our right pane plugin because this is the plugin that we want to generate.
    by default WebIDE will create a file with the name sample.js.tmpl (we will understand what is tmpl in the next section) this file is just a sample file that WebIDE create so the plugin will be executable, later we will delete it but don't delete it yet...
  • model.json - this file contains our template metadata model. This model describe our template steps, the fields and the type of the fields.
  • resources.zip - a zip file of our resources folder
  • rightpane.js - this file contains our template business logic. such business logic can be what we want to do before the template is being generated, what we want to do after the template is being generated and some custom validations that we want to apply.
• After finishing this step we can actually run our plugin. Naturally, if we will try to use the template wizard to generate the plugin it will not be the right pane plugin that we want to generate. It will be an app that contains only one file (sample.js) with some sample code inside it. That is because the wizard result will be the resources that exist under the resources folder and in the current stage our resources folder contains only one file.

First execution of the plugin

In order to execute and test that everything that we did works as expected please do the following:

• Select the plugin.json file (which exist under the WebIDEPlugins folder)
• Right click on this file select Run > Run plugin project and a new WebIDE instance will be opened for you. Please notice that the new instance will be opened in a new tab, this new tab title will be Debug Mode and if you will go to the WebIDE in this tab you will see a label with the text debug mode (located on the top right and in red color).  This WebIDE instance contains the plugin that we just executed.
  
  
  
  
  
  
• To test that the template is really there go to the new WebIDE instance and click on File > New  > Project from Template
• Change the category to the category of our template (Plugin Development) and then you will be able to an additional tile with the name Right Pane
  
  
• If you will click on Next and finish a new project will be generated into your workspace but a really simple one that will contain only a single file of sample.js with some text that you specified in the wizard. This is not what we want of course our goal is to generate a new right pane plugin so the only thing that left is to write the relevant code for the right pane plugin implementation.
• Next, please close the new WebIDE instance (the one that in DEBUG MODE)

Few words about the template engine (.tmpl files)

2 sections above we explained about the resources folder content which was created by WebIDE. By default (for empty plugins) WebIDE create a new file with the name of sample.js.tmpl now we need to understand what exactly is this .tmpl file.

.tmpl files are files which contain the code that we want to generate the .tmpl at the end indicate that these files are not regular JS/HTML/CSS files but these are template files that their content can be changed in runtime when WebIDE generates the code.

This capability is required because templates are generic by nature. When you generate a new project from template you need to fill in some details which are required by the template that you are using. So your template will contain a placeholders (marked by  {{}} ) and the content of those placeholders will be changed according to the input that was entered by the user in the wizard steps.

For example: a master detail template will require from you to specify the oDATA service that you want to use, the fields that you want to show in the master section and the fields that you want to show in the detail section.

To illustrate this please open on the sample.js.tmpl file and review the code under it.

please notice that it contains a line of var projectName = "{{projectName}}" so in runtime WebIDE will replace the content that you have specified under project name with the {{projectName}}.

The last question that needs to be answered how we can control which values will be injected in runtime. The answer is from the model.json file. In runtime WebIDE reads the content which exists under this file and replace the placeholder value with the value of the model. It's very important to understand how to write such models and which attribute we can use.

WebIDE leverage an open source called handlebars.js provides semantic templates. If you want to learn more about what it is and how it works you can read in here: Handlebars.js: Minimal Templating on Steroids

Coding the right pane plugin

Like we explain above each plugin contains its own resources, a model file (model.json) and a plugin configuration file (plugin.json) in this section we will create all the relevant resources for our right pane plugin.

In this section it's very important to create the folder and files with the same name as they are created in the blog. Also it's important to keep the folder structure otherwise our plugin will not work.

• Create all the relevant folders under the template resources folder. To create a folder under the resources folder simply select the resources folder > right click > New > Folder
  
  
• Enter the first folder name that we need to create (the name is command) in the dialog and click OK
  
• Repeat the same steps and create the following folder: css,i18n,img,service,view
  • css - will contain all the custom style sheet of your plugin
  • i18n - localization file (will not be covered in this blog post but the idea is the same like any UI5 app)
  • img - will hold the images resources. In our case it will contain only one file which is the right pane icon of our plugin
  • service - the plugin service. The service is the main entry point of the plugin runtime. The service can consume services from other plugins and can expose services to other plugins (expose of services will not be covered in this blog)
  • view - The MVC (model view controller) of our plugin. It's always recommended to develop according to UI5 best practices also if we are developing a plugin. This file will contain our view and controller files.
• Next we will create all the relevant files for our plugin. The first file that we will create is the command file that will be located under the command folder. To create the command file please do the following:
  • Select the command folder
  • Right click > New> File
  • Under file name write Toggle.js.tmpl (this is a template file. We know it by the .tmpl at the end)
    
• Repeat the same steps above and create the following files
  • style.css under the css folder
  • i18n.properties.tmpl under the i18n folder
  • plugin.png under the img folder (please download the plugin.png from this blog post and import it to the folder)
  • Pane.js.tmpl under the service folder
  • Pane.json.tmpl under the service folder
  • Pane.controller.js.tmpl under the view folder
  • Pane.view.js.tmpl under the view folder
  • plugin.json.tmpl under the resources folder
• After creating all the resources your plugin resources folder should look like the following:
  
  
• Next we will write the code inside each one of the files. We recommend to you to write the code on your own and not just copy and paste it, that's because we want you to be a Ninja and in order to be one you must write the code on your own
  • model.json - This file contains the UI config of the template wizard.
    The source code  can be found here: https://jsfiddle.net/ranhsd/3trc7xdd/
    after this step you can run the plugin again (like we did above) but this time you will see different user interface in the second step. The user interface will be different because we change the model.json file. A quick look on the model.json file will show that it contains the configuration of the plugin UI (CheckBox, TextField etc..)
  • plugin.json.tmpl - this file contains all the plugin configuration. It contains which services are required for our plugin and which services our plugin expose to other plugins. Moreover it contains the configuration of the toggle command that the plugin will react to (the toggle command is the command that open/close the right pane).
    The source code can be found here: https://jsfiddle.net/ranhsd/33rmyhpb/
  • rightpane.js - this file contains all the code that will be executed before the plugin is being generated and after the plugin generated. The source code can be found here: https://jsfiddle.net/ranhsd/0zpna5br/
    
  • toggle.js.tmpl - this file will contain the code of the toggle command. This command responsible to open/close the right pane. The source code can be found here: https://jsfiddle.net/ranhsd/qn080tpa/
  • style.css - the style sheet of our plugin. Currently it contains only one class because our plugin is empty. The source code can be found here: https://jsfiddle.net/ranhsd/wzhbr87n/
  • i18n.properties.tmpl - the localization file that will contain all the custom texts that will be displayed in our template wizard. Because localization of template wizard will not be cover on this blog you can just copy and paste the code. The source code can be found here: https://jsfiddle.net/ranhsd/qwdm77dz/
  • Pane.js.tmpl - This file will contain the code of the plugin service. This service is the main entry point of our plugin and it will contain methods that will be executed by the WebIDE framework in runtime. The most important methods here are configure there we will include our plugin style sheets and getContent there we will initiate the plugin UI. Notice that in this method we check if the user checked the MVC option in the wizard step and if it was checked by  the user we will initiate a new View and Controller . The source code can be found here:
    https://jsfiddle.net/ranhsd/j6xw2321/
  • Pane.json.tmpl - This file contains the configuration of our service. Configuration of plugin service in WebIDE is done in via JSON files. The most important thing to understand is the extends key because in order to create a service for a right pane plugin our service must extend from sap.watt.common.service.ui.Part which is the the interface for all the UI WebIDE extensions. The source code can be found here: https://jsfiddle.net/ranhsd/wkhktzds/
  • Pane.controller.js.tmpl - This file contains the code of the UI5 controller.
    This file will be generated only if the user checked the Include Model View Controller Code in the wizard step.  The source code can be found here: https://jsfiddle.net/ranhsd/L17yj2c4/
  • Pane.view.js.tmpl - This file contain the code of the UI5 view. Because the focus of this blog is not on the plugin UI but on the template wizard our plugin will contain only a button with "Hello World" text.
    This file will be generated only if the user checked the Include Model View Controller Code in the wizard step.  The source code can be found here: https://jsfiddle.net/ranhsd/4y8ghh0u/

That's all the code that we need for our right pane plugin template. The last things that left now is to test it.

Test our template

In order to check that everything work as expected please do the following:

1. Select the plugin.json file which located under the WebIDEPlugins folder
2. Right click Run > Run Plugin Project. A new Web IDE instance will be opened in new tab
3. Go to the new Web IDE instance and go to File > New > Project From Template to open Web IDE template wizard
4. Change to Plugin Development category and select Right Pane tile from there. Then click on Next
5. Give some name to the project like: myFirstRightPane and click on Next
6. Give a name to your plugin rightpaneplugin, a short description , and under command write Toggle. Also make sure that Include Model View Controller Code is checked
   
   
7. Click Finish and you will see a new project with the name myFirstRightPane under your workspace. This project contains your right pane plugin.
   
8. Close the Web IDE tab (where you generate the right pane plugin) and return to the other Web IDE instance (the one that not run in debug mode)
9. Right click on Workspace and then click on Refresh in order to refresh your Workspace.
   
10. Notice that a new project of myFirstRightPane added there expand this folder and select the plugin.json file
11. Right click Run> Run Plugin Project. A new Web IDE instance will be opened
12. The new Web IDE instance will contain an additional icon on the right pane
    
    
13. Click on this icon the right pane that we just generated will be open and you will see a button with Hello World text
    

a video on how to test your plugin:

All the source code for part #2 can can be found under the following GIT repository: GitHub - ranhsd/WebIDEPlugins: Repository contains different WebIDE plugins so you can clone it into your Web IDE instance and run it.

That's it

Normally we can use Standarad Tile if our requirement is satisfied using StandaradTile but in some situation we would need to use customTile control to satisfy our requirements.

Custom Tile control is basically used to display the application specific data in the Tile control with customized look and feel.

The tile width would be 8.5em and height would be 10em.

Let us see how to create the custom Tile step by step :-

Step 1:- Now we will create a customTile to display Student's ScoreCard . We would display the percentage obtained in 2 semesters and in the middle of the Tile we would display the average of both the semesters.

Now for that firstly we need to write the following code in our view file (xml format) :-

<CustomTile borderVisible="true" class="sapUiSmallMargin">

  <content>

  <VBox>

  <l:VerticalLayout>

      <l:HorizontalLayout>

  <Text text="Student's Performance" class="sapUiTinyMargin sapUiMediumMarginBottom"></Text>

      </l:HorizontalLayout>

     <l:HorizontalLayout class="sapUiTinyMargin">

  <Text text="95%" class="sapUiTinyMargin sapUiLargeMarginBegin sapUiMediumMarginBottom"></Text>

     </l:HorizontalLayout>

    <l:HorizontalLayout class="sapUiTinyMargin lay">

  <Text text="96%" class="sapUiLargeMarginBegin"></Text>

    </l:HorizontalLayout>

   <l:HorizontalLayout class="sapUiTinyMargin">

   <Text text="93%" class="sapUiLargeMarginBegin laybnch"></Text>

  </l:HorizontalLayout>

  <l:HorizontalLayout>

  </l:HorizontalLayout>

  </l:VerticalLayout>

  </VBox>

  </content>

</CustomTile>

Remember that to display content inside the customTile we will have to wrap all the controls in a layout. For example here we are using VBox.

To arrange the content properly inside the custom Tile I have also used predefined css margin classes.

When we run the above code the output would be as shown below:-

Step 2:- Now our tile is created we need to work on its look and feel. Now to change the tile's border to rounded corners we need to apply css .

For that I made a class and applied that class to customTile control

The code for it is as follows:-

.tileborder{

  border-radius: 10px 10px 10px 10px!important;

  -moz-border-radius: 10px 10px 10px 10px!important;

  -webkit-border-radius: 10px 10px 10px 10px!important;

  border: 2px solid #b8b6b8!important;

    }

After applying this the output would look like as shown below:-

Step 3:- Now if we want to change the background of the customTile that also we can do that applying css .

To change the background of Tile I have applied the background-color property to the customTile . and After that the output appears as shown below:-

This is how we can create custom Tile and change the look and feel according to our need.

I have already been working with Smart template for one month. Since now no frontend JavaScript code for application is generated but instead the template maintained centrally by SAP is used in the runtime, so it might be a little bit difficult for trouble shooting when you meet with issues, for example, the object page is blank after navigation, or some field in object page is empty, and so on.

I tried to explain my personal understanding about how object page is rendered in the runtime. For list report page, the logic is the same. Since I am not expert on smart template, so please kindly point it out if there is something wrong in this blog

Per my understanding, I will explain the technical implementation of Smart Template as: An XML view with hierarchical XML fragments where Smart Controls works with the help of OData annotation.

Design time

Where do we start to do self-study on Smart Template?

Switch any one of application generated by Smart Template to debug mode using Ctrl+Alt+Shift+P, refresh and you can observe the following XML files are loaded. The Details.view.xml contains the overall definition of object page view.

Have a look at the source code of this xml view file, you can find the object page consists of six building blocks, each block is included in the object page via fragment. This is the reason why you could also see the download of these six fragment files from the above screenshot.

The dedicated facets we see in object page are included in Sections fragment.

So open Sections.fragment.xml.

Finally, open Facet.fragment.xml view:

Till now, the source code of these template files have perfectly explained why you have to define annotations such as LineItem and Identification etc. The annotations you find in the template file work as a contract between Smart Template and developers who consume them. If developers strictly follow the protocol, the whole thing orchestrates well.

Runtime

How are the above mentioned fragment, extension point and other stuff loaded in the runtime? You should already recognize several tags like with, repeat and if in XML view. How are these tags parsed in the runtime?

Switch to debug mode, in Chrome development tool click Sources tab, Ctrl+O and type "XMLPre", there will be auto completion for search result. Choose XMLPreprocessor-dbg.js:

Since the details.view.xml is loaded in the runtime into memory as a DOM and parsed via depth-first search recursively, this is so called "Pre-Process" as indicated by the file name XMLPreprocessor-dbg.js itself. In this file you can find a big SWITCH CASE statement and each tag is handled in different case statement accordingly.

For example, in XML file it is defined that the template:repeat operation will only be performed if the test defined by formatter sap.suite.ui.generic.template.js.AnnotationHelper.hasBreadCrumbs has returned true.

In the runtime, the evaluation would be debugged as below:

The callstack could be found below:

You can find detail log about this pre-processing result in Console tab of Chrome development tool with filter "XMLPreprocessor".

How to get pre-processing result

Set a breakpoint on line 187 of XMLView-dbg.js, and the XML source code is just stored in variable this._xContent.

If you open converted xml file, you can find that all place holders via "{ } "defined in template file like Details.view.xml are now filled with actual value provided by annotation.

Annotation datasource

In manifest.json file data source is defined which consists of two parts: the remote one coming from backend and the local one, annotations.xml contained in project folder:

This is the reason in Network tab you can observe there are two sequential http requests for the remote one and local one.

This is an example of remote annotation:

This is an example of local annotation:

OData metadata merged with Annotations

The two annotation data sources will be merged with OData metadata in line 187 below:

All subsequent processing are done based on this MERGED data model.

Hope this blog can shed light on your smart template related trouble shooting process.

Recently I need to put my own XML view into the application generated automatically by Smart Template. And I already found there is a question posted in forum Smart Templates: Custom View on Object Pageasking for how to achieve it. So I write this blog for step by step guide.

Better to read first

It would be good if you have a draft understanding about how your application generated by Smart Template is rendered at runtime. You can read this blog My understanding about how object page in Smart Template is rendered for detail.

I just use an example to demonstrate. In the screenshot below, the red facet is automatically generated by Smart Template. The blue fact is actually rendered by my custom XML view.

Data binding in custom view

In my XML view I have a text with label "Long Text" and text bound to path = "to_LongText" and value = "long_text".

What do these two properties mean? In SEGW you can get answer: to_LongText is navigation property and "long_text" is one of the property of the target type Z_I_Order_longtextType.

And the content of this property is stored in database table ZORDER_LONGTEXT, field LONG_TEXT, so you finally see the content "Jerry long text" in UI.

Register your custom view into manifest.json

You should declare your custom view usage in manifest.json file.

The most important part is the line marked in purple since it is responsible to tell framework exactly which postion your custom view should be put.

The naming convention is : <extension point name> + <entity set name> + <existing facet id>.

Let me illustrate them further using example. For the screenshot above, if we translate "AfterFacet|Z_C_Order|GENEJERRY" into human readable sentence, it should be: put my custom view AFTER ( indicated by extension point: AfterFacet ) the automatically generated facet with id "GENEJERRY". The binding context for custom view is "Z_C_Order".

For the facet id "GENEJERRY", you could find from annotation.xml in WebIDE.

How we can know which kinds of extension point are available in object page template? Switch your application to debug mode via Ctrl+Alt+Shift+P, refresh the application and you could observe lots of XML fragments are loaded.

Among them there is one fragment Sections.fragment.xml which is the place holder for all facets displayed in object page view.

Then you can find SAP has defined the AfterFacet extension point with naming convention format "AfterFacet|{entitySet>name}|{path: 'firstLevelFacet>" which enables partner & customer to include their own view there.

event handling in custom view

In my custom XML view, I have declared a function onPressed to semantic event press, which is implemented in corresponding controller of custom view.

The implementation of this press event is to simply increase the counter displayed in custom view.

Source code involved in this blog

I attach all source codes here for your reference.

controller

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("zsandbox.ext.controller.note", {  onInit: function() {   }  },  onPressed: function() {      var label = this.getView().byId("Jerry_label2");      var currentText = label.getText();      currentText = currentText || 0;      currentText = parseInt(currentText) + 1;      var data = { count: currentText};      label.setModel(new sap.ui.model.json.JSONModel(data),"json");  }
});
});

xml view

<core:View xmlns:core="sap.ui.core" xmlns:ui="sap.ui.layout" xmlns:layout="sap.ui.layout" xmlns:ca="sap.ca.ui" xmlns="sap.m"
xmlns:form="sap.ui.layout.form" xmlns:crm="sap.cus.crm.lib.reuse.controls" controllerName="zsandbox.ext.controller.note"><ui:form.SimpleForm id="jerryform" layout="ResponsiveGridLayout">  <ui:content>   <Label id="Jerry_label1" text="Long Text"></Label>   <Text id="Jerry_Text1" binding = "{to_LongText}" text="{long_text}"></Text>   <Label id="Jerry_label2" text="{json>/count}"></Label>   <Button id="Jerrybutton" text="Click me" press = "onPressed"></Button>  </ui:content></ui:form.SimpleForm></core:View>

manifest.json

One of my colleagues today asked me this question: Suppose this below is an application generated by Smart Template, and I would like to debug how the back button is implemented. Since the whole UI page is implemented by framework, I don't know where to set breakpoint. How to proceed?

Here below is my process about how to find the back implementation in framework file within several minutes.

1. Use Chrome extension Inspector ( the UI5 tab in Chrome development tool below ) to figure out that the button is located in UI area sap.uxap.ObjectPageHeader.

Based on the learning in My understanding about how object page in Smart Template is renderedI search by keyword "Back" in file Details.view.xml first, no result.

2. Then search in next xml file NavigationBar.fragment.xml, this time the button is found.

Perform global search via Ctrl+Shift+F with key word "_templateEventHandlers.onBack", no result.

Then search "_templateEventHandlers" instead, this time TemplateAssembler-dbg.js is found.

Unfortunately it is difficult to judge the type of _templateEventHandlers simply from context code as it is filled in a generic way.

3. Perform search on onBack instead, and the result is what I am looking for:

Set a breakpoint and click back button to verify: breakpoint is triggered:

So the trick here is the keyword I am using to search in a tentative way.

• first time search by _templateEventHandlers.onBack, no result
• second time search by _templateEventHandlers, has result but not useful
• third time search by onBack, done.

Introduction

Just some tips I would like share to speed up development :

• Chrome Devtools
• Gulp
• Browser-sync

In my case, I develop first SAPUI5 application in WebIde then I clone my Git repository locally.

Chrome workspaces

You probably already know dev Tools in your favorite browser (I guess Chrome ;-) ) and use it to change in live your css files.

But do you use workspaces to save your changes directly on your disk ?

If not, you have to try it ! It's a really time saving !

https://developers.google.com/web/tools/setup/setup-workflow

It's not a new functionality but too unknown ...

It's just two steps :

- in devtools / sources tab, add folder to workspace by right clicking (allow chrome to access to the folder)

- Map your files

Now, when you change your files (in this exemple, css) in devtools, your source files will be directly updated.

Note that Sublime Text editor automatically check files changes. So when you back to your editor, your last version is shown.

Very appreciated !

SSRR Cycle : Save, Switch, Reload, Replay

When we work on front-end development, we unending loop in SSRR Cycle.

It could be very cool to modify source files and inject in live to our browser to see modifications without manual update.

Good news, we can do it !

Basically, we have to :

- Watch our source files to detect the changes

- Sent to browser files up to date

- Refresh web page

What do we need ?

- Gulp to automate our workflow (http://gulpjs.com/)

- Browser-sync to synchronise files (https://www.browsersync.io )

So, once Gulp and Browser-sync have been installed via NPM, we have to create a gulpfile.js

A simple "Hello world" file could look like this :

var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello World !');
});

In Node.js command prompt, execute gulp in the folder where is your gulpfile.js

If we add in our file :

gulp.task('myfirst_step', function() {
console.log('My first step ...');
});

And run instruction gulp myfirst_step

To chain tasks,

gulp.task('default', ['myfirst_step', 'mysecond_step']);

Now, a very interesting function to wacth files changes.

Add this task in your file and run gulp Watch

gulp.task('watch', function () {
gulp.watch('./*.css',  function() {
console.log('CSS changed'); });
});

In your console, you should see something like this:

Change a css file present in your folder.

And now, you should have :

So, now we can add browser-sync to have a gulpfiles.js looks like this one :

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('watch', function () {
gulp.watch('./*.css',  function() {
console.log('CSS changed');
gulp.src('./*.css').pipe(browserSync.stream()); });
});
gulp.task('init', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./"
}    });
});
gulp.task('default', ['init', 'watch']);

Run Gulp

Now, you can open several browser with url http://localhost:3000/ and when you change css file, all browser are updated !

Automate git repository update

It's possible to automate Git actions using gulp-git ressources.

We can add something like this :

gulp.task('add', function(){  return gulp.src('./*')    .pipe(git.add()); });
gulp.task('commit', function(){  return gulp.src('./*')    .pipe(git.commit('new commit')); });
gulp.task('push', function(){  git.push('origin', 'master', function (err) {    if (err) throw err;  }); });

Then why not add a watch step to update Git repository when a file is changed

gulp.task('release', function () {
gulp.watch('./release.txt', ['add', 'commit', 'push']);
});

Now, when I updated my release.txt file, my Git repository is updated.

Summary

In summary, in SAPUI5 context, we can :

• Create SAPUI5 application using Webide
• Clone Git repository from HCP
• Run Gulp script with Browser-sync
• Work in my favorite Editor
• Check in live my changes on several browsers
• Update Git repository
• Deploy on HCP

Introduction

Maybe all of you know what is a view in a database: a view is an entity that is not persistent; it is defined as the projection of other entities. In this H2G we are going to see how to build a special kind of view, a CDS (Core Data Service) View, which contains some new technology concepts called Annotations.

Let's move step by step.

What's CDS?

"CDS is an infrastructure layer for defining semantically rich data models, which are represented as CDS views. In a very basic way, CDS allows developers to define entity types (such as orders, business partners, or products) and the semantic relationships between them, which correspond to foreign key relationships in traditional entity relationship (ER) models. CDS is defined using a SQL-based data definition language (DDL) that is based on standard SQL with some additional concepts, such as associations, which define the relationships between CDS views, and annotations, which direct the domain-specific use of CDS artifacts."

(cit. Enhanced ABAP Develoment with Core Data Services (CDS)&lt;/title&gt;&lt;meta name=&quot;news_keywords&quot; content=&qu…)

In our case we are going to use CDS views combined with OData annotations.

"The term annotations implies attaching data to another piece of data. Annotations are used in different areas; one area would be the semantic annotations, which determines what the OData properties contain, e.g. a phone number, a part of a name or address, or something related to a calendar event or an analytic query. This type of annotations are important for the applications running on mobile devices to seamlessly integrate into contacts, calendar, and telephony.

The second area is the capability annotations that describe the possible interactions defined by OData's uniform interface and the supported parts of a concrete service. These annotations will tell whether an entity set allows inserts, updates, or deletes, whether it requires a filter or which properties can be used in filter expressions. They also advertise capabilities that go beyond the base set defined by OData, e.g. whether an entity set allows free-text search via an SAP-defined query option." (cit. OData Model Editor for SAP Web IDE)

This means that with annotations, which I've already talked about in  my previous blog here, we can define, in the view itself, how data have to appear when we are consuming them.

In particular, if we build an app starting from Smart Templates, this can automatically get the information regarding how to display backend data, from the annotations specified in the CDS views on which the service is defined.

In this blog we are going to see exactly this: we will start by building a CDS view on the ABAP backend, we will define some annotations in the view, we will end by building an app from Smart Templates with SAP Web IDE and we will integrate the annotation information coming from the backend with some other annotations defined in the app itself.

This blog has been split in 3 parts:

Objective

If you have followed my previous blog on Smart Templates you have seen how to create a new Smart Templates app from scratch. The annotation file was created as a XML file in the application itself. Here we want to do the same: obtain the same result, the same final application, but putting as many annotations as possible in the CDS view and create only a very small annotation file in the app.

Prerequisites

1. JRE version 1.6 or higher, 32-Bit or 64-Bit
2. Eclipse Mars (4.5) or Luna (4.4)
3. SAP GUI: SAP GUI for Windows 7.40 or SAP GUI for Java 7.40 for Apple Mac or Linux (SAP GUI Download)
4. Microsoft VC Runtime

Steps

1. Installation of Eclipse and its ADT plugin
2. DDL Source creation
3. Service registration and Smart Template creation in the NW Gateway and consumed by Smart Templates
4. Configure HANA Cloud Connector and create a destination
5. Create a new app from a Smart Template
6. Enhancing the annotation

Step 1: Installation of Eclipse and its ADT plugin

In order to be able to create CDS Views you need first to configure your development environment. The development tool for this kind of object is Eclipse equipped with the SAP ADT plugin. In this chapter we are going to see how to prepare your development environment. Before you start I'm assuming you have already installed a JRE and a SAP Gui on your workstation. They are both needed for our environment. Eclipse can be downloaded directly from Eclipse Downloads

1 - Select one of the two versions you want to use, Luna or Mars (I'm using Mars in this guide), and download it on your workstation

2 - Extract it in the desired folder

3 - Run Eclipse by double clicking on its icon

4 - Choose for now the proposed workspace

5 - Go on Help --> Install new software

6 - Paste the link (https://tools.hana.ondemand.com/mars) (updated info can be found here) and click on Add; specify a name for this plugin and click on OK

7 - Select ABAP Development Tools for SAP NetWeaver and choose Next

8 - On the next wizard page, you get an overview of the features to be installed. Choose Next

9 - Confirm the license agreements and choose Finish to start the installation

10 - Restart Eclipse when required

11 - After restarting click on Go to Workbench

Step 2: DDL Source creation

In order to create a CDS View we first need to create a DDL Source. Such kind of object can be created in Eclipse by the following procedure:

1 - Create a new ABAP project by clicking on the menu File --> New --> Project --> ABAP --> ABAP Project and then click on Next

2 - Enter the System ID, the Application server and the Instance number and click on Next

3 - Enter the Client Number, the Username, the Password and the chosen Language then click Next

4 - Specify a name for the project or leave the proposed one then click on Finish

5 - You will be asked to open the ABAP Perspective. Answer Yes

6 - A default favorite local package should be already available for you. Right click on this package and choose New --> Other ABAP Repository Object. Type "ddl" in the filter box, choose DDL Source and click on Next

7 - Give a name to the DDL Source (i.e. Z_SAMPLE_DEMO_SOLI) and a description (i.e. Sample Demo Sales Orders Line Items) then click on Next

8 - Click again on Next at the Selection of Transport Request screen

9 - Use the template Define View and click on Next

10 - We are ready to create our first simple view. Paste the following code in the editor

@AbapCatalog.sqlViewName:'Z_VW_SOLITEMS'

@AbapCatalog.compiler.compareFilter:true

@AccessControl.authorizationCheck:#CHECK

@EndUserText.label:'Sales Order Line Items'

defineview Z_Sample_Demo_Soli

  asselectfrom sepm_isoi as SOLItems

{

  key SOLItems.salesorderitemuuid,

      SOLItems.salesorderuuid                     as SalesOrderID,

      SOLItems.salesorderitem                     as ItemPosition,

      SOLItems.productuuid                        as ProductID,

      SOLItems.shorttextgroupuuid                 as NoteID,

      SOLItems.transactioncurrency                as CurrencyCode,

      SOLItems.grossamountintransaccurrency       as GrossAmount,

      SOLItems.netamountintransactioncurrency     as NetAmount,

      SOLItems.taxamountintransactioncurrency     as TaxAmount,

      SOLItems.productavailabilitystatus          as StatusAvailability,

      SOLItems.opportunityitem                    as OpportunityItem

}

11 - Save the file and activate it, you should not get any error

12 - You can test the view by pressing CTRL+F11 on Windows or by clicking on the green play button on the toolbar. When asked, choose to run the view as an ABAP Application. You should get something like this

13 - Repeat the same steps for creating a new DDL Source named Z_SAMPLE_DEMO_PRODUCTS with the description Sample Demo Products

14 - Paste this code in the view, save and activate it

@AbapCatalog.sqlViewName:'Z_VW_PRODUCTS'

@AbapCatalog.compiler.compareFilter:true

@AccessControl.authorizationCheck:#CHECK

@EndUserText.label:'Products'

defineview Z_Sample_Demo_Products

  asselectfrom sepm_iproduct as Products

  association[1..*]to Z_Sample_Demo_Soli as _SOItems  on  $projection.productuuid = _SOItems.ProductID

  association[1..1]to sepm_iproductt     as _ProductT on  $projection.productuuid = _ProductT.productuuid

                                                        and _ProductT.language      ='E'

  association[1..1]to sepm_ibupa         as _Supplier on  $projection.supplieruuid = _Supplier.businesspartneruuid

{

  key Products.productuuid,

      Products.product                                                       as ProductID,

      Products.producttype                                                   as TypeCode,

      Products.productcategory                                               as Category,

      _ProductT.productname                                                  as Name,

      'EN'                                                                   as NameLanguage,

      _ProductT.productdescription                                           as Description,

      'EN'                                                                   as DescriptionLanguage,

      _Supplier.businesspartner                                              as SupplierID,

      _Supplier.companyname                                                  as SupplierName,

      Products.productvalueaddedtax                                          as TaxTarifCode,

      Products.productbaseunit                                               as MeasureUnit,

      Products.weight                                                        as WeightMeasure,

      Products.weightunit                                                    as WeightUnit,

      Products.currency                                                      as CurrencyCode,

      Products.price                                                         as Price,

      Products.width                                                         as Width,

      Products.depth                                                         as Depth,

      Products.height                                                        as Height,

      Products.dimensionunit                                                 as DimUnit,

      Products.creationdatetime                                              as CreatedAt,

      Products.lastchangeddatetime                                           as ChangedAt,

      concat(concat('/webapp/images/',Products.product),'.jpg')              as PictureUrl,

      Products.supplieruuid,

      _SOItems

}

15 - You can test this view as well by pressing the play button

Let me spend a few words on these two views.

In the first view, Z_SAMPLE_DEMO_SOLI, I'm just selecting some fields form the EPM table sepm_isoi containing all the sales orders line items. I'm asserting that the key for this table is SOLItems.salesorderitemuuid and that the fields have some predefined names.

In the second view, Z_SAMPLE_DEMO_PRODUCTS, I'm creating an association between the table sepm_iproduct and the view defined earlier, so that for each product I can see all the sales order line items related to that product. Further to this I'm also doing another association with the table sepm_iproductt in order to get the name and the description of the product and with the sepm_ibupa to get some information about the business partner as well.

NOTE 1: probably you have noticed that I'm creating a PictureUrl column by concatenating the following 3 pieces:

'/webapp/images' the name of the product '.jpg'.

I did it in this way to reflect the work I did in my previous blog with smart templates. Of course you could extract the PictureUrl field directly from the database, but in this case, after creating the app in SAP Web IDE, you should add a new section in neo-app.json file to map the backend resource.

NOTE 2: at the end of the view you see I've also added "_SOItems": this means that I want to show also all the fields of the first view Z_SAMPLE_DEMO_SOLI. In this way, the service will present it as a new entity linked to the first one in the metadata.xml file.

Let's continue now with the second part of this blog to understand how to create a new service for this view and how to consume it in a Smart Template app.

Introduction

This is the continuation of the blog started here!

This blog has been split in 3 parts:

Step 3 - Service registration and Smart Template creation in the NW Gateway and consumed by Smart Templates

In this part we are going to see how to build an SAP NW Gateway service based on the two tables created in the previous part. The service will be automatically created by the CDS infrastructure: we just need to publish it.

Once published, we can easily consume it by building a new application with SAP Web IDE starting from a Smart Template.

What we want to publish is just the main view, which, in our case, is the one named Z_SAMPLE_DEMO_PRODUCTS; with ABAP 7.5 we no longer need to go in the transaction SEGW and create a new project for the service and then publish and register the service: we just need to add the annotation

@OData.publish:true

to the first view and the CDS infrastructure will take care of creating the service for us.

Let's see how to do it.

1 - Within Eclipse, open the first view

2 - Add the above annotation at the beginning of the file just after the 4th row, save the file and activate it

3 - The service should have been created successfully. In order to check if this is true, open the SAP GUI, connect to your backend and run the transaction

    /n /iwfnd/maint_service

    A list of all the available services appears: let's try to add the one we just created. Click on the button Add service

4 - Enter the system alias ("LOCAL" in our case) and the first part of the name of the service. Since the service is automatically created by the CDS infrastructure a standard name is assigned to it: it's the concatenation of the view's name and the suffix "_CDS". Click on the button Get Services and you should get the desired service

5 - Select the service and click on the button Add Selected Services

6 - In the Package Assignment configuration click on the Local button if you want to put this service in the $TMP package and then click on the green mark button

7 - The service has been added successfully

8 - Click on the back button

9 - Now if you filter on the Technical Service Name by the text "Z_SAMPLE*",  you should get your new service.

10 - Select the service row and click on the button SAP Gateway Client

11 - The SAP Gateway Client opens: the path to the service is automatically displayed. Just click on the Execute button and you will get the content of the service

12 - Looking at the service's response you can also get the complete URL path to the service. Copy it in the clipboard

13 - Open an internet browser (i.e. Chrome) and paste this URL in, then append the string "$metadata" and go to that URL: you should get the metadata information for the service.

14 - Congratulations! Your service is up and running!

Step 4 - Configure HANA Cloud Connector and create a destination

The service is ready! We just need to

1 - Start our HANA Cloud Connector

2 - Configure a virtual host for our backend system

3 - Create a destination to this virtual host inside our HCP

Step 5 - Create a new app from a Smart Template

Once your destination is in place you can create a new app from a Smart Template to start using our new service annotation.

1 - Open SAP Web IDE

2 - Do File --> New --> Project from Template

3 - Choose the Smart Template and click Next

4 - Assign a name to the project and all the required information, then click Next

5 - After selecting the Service Catalog source, enter the name of your ABAP system, filter by the string "Z_SAM" and you should find the required service. Select it and click Next

6 - At this point we guess we should have some annotation file coming from the service. Unfortunately this doesn't happen because we have not yet defined any annotation in the main view

7 - Let's do it! Go on Eclipse and add the following piece of code just after the odata.publish statement:

@UI.headerInfo:{

    typeName:'Product',

    typeNamePlural:'Products',

    imageUrl:{value:'PictureUrl'},

    title:{value:'Name'},

    description:{value:'Description'}

}

With this code we are just defining an annotation for the UI.HeaderInfo term located in the Object Page.

Save the file and activate it.

8 - Now (unfortunately you cannot refresh SAP Web IDE at this point, you need to refresh the page and recreate the Smart Template app again), getting to the annotation selection screen again, you should be able to see an annotation file coming from the service. You don't have to select anything, just click Next to continue

9 - Define the data binding for the Odata Collection and the Odata Navigation and click on Finish

10 - Your app is ready! Trying to run it, you won't get anything useful, because we have not yet annotated anything for the ListReport page.

11 - Looking at the manifest.json file, you can see that on the main service, which is the one we have created, there are attached two annotation files: one is coming from the service itself and the second one is located just inside the application. The first one is applied first, then the second is applied just over the first one

12 - By opening the annotation.xml file in the annotations subfolder with the AM, you can clearly see the part coming from the service and the one defined in the file itself. The part coming from the server cannot be deleted: it's simply grayed out.

13 - Since we want to proceed step by step in building our application, you can delete the UI.Facets term, by clicking on the bin icon and saving the file.

Now continue with the last part, to understand how to enrich the CDS view with further annotations.