Posted on

SAP® Fiori® Elements with SAP® CAPM App – Sample SAP® CAPM App Setup

In this blog, you will see how to set up the setup SAP® CAPM App in SAP® BAS:

 

Table of Contents:

Start the Series from: SAP® Fiori® Elements with SAP® CAPM App

Go to the next Blog from: SAP® Fiori® Elements with SAP® CAPM App – Fiori® Element App

Go to the Course from: Learn SAP® Fiori® Elements from


 

 

1. Create a SAP® CAPM Project to generate sample files and structure. In the BAS CLI you can write:

cds init sample-project

Some of the files created in the project like the data CSV file and the app folder will be added in the coming steps:

SAP® CAPM Project creation

 

2. Go to the db folder and create a file data-models.cds to add the schema:

namespace sampleProject;

entity Products {
  key ID: UUID;
  productName: String;
  category : String;
  price : Decimal;
  description : String; // New field for product description
  image : String; // New field for image URL
}

3. Add sample data values inside the data folder in a CSV file and name it project-Products.csv:

ID;productName;category;price;description;image
"e3b0c442-98fc-1c14-9fb0-c4e9b3c77c63";"Laptop";"Electronics";999.99;"High-performance laptop for professionals";"https://i.ibb.co/WWfNSgp/openui5.png"
"fe3a9ec0-93d6-2f3b-ad7c-c8f330b7606c";"Smartphone";"Electronics";599.99;"Latest model with advanced features";"https://i.ibb.co/WWfNSgp/openui5.png"
"b4e9b3c7-7c63-4e3b-0c44-29fc1c149fb0";"Coffee Maker";"Home Appliances";49.99;"Brews perfect coffee every time";"https://i.ibb.co/WWfNSgp/openui5.png"
SAP® CAPM Data Model

 

 

4. Create a basic service inside the srv folder in the file catalog-service.cds :

using sampleProject from '../db/data-model';
service CatalogService {
entity Products as projection on sampleProject.Products;
}

 

5. We have created a SAP® CAPM App to explore which can be used in a Fiori® Element Template, so let’s start making that.
Note, that this SAP® CAPM App will be used in the Fiori® Element Template, so we need to keep the App running and create a new Project From Template which we will do next.

To run the App we can use the Start Script of the App from the package.json file:

npm run start

or

npm run [watch-project-name]

Running SAP® CAPM App

Posted on

Understanding SAP® Fiori® Launchpad and Tiles Types

 

 

Link to Full Course:
https://www.ui5cn.com/courses/fiori-for-developers

 

  • SAP® Fiori® Launchpad, is the starting point for our developers and users.
  • We will have multiple applications in the Launchpad (which are assigned to us by roles) and Launchpad is also often referred to as the homepage.
  • Each Tile in Fiori® Launchpad® represents one Application.

 

  • The first type of Tiles with Static Text and Icon/Image is Static Tiles, for Example, My Contact Application

 

 

  • The second type of tile or application we can have is the Dynamic Tile which can contain dynamic changing numeric values (representing some form of KPI). For example Timesheet Application, we can go inside this Tile(application) and we can fill our Timecard which then needs to be approved by our manager(s).
  • The KPI it contains also shows from how many days we have last filled out timecard(Missing Days which changes dynamically).

 

 

  • And the third type of application/tile we have is Newsfeed Application Tile. The news feed application tile would be utilizing the RSS Feed and represent news in terms of tiles.

 

 

  • If we go into My Contact Tile then we can see a Split Application(as shown below). In split-screen Application, the screen is divided into a Master and a Detail Page. This is one type of application similar to that we can have list report application, analytical dashboard application, and many more different types.

 

 

Now, how an Application or Tiles are given to a particular user?

  • This is possible with Roles and Authorization. Also, Fiori® follows the Role-Based Principle.
  • If you want to provide a specific application to a user then you just provide them with Roles which is required for that application.
  • Also, we might have multiple types of roles link to an application, for example, in Timecard we can have manager roles to approve a timesheet, user roles to fill and submit a timecard, etc.
  • We will discuss in detail these Authorization concepts in our Fiori® for Developers Course as well(later on).

 

 

For a particular user to see Tiles(or Application) in Launchpad we need to configure 3 Main things:

  • Roles
  • Catalogs
  • Groups

We will see in details how to perform those in Fiori® for Developers Course here:
https://www.ui5cn.com/courses/fiori-for-developers

SAP® Fiori® Blog Series Links :

  1. SAP® Fiori® Launchpad Configuration – Starting with Catalog Creation
  2. SAP® Fiori® – Understanding Fiori® Launchpad (Current Blog)
  3. SAP® Fiori® – Understanding Fiori® Catalogs, Tiles, Roles and Groups (Blog Coming Soon)
  4. Fiori® Applications Types and Architecture (Blog Coming Soon)
  5. Types of Fiori® Apps – Transactional Fiori® Application Overview and Architecture (Blog Coming Soon)
  6. Fact Sheet Fiori® App Architecture | Fact Sheet Applications | Types of Fiori® Application (Blog Coming Soon)
  7. Analytical & KPI Fiori® App Architecture | Analytical Fiori Application | Types of Fiori Application (Blog Coming Soon)
  8. SAP® Fiori® Architecture and Component | SAP® Fiori® Components | Fiori® Architecture (Blog Coming Soon)

 

Posted on

Fiori® For Developers Online Course – Introduction Page

 

Introduction to the Course

Learn and Understand Fiori® Apps Debugging, Development, Deployment and Architecture with Hands-on Exercises. SAP® Fiori® for Developers is an unique course that takes you from the basics to intermediate to advance in a step by step manner. We will understand and deep dive more into the details which we have covered in this course such as:

  • Fiori® Launchpad – How Fiori® Launchpad shows you Role-Based Tiles – Different types of Fiori® Apps
  • The Architecture of Fiori® Apps
  • The Architecture of Fiori® Apps and UI Components
  • Understanding Back-end and Front-end services and components
  • How to Deploy and Configure Fiori® Apps
  • How to Extend Screen Elements, UI, Controllers, and Services in Fiori® Apps with Web IDE
  • And a lot of Debugging to make you Comfortable with Production Scenarios.

 

Link to Full Course:
https://www.ui5cn.com/courses/fiori-for-developers

 

SAP® Fiori® Blog Series Links :

  1. SAP® Fiori® Launchpad Configuration – Starting with Catalog Creation
  2. Understanding SAP® Fiori® Launchpad and Tiles Types
  3. SAP® Fiori® – Understanding Fiori® Catalogs, Tiles, Roles and Groups (Blog Comming Soon)
  4. SAP® Fiori® Applications Types and Architecture (Blog Comming Soon)
  5. Types of Fiori® Apps – Transactional Fiori® Application Overview and Architecture (Blog Comming Soon)
  6. Fact Sheet Fiori® App Architecture | Fact Sheet Applications | Types of Fiori® Application (Blog Comming Soon)
  7. Analytical & KPI Fiori® App Architecture | Analytical Fiori Application | Types of Fiori Application (Blog Comming Soon)
  8. SAP® Fiori® Architecture and Component | SAP® Fiori® Components | Fiori® Architecture (Blog Comming Soon)

 

Refer the Blow Video to Understand More,

 

Posted on

SAP® Fiori® Launchpad Configuration – Starting with Catalog Creation

 

Link to Full Course:
https://www.ui5cn.com/courses/fiori-for-developers

 

  • Step 1 – Login to our system with the newly created user which is DEVELOPER3 and it will ask to change our previous password.

 

 

 

  • Step 2 – Give a new password and there are some pre-checks for the password, some of which include that the password should not be the same as the previous password and it should be having 8 characters. 
  • Step 3 – Using T-Code SU01 we can see login information of the user as well, we can click on information Icon to check the rules and regulations about the password as well.

 

 

  • Step 4 – Now we are in a new User Login and then we have to go into the Fiori® Launchpad using the URL. Now to find the URL for Fiori® Launchpad, go to the Start-up and then using /n go into the Home Screen.

 

 

  • Step 5 – We will see the Fiori® Launchpad and right-click on /UI2/FLP – SAP Fiori® Launchpad and Execute in New Window

 

 

 

  • Step 6 – It opens in Internet Explorer then copy the Fiori® Launchpad URL then go to Chrome (Browser Choice for Development) and open a new incognito window, it would ask for credentials of this new user which is DEVELOPER3.

 

 

 

  • Step 7 – Now we get a blank screen because we have not added any application to our Launchpad of DEVEOPER3. So our objective is to provide this user with our Purchase Order App access.
    Now we will log in with Admin User in Fiori® Launchpad to configuration Approve Purchase Order App which we are basically going to provide access to the App to DEVELOPER3.

 

 

 

  • Step 8 – Go to Launchpad Configurator(With Admin User). To get the Launchpad Configurator URL we would be replacing existing URL from “/ui2” with “sap/arsrvc_upb_admn/”(as shown in image below). This will basically use the service ‘arsrvc_upb_admn’ and we have to go into main.html.
    We can check the service in our SICF Transaction, which is responsible for Catalog and Group Management.

 

 

 

 

  • Step 9 –  We will be creating a new Catalog for that click on + Icon which is present in the bottom left side of the screen. The Catalog will be a Standard Catalog and for now let’s name it as Zdemo1_01 and unique ID Zdemo1_01, then click on Save.

 

 

 

  • Step 10 – In this step, we have seen how to Create Catalog, to Configure Fiori® Apps we need to Create Semantic Object Next and Action. Then Provide this Role With Target Mapping.

To view all the steps of Fiori® App Configuration you can Enroll in Fiori® for Developers Course With UI5CN here:

https://www.ui5cn.com/courses/fiori-for-developers

 

SAP® Fiori® Blog Series Links :

  1. SAP® Fiori® Launchpad Configuration – Starting with Catalog Creation (Current Blog)
  2. Understanding SAP® Fiori® Launchpad and Tiles Types
  3. SAP® Fiori® – Understanding Fiori® Catalogs, Tiles, Roles and Groups (Blog Comming Soon)
  4. Fiori® Applications Types and Architecture (Blog Comming Soon)
  5. Types of Fiori® Apps – Transactional Fiori® Application Overview and Architecture (Blog Comming Soon)
  6. Fact Sheet Fiori® App Architecture | Fact Sheet Applications | Types of Fiori® Application (Blog Comming Soon)
  7. Analytical & KPI Fiori® App Architecture | Analytical Fiori Application | Types of Fiori Application (Blog Comming Soon)
  8. SAP® Fiori® Architecture and Component | SAP® Fiori® Components | Fiori® Architecture (Blog Comming Soon)