Goals:
1-- create one Full-Stack application for management products based on Northwind service http://services.odata.org
2-- enhance application to meet the business requirements.
Business requirements:
1-- Main list of products should have at least 3 columns: `Product Name`, `Category` and `Supplier`
2-- Should be added filleters by `Category` and by `Supplier` for main list.
3-- Each record can be editable on `Details` page which also has additional list of items from orders where product was requested to understand impact.
Prerequisites:
As a developer to go through steps of this article:
- you have an account in SAP BTP.
- you know SAP BTP and know how to create dev Full-Stack environment.
- you have GitHub where you can save your project
- you added application SAP Build Code to your subaccount
- you know how to develop CAP and UI by Fiori elements
- you understand CDS and know about any consequences if model in CDS should be changed.
- you have heard about `Joule`.
Creating project for products
In this document, you will create project according to our goals and the business requirements, steps will be like these:
- Prepare project
- creating project
- initial commit project to GitHub
- Generate components of project
- generate data model by Joule
- commit project to GitHub
- generate sample data by Joule
- commit project to GitHub
- generate FIORI UI
- commit project to GitHub
- Implement business requirements
- change your FIORI pages according requirements
- commit project to GitHub
- manual testing
- final commit to GitHub
Prepare project
Go to SAP BTP and open tool `SAP Build Code` which you previously adjusted by Booster or by documentation.
Go to `Lobby` of your applications and create new application with name `zproducts` (you can use your name).
Use this road map to create project:
Create -> Build Application -> SAP Build Code -> Full-Stack Application
Once project is prepared in your Lobby, open it by hitting Name from list of projects:
You will have opened SAP build tool with generated application which you will develop:
Before go with `Joule` I recommend use GitHub to save your versions (if something wrongly generated and you did accept it you will be able to restore everything to save time):
we add our project to GitHub by creating repository, in this example it is `zproducts`
and you save initial commit to GitHub:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/lukcad/zproducts.git
git push --set-upstream origin main
Preparation is done.
Generate components of project
Create model
Use this road map:
Go to Joule ->Open Guide->Data Model and Service Creation
Tell to Joule: | create model from Northwind service which is placed on http://services.odata.org |
Accept changes. You will find model is added.
open terminal and run `cds w`
Open proposed link, usually it is http://localhost:4004
Model is prepared by Joule and verified by you.
Save it on GitHub by new commit for a reason:
Generate Sample Data
Use this road map:
Joule->Open Guide->Sample Data->Generate Sample Data
Tell to Joule: | Generate sample data for model. |
After pressing on `Accept data` editor of sample data is opened and you can check data for all tables:
Start again cds server if it is stopped.
check our services by http://localhost:4004
You should have data for each service, as example for Products:
Save this steps on GitHub by new commit for a reason.
Generating UI
On this step you generate UI.
Use this road map:
Open Palette->FIORI: Generate Fiori Application
choose template Working Page -> Use local CAP project
Press next
Choose main entity Products
Press next
Give these parameters:
Module name | products |
Application title | Products |
Description | Products management |
Allow FLP configuration | Yes |
Press next
Give these parameters for FLP:
Semantic Object | zmlproducts |
Action | Management |
Title | Products Management |
Press Finish
Finally you should be able for app/products by opening context menu choose `Show Page Map`
Verify application, by start prepared run configuration or start cds server via terminal.
This Home will be opened for our application:
Open our Fiori application `Products`
Open details for product:
Try edit it:
Try save it:
Generating UI based on FIORI template is done. Commit this step to GitHub:
Implement business requirements
We have to implement three business requirements:
1-- Main list of products should have at least 3 columns: `Product Name`, `Category` and `Supplier`
2-- Should be added filleters by `Category` and by `Supplier` for main list.
3-- Each record can be editable on `Details` page which also has additional list of items from orders where product was requested to understand impact.
Let's start.
Open Page Map by opening context menu for app/products and choosing `Show Page Map`
In `Map Page` press on edit button of List Report and set this parameter:
Allows you to hide the filter bar: | False |
Now we have to change what we should see about Category and Supplier into our list. In ProductList view we go to Table -> Columns and change `Text` property to category/CategoryName
Continue changing with field `Supplier`.
We change value of Text parameter to `supplier/CompanyName'
Let's move columns Category and Supplier to position after Product Name:
Return to `Page Map` and go to ProductObjectPage in Edit mode.
Choose Sections -> General Information and change Labe to Details
Convert Details name to i18n record.
Add group section `Product` and save Label name into i18n
Enhance association in model
Go to CDS model into db/schema.cds and add ability to expand data from Products entity to OrderDetails by adding so named `managed back association` (because association between OrderDetails to Products exists, so it doesn't change our model).
Find entity Products and add this element:
orderdetails: Association to many OrderDetails on orderdetails.product = $self;
Your fragment of code in `schema.cds` for entity Products should be as following:
entity Products {
key ID: UUID;
ProductID: Integer @assert.unique @mandatory;
ProductName: String(40);
QuantityPerUnit: String(20);
UnitPrice: Decimal(10,4);
UnitsInStock: Integer;
Discontinued: Boolean;
category: Association to Categories;
supplier: Association to Suppliers;
orderdetails: Association to many OrderDetails on orderdetails.product = $self;
}
run `cds w` to verify that your services are working after change.
Continue with applying business requirements in Fiori
Once association is declared we can go and add `ordersitems` table to Details page.
Go back to Page Editor, and open Sections -> and press + to choose `Add Table Section` with parameters:
Label | Items of Orders |
Value Source | orderdetails |
For table of our section add Basic columns
We add these fields to columns
order_ID,product_ID,Quantity,UnitPrice
and mark `Read Only`
Run Application and test
1-- Check that there are columns: `Product Name`, `Category` and `Supplier` in the main list of Products
2-- Check that there are accessible filleters by `Category` and by `Supplier`:
3-- Check that there is `Details` editable view with list which shows `Items of Orders` to understand where Product has been used:
Manually add new record for any product by using Sample data editor for test data file `Northwind_OrderDetails.csv`
Check that Details able to show you two records for `Items of Orders`:
Save to GitHub last commit if any changes have been done. Later on, you can enhance, build and deploy this project by using MTA in any moment.
Thank you for your time,
Yours sincerely,
Mikhail.
PS: You can find source code of this explained example on GitHub:
https://github.com/lukcad/zproducts.git
- SAP Managed Tags:
