Fiori Camera Integration
File Upload Feature in Fiori
Send Pictures to S/4 system
Anubhav Oberoy
http://www.onlinefioritrainings.com
Anubhav's Learning Series, www.onlinefioritrainings.com
Requirement: My client Best-in-Pizza wants to develop product management application. They want to manage all the
products that they have in their portfolio. The purpose of this application is to display the product information including the
product picture.
In case, the product picture is not available, they want to use camera of their device and send the taken photo to SAP S/4
system.
They want also an upload functionality, where the picture is already taken, they just want to select the photo and upload to
SAP system.
Fiori App - Worklist
Take A photo Upload a photo
STRING TO BASE64
Fiori App sendPhotoToSAP DB
Anubhav's Learning Series, www.onlinefioritrainings.com
<Video player>
Camera
Capture
Take Photo
Canvas
label
Anubhav's Learning Series, www.onlinefioritrainings.com
File Upload:
FileUploader inside of sap.ui.unified library.
File Uploader
Browser
FileReader Object
Trigger Upload I will ask File Uploader to provide me the file name
and its path.
FileReader to read the file from that path.
readAsDataURL(file)
onload which gets called once the upload of the file
is done.
Anubhav's Learning Series, www.onlinefioritrainings.com
Requirement
Design a table, where product manager can provide applicable toppings for the pizza with the quantity and brand name.
Excel.csv
File Uploader
Upload
JSON
+
Topping Name Brand Name Price
Anubhav's Learning Series, www.onlinefioritrainings.com
Topping,Name, Brand, Price, Mayoniese, Papa, Johns, 50, Seasoning Berry Farm 150 Catchup Maggie 90 PeriPeri McD 59 Extra
Cheeze Amul 200
Var noofCol = 3;
Arr = [Mayoniese Papa Johns 50 Seasoning Berry Farm 150 Catchup Maggie 90 PeriPeri McD 59 Extra Cheeze Amul 200 ]
ToppingName, Brand, Price
Data = [
{
ToppingName : “”,
Brand : “”,
Price : “”
},
{
ToppingName : “”,
Brand : “”,
Price : “”
},
{
ToppingName : “”,
Brand : “”,
Price : “”
Anubhav's Learning Series, www.onlinefioritrainings.com
}
Download Excel from UI5 Table
SAP UI5 in-built classes 3rd Party JS xlsx, exceljs etc.
Sap/ui/core/Export SpreadSheet
Anubhav's Learning Series, www.onlinefioritrainings.com
Need points to justify the advantage of WebIDE vs Eclipse.
My organization has started creating custom apps on Fiori but only using Eclipse till now since it is open source.
Since WebIDE is licensed I'm asked to provide return on investment from organization level.
As a developer I understood that webide greatly reduces the development time and also it is the only way to extend a
standard Fiori app.
It would greatly help if you provide more inputs so that I convince our leadership for the purchase of webide.
Anubhav's Learning Series, www.onlinefioritrainings.com
Features Eclipse SAP WebIDE
Options Juno, Mars, Neon, Kepler, Oxygen Personal Edition (trial)
Cloud Edition (SAP HCP)
Cost Free Not Free
Configuration SAP UI5 Dev. Toolkit Plugin, git, Destination
User WS Footprint Has Zero (Everywhere, any device, any time)
Support for UI5 version Oxygen 1.52 Latest
Developer Experience
Template (worklist, master detail) No Yes
Complexity Simple Complex
HAT, IoT No Yes
Analytical Fiori – Fiori Element No Yes
CORS (connection to backend) Not easy Very nice support (Consumption of
Odata)
Search Capability Yes No
Deployment Difficult Easy – ABAP, HCP
Anubhav's Learning Series, www.onlinefioritrainings.com
Features Eclipse SAP WebIDE
Git Support Yes Yes
Code Completion Yes – Open Standard, UI5 Yes
Annotations No Yes
Manifest No Yes
Static Code Checks Yes Yes
End to End Fiori Dev.
ABAP on HANA, HANA, Java, UI5 Yes UI5
Extensibility Juno (not at good support) Extensibility
Layout Editor – Views No Yes
Anubhav's Learning Series, www.onlinefioritrainings.com
Launchpad – is single entry point for business users to access your fiori application.
Put the BC on
Fiori LPD
SAP Fiori Launchpad
SAP Fiori Launchpad Designer Theme Design
/UI2/FLP /UI2/FLPD_CONF
/ /
sap/bc/ui5_ui5/ui2/ushell sap/bc/ui5_ui5/sap/arsrvc
/shells/abap/FioriLaunchp _upb_admn/Main.html?
ad.html sap-client=800?
SCOPE=CONF
Anubhav's Learning Series, www.onlinefioritrainings.com
Responsive Web Design: Adaptation of UI based on device and screen resolution.
Emp Id
Emp Name
City
Country
SimpleForm – sap.ui.layout.form
A Responsive Grid Layout: It is a collection of horizontal and vertical lines.
12 Column layout.
Anubhav's Learning Series, www.onlinefioritrainings.com
1 2 3 4 5 6 7 8 9 10 11 12
columnSpan – Controls the columns required for content (Input)
columnSpanXL, columnSpanL, columnSpanM, columnSpanS
labelSpan- How many column we want to provide to the labels
emptySpan- how many columns we want to leave empty at the end.
Anubhav's Learning Series, www.onlinefioritrainings.com
Anubhav's Learning Series, www.onlinefioritrainings.com
Anubhav's Learning Series, www.onlinefioritrainings.com
Anubhav's Learning Series, www.onlinefioritrainings.com
Anubhav's Learning Series, www.onlinefioritrainings.com
