OVP List Card2 - Condensed & Bar

Now we will add bar chart on list card.

In this blog, we will create List Card like this.

Note. In this example, "UnitInStock" value in Product entity is used to present percentage values. The reason is there is no actual percentage value in Northwind oData services. 

Step 1. Set annotation - Add DataPoint

To show bar chart, we need to prepare DataPoint annotation.

Select "Product" entity type and click "+" button to add DataPoint annotation.

Type in right values for Qualifier and Title, select value as "UnitsInStock". Qualifier should be any unique value for this entity.

Step 2. Set annotation - Set Property Annotation

To display percentage bar chart, we need to set value as percentage type. For this, click "+" button in Property Annotations and find "UnitsInStock".

For "UnitsInStock", click "+" button to add "Unit" property. 

Set unit as "%".

Step 3. Set annotation - Set CriticalityCalculation (bar chart color)

Let's go back to DataPoint we set in step 1. Click "+" button in DataPoint value and add CriticalityCalculation.

To set CriticalityCalculation, set direction first. 

For the direction of "Maximize", 

Chart Color	Symantic Name	Condition
Green	Good	value >= ToleranceRangeLowValue
Yellow	Critical	ToleranceRangeLowValue > value >= DeviationRangeLowValue
Red	Error	DeviationRangeLowValue > value

Create KPIs with data points and criticality calculation in a SAP Fiori Overview Page
https://blogs.sap.com/2018/01/22/create-kpis-with-data-points-and-criticality-calculation-in-a-sap-fiori-overview-page/


Note. For the direction of "Minimize", 

Chart Color	Symantic Name	Condition
Green	Good	value < DeviationRangeLowValue
Yellow	Critical	DeviationRangeLowValue <= value < ToleranceRangeLowValue
Red	Error	ToleranceRangeLowValue <= value

Step 4. Set annotation - Add LineItem

Click "+" button in Annotations and add LineItem.

Click "+" button in LineItem to add DataField.

Set DataField value as "ProductName".

Click "+" button in LineItem to add DataFieldForAnnotation.

Set Annotation as we set in step 1. ("@UI.DataPoint#DP_UnitsInStock")

Step 5. Add Card

Select List template. And set List Type as "Condensed" and List Flavor as "Bar".

Now it is ready. Rut this as SAP Fiori Launchpad sandbox.

Source Code:

https://github.com/shineum/ovpbasic/tree/BarChartList

OVP List Card1 - Condensed & Standard

Let's create List Card.

In this blog, we will create List Card like this.

In this blog, we will create List Card like this.

Step 1. Prerequisites

To create cards in OVP, there are three things to set.

- oData service entity

- annotations

- card type (or templates) and configurations

For connecting oData services, it was handled in previous posts.

It is assumed that NorthWind oData source is connected.

Step 2. Add Annotation File

Annotations are the settings that related to the way how to represent oData.

Depending on the OVP projects, we may need multiple annotation files.

So it is recommended to create the folder for annotation files. (webapp/annotations)

And let's create annotation file

Set annotation file name and select oData Service.

 

Annotation file for Northwind oData service is created.

Step 3. Open Annotation File to Set

In this example, "Customers" entity will be used.
Select "Customer" entity type and click "+" button to add LineItem annotation.

LineItem annotation is added. Click "+" button to add data fields.

For first data field, set value as "ContactName".

Add two more data field and set Values as "CompanyName" and "Phone" in order.

Step 4. Add Cards

Add cards.

Set datasource.

Select list type template.

Set entity set, title and subtitle.

(Optional) Set List Type as "Condensed". (if it is not set, default setting is "Condensed".)

Now it is ready. Rut this as SAP Fiori Launchpad sandbox.

Source Code:

https://github.com/shineum/ovpbasic/tree/ListCard

About Fiori OVP

The overview page (OVP) is a data-driven SAP Fiori app type and floorplan that provides all the information a user needs in a single page, based on the user’s specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to information quickly.

Each task or topic is represented by a card (or content container). The overview page acts as a UI framework for organizing multiple cards on a single page. The overview page is based on SAP Fiori elements technology, and uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of card allow you to visualize information in an attractive and efficient way.

from SAP
https://experience.sap.com/fiori-design-web/overview-page/

Creating a Fiori Overview Page (OVP) with the Northwind OData service

In previous post, oData server is set. 

Then we'll create Fiori OVP project from template.


Step 1. Run WebIDE & login

http://localhost:8080/webide/index.html


Step 2. Create Project from Template

Click Workspace > Right Click > New > Project from Template

Step 3. Create Project from Template

Select Category : All categories

Find "Overview Page Applications"

Step 4. Set Project Name

Step 5. Select Data Service

Sources : Service URL

System : NorthWind

Service : /V2/Northwind/Northwind.svc

Click "Test"

Step 6. Customize template

Step 7. OVP project is created

Step 8. Run as SAP Fiori Launchpad Sandbox

Step 9. Empty OVP

References

Overview Pages
https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.52.2/en-US/c64ef8c6c65d4effbfd512e9c9aa5044.html

Connect remote systems in SAP WebIDE Personal Edition

You can define service destinations to access remote systems as required. 


FYI. For SAP Cloud users, add connection in SAP Cloud Platform Cockpit


For Personal Edition users, you need to set it manually. 


Step 1. 

Create a file with the same name as your remote system in the following location.

C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations


Step 2.

Open the file you created and add the following configuration, replacing the placeholders with values specific to your system. 


For ABAP System 

File Name : "TEST"

 Description=[description]

 Type=HTTP

 TrustAll=true

 Authentication=NoAuthentication

 Name=[Name]

 URL=[Server URL]

 ProxyType=OnPremise

 WebIDEUsage=odata_abap,ui5_execute_abap,dev_abap

 WebIDESystem=[Name]

 WebIDEEnabled=true

 sap-client=[Client ID]

You can set auth info to avoid to login popup.

ex)

Authentication=BasicAuthentication

User=[sap user id]

Password=[sap user password]



For External Services

File Name : "NorthWind"

 
 Description=NorthWind

 Type=HTTP

 TrustAll=true

 Authentication=NoAuthentication

 DestinationProvider=Application

 ProxyType=Internet

 WebIDEEnabled=true

 WebIDESystem=NorthWind

 WebIDEUsage=odata_gen

 URL=http://services.odata.org

References

Connect Remote Systems in SAP Web IDE Personal Edition
https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US/2cf47f37e34c428c97a51057733c0394.html

Creating a Fiori Overview Page (OVP) with the Northwind OData service
https://wiki.scn.sap.com/wiki/display/SAPMOB/Creating+a+Fiori+Overview+Page+%28OVP%29+with+the+Northwind+OData+service

How to install SAP Web IDE locally for trial in Windows

To develop Fiori applications, to use SAP Web IDE as a development tool is highly recommended.

SAP Web IDE is provided to SAP HANA Cloud Platform subscribers.

And also, for off-line development, SAP Web IDE Personal Edition is available.

There is some missing features (plugin / template development, consumption of optional plugins, Problem view, an building an SAPUI5 projects) in Personal Edition.

Please check this URL for details.
https://wiki.scn.sap.com/wiki/display/SWI/SAP+Web+IDE+Personal+Edition



Step 1. Prerequisites

- JRE 1.8 or higher

Download snd Install JDK or JRE
http://www.oracle.com/technetwork/java/javase/downloads/index.html



Step 2. Download SAP Web IDE

Download a right edition file, depending on your purpose and system.
https://tools.hana.ondemand.com/#sapui5



Step 3. Unzip it into right folder

ex) C:\SAPWebIDE



Step 4. Run orion.exe in eclipse folder

ex) C:\SAPWebIDE\eclipse\orion.exe



Step 5. Run web browser and navigate

http://localhot:8080/webide/index.html

Step 6. Create Account

If you are a trial user, create account for off-line test.

Step 7. Login

Login with your account.




Then, you are ready to evaluate or to develop with SAP Web IDE Personal Edition.

About Open UI5

What is Open UI5?

OpenUI5 is an open source JavaScript UI library, maintained by SAP and available under the Apache 2.0 license. OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It’s based on JavaScript, using JQuery as its foundation, and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls, and supports data binding to different models (JSON, XML and OData).

from: http://openui5.org/