Sie sind auf Seite 1von 33

SAP- Odata/Fiori für die Bundesbank

Prozessablauf von der Tabelle zur aufruffähigen Fiori-App

Ausgangstabelle anlegen

Domänen anlegen

- ZDO_ID_99 CHAR20 CS
- ZDO_MOBILE_99 NUMC30
- ZDO_NAME_99 CHAR40 CS
- ZDO_EMAIL_99 CHAR20

Aufruf SE11

>Aktivieren
SAP- Odata/Fiori für die Bundesbank

Datenelemente anlegen

- ZDE_EMAIL_99 CHAR20 CS
- ZDE_MOBILE_99 NUMC30
- ZDE_NAME_99 CHAR40 CS
- ZDE_ID_99 CHAR20

Aufruf SE11

>Aktivieren

Tabelle anlegen

>Technische Einstellungen
SAP- Odata/Fiori für die Bundesbank

>aktivieren

ODATA Service anlegen

SEGW - Transaktion SEGW

>lokales Objekt

>ABAP-Dictionary Struktur
SAP- Odata/Fiori für die Bundesbank

>weiter

>weiter

>Key Userid

>Artefakte generieren
SAP- Odata/Fiori für die Bundesbank

>Enter

Service registrieren

- Services aktivieren und verwalten

>Service hinzufügen

>Service abrufen
SAP- Odata/Fiori für die Bundesbank

>Service anklicken

>Enter

>Enter

>Service anklicken

>SAP Gateway
SAP- Odata/Fiori für die Bundesbank

>ausführen

>Serviceendpunkt über SICF erkennen / Im Browser testen

>Metadata erkennen und im Browser testen

Setzen Sie den Wert ~ CHECK_CSRF_TOKEN auf 0. Dadurch wird der CSRF-Schutz für den Dienst
umgangen. Dies ist erforderlich, damit die Operationen CREATE, UPDATE und DELETE funktionieren.
Wenn Sie nicht möchten, dass dieser Schutz (aus Sicherheitsgründen) deaktiviert wird, müssen Sie X-
CSRF-TOKEN jedes Mal, wenn Sie CREATE-, UPDATE- oder DELETE-Vorgänge aus der UI5-Anwendung
ausführen möchten, mithilfe der READ-Operation abrufen. In diesem Lernprogramm haben wir der
Einfachheit halber die Sicherheitsfunktion X-CSRF-TOKEN deaktiviert.

Transaktion SICF
SAP- Odata/Fiori für die Bundesbank

>ausführen

>Doppelklick

>Gui_Konfiguration

>Übernehmen + sichern

Testen mit /IWFND/GW_CLIENT - SAP Gateway Client

>Ausführen

Methode zum tabellarischen Lesen der Daten wie angegeben überdefinieren

SEGW aufrufen
SAP- Odata/Fiori für die Bundesbank

>Zur Abap-Workbench

>Redefinieren + Inhalt

data : it_userdata type zcl_zcrudq_demo_99_mpc=>tt_userdata.


select * from zuserdet_99 into table et_entityset.

Pflegen Sie über SE16 ein paar Einträge


SAP- Odata/Fiori für die Bundesbank

Testen Sie den Service mit /IWFND/GW_CLIENT - SAP Gateway Client

Einzelaufruf des Datensatzes implementieren

SEGW - Transaktion SEGW

>Zur ABAP Workbench

>Redefinieren

data : wa_userdata type zcl_zcrudq_demo_99_mpc=>ts_userdata,


ls_keys type zcl_zcrudq_demo_99_mpc=>ts_userdata.
SAP- Odata/Fiori für die Bundesbank

"Der Parameter io_tech_request_context enthält ein Objekt, das


"Methoden zum Zugriff auf Importparameter bereitstellt.
"get_converted_keys beispielsweise liefert eine Struktur, die
"die Schlüsselwerte des Aufrufs enthält.
call method io_tech_request_context->get_converted_keys
importing
es_key_values = ls_keys.

select single * from zuserdet_99 into corresponding fields of wa_userda


ta
where userid = ls_keys .
move-corresponding wa_userdata to er_entity.

Insert des Datensatzes implementieren

SEGW - Transaktion SEGW

>Zur Abap Workbench

>Redefinieren

data : wa_userdata type zcl_zcrudq_demo_99_mpc=>ts_userdata.


* read data recieved from ui5
io_data_provider->read_entry_data(
importing
es_data = wa_userdata
).
modify zuserdet_99
SAP- Odata/Fiori für die Bundesbank

from wa_userdata.
if sy-subrc eq 0.
move 'success' to er_entity-username.
else.
move 'error' to er_entity-username.
endif.

/IWFND/GW_CLIENT - SAP Gateway Client aufrufen + Insert testen

Update des Datensatzes implementieren

SEGW - Transaktion SEGW

data : wa_userdata type zcl_zcrudq_demo_99_mpc=>ts_userdata.


* read data recieved from ui5
io_data_provider->read_entry_data(
importing
es_data = wa_userdata
).
* move 'success' to er_entity.
update zuserdet_99 set emaild = wa_userdata-
emaild where userid = wa_userdata-userid.
if sy-subrc eq 0.
move 'success' to er_entity-username.
else.
move 'error' to er_entity-username.
endif.

>Zur ABAP Workbench

>Redefinieren
SAP- Odata/Fiori für die Bundesbank

data : wa_keytab like line of it_key_tab.


read table it_key_tab into wa_keytab with key name = 'id'.
if sy-subrc eq 0.
delete from zuserdata_99 where id eq wa_keytab-value.
endif.

Testen und Aufbau Testfälle

Testfall 1

>Sichern

>Namensgebung beachten + Enter + Ausführen


SAP- Odata/Fiori für die Bundesbank

>Namensgebung beachten + Enter + Ausführen

>Als Anforderung verwenden

>Namensgebung beachten + Enter + Ausführen (POST)


SAP- Odata/Fiori für die Bundesbank

>Über SE11 kontrollieren

>Update mit PUT

Selbstfindung Lösung Delete


SAP- Odata/Fiori für die Bundesbank

data : wa_keytab like line of it_key_tab.


read table it_key_tab into wa_keytab with key name = 'userid'.
if sy-subrc eq 0.
delete from zuserdet_99 where userid eq wa_keytab-value.
endif.

Fiori App zcrudq_test_99 definieren

>Workspace gleichnamig anlegen

>Launch
SAP- Odata/Fiori für die Bundesbank

>SAPUI5 Application Projekt

>Next
SAP- Odata/Fiori für die Bundesbank

>Projekt gleichnamig anlegen


SAP- Odata/Fiori für die Bundesbank

>View Paradigma XML Name crud_demo

>Finish

>Open Perspektive

crud_demo.controller.js

sap.ui.controller("zcrudq_test.crud_demo", {

/**
* Called when a controller is instantiated and its View controls (if available)
are already created.
* Can be used to modify the View before it is displayed, to bind event handlers
and do other one-time initialization.
* @memberOf zcrudq_test.crud_demo
*/
onInit: function() {
that = this;
// Create Model Instance of the oData service
var oModel = new
sap.ui.model.odata.v2.ODataModel("/sap/opu/odata/sap/ZCRUD_DEMO_SRV");
sap.ui.getCore().setModel(oModel, "myModel");
},

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's
View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zcrudq_test.crud_demo
*/
// onBeforeRendering: function() {
//
// },

/**
* Called when the View has been rendered (so its HTML is part of the document).
Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zcrudq_test.crud_demo
*/
// onAfterRendering: function() {
//
// },

/**
* Called when the Controller is destroyed. Use this one to free resources and
finalize activities.
* @memberOf zcrudq_test.crud_demo
*/
// onExit: function() {
//
// }
oDataCall:function(oEvent)
SAP- Odata/Fiori für die Bundesbank

{
// call oData service's function based on which button is clicked.
debugger;
var myModel = sap.ui.getCore().getModel("myModel");
myModel.setHeaders({
"X-Requested-With" : "X"
});
// CREATE******************
if ('Create' == oEvent.oSource.mProperties.text) {
var obj = {};
obj.Id = that.getView().byId("uniqueid").getValue();
obj.Name = that.getView().byId("nameid").getValue();
obj.Email = that.getView().byId("emailid").getValue();
obj.Mobile = that.getView().byId("mobid").getValue();
myModel.create('/UserdataSet', obj, {
success : function(oData, oResponse) {
debugger;
alert('Record Created Successfully...');
},
error : function(err, oResponse) {
debugger;
alert('Error while creating record - '
.concat(err.response.statusText));
}
});
}
// READ******************
else if ('Read' == oEvent.oSource.mProperties.text) {
var readurl = "/UserdataSet/?$filter=(Id eq '')";
myModel.read(readurl, {
success : function(oData, oResponse) {
debugger;
var userdat1 = new sap.ui.model.json.JSONModel({
"Result" : oData.results
});
var tab = that.getView().byId("userdatatable");
tab.setModel(userdat1);
var i = 0;
tab.bindAggregation("items", {
path : "/Result",
template : new sap.m.ColumnListItem({
cells : [ new
sap.ui.commons.TextView({
text : "{Id}",
design : "H5",
semanticColor : "Default"
}), new sap.ui.commons.TextView({
text : "{Name}",
design : "H5",
semanticColor : "Positive"
}), new sap.ui.commons.TextView({
text : "{Email}",
design : "H5",
semanticColor : "Positive"
}), new sap.ui.commons.TextView({
text : "{Mobile}",
design : "H5",
semanticColor : "Positive"
}), ]
})
});
SAP- Odata/Fiori für die Bundesbank

},
error : function(err) {
debugger;
}
});
}
// UPDATE******************
if ('Update' == oEvent.oSource.mProperties.text) {
var obj = {};
obj.Id = that.getView().byId("uniqueid").getValue();
obj.Email = that.getView().byId("emailid").getValue();
var updateurl = "/UserdataSet(Id='"
+ that.getView().byId("uniqueid").getValue() +
"')";

myModel.update(updateurl, obj, {
success : function(oData, oResponse) {
debugger;
alert('Record Updated Successfully...');
},
error : function(err, oResponse) {
debugger;
alert('Error while updating record - '
.concat(err.response.statusText));
}
});
}
// DELETE******************
if ('Delete' == oEvent.oSource.mProperties.text) {
var delurl = "/UserdataSet(Id='"
+ that.getView().byId("uniqueid").getValue() +
"')";
myModel.remove(delurl, {
success : function(oData, oResponse) {
debugger;
alert('Record Removed Successfully...');
},
error : function(err, oResponse) {
debugger;
alert('Error while removing record - '
.concat(err.response.statusText));
}
});
}
}
});

crud_demo.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"


SAP- Odata/Fiori für die Bundesbank

controllerName="zcrudq_test.crud_demo"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.commons.layout">
<Page title="CRUD Operations">
<content>
<l:AbsoluteLayout width="10rem" height="10rem"></l:AbsoluteLayout>
<VBox xmlns="sap.m" id="vboxid">
<items>
<HBox xmlns="sap.m">
<items>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Button xmlns="sap.m" id="cbtn" press="oDataCall"
text="Create"></Button>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Button xmlns="sap.m" id="rbtn" press="oDataCall"
text="Read"></Button>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Button xmlns="sap.m" id="ubtn" press="oDataCall"
text="Update"></Button>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Button xmlns="sap.m" id="dbtn" press="oDataCall"
text="Delete"></Button>
</items>
</HBox>

<HBox xmlns="sap.m">
<items>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Input xmlns="sap.m" id="uniqueid" placeholder="Id"
value="1"></Input>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Input xmlns="sap.m" id="nameid" placeholder="Name"
value="test"></Input>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Input xmlns="sap.m" id="emailid" placeholder="Email"
value="test@gmail.com"></Input>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Input xmlns="sap.m" id="mobid" placeholder="Mobile"
value="8888888888"></Input>
</items>
</HBox>

<HBox xmlns="sap.m">
<items>
<l:AbsoluteLayout width="20px"
height="20px"></l:AbsoluteLayout>
<Table xmlns="sap.m"
id="userdatatable" headerText="User Data">
<items>
<ListItemBase xmlns="sap.m" id="id1"></ListItemBase>
</items>
<columns> <!-- sap.m.Column -->
SAP- Odata/Fiori für die Bundesbank

<Column xmlns="sap.m"> <header> <Text xmlns="sap.m"


text="Id" ></Text></header></Column>
<Column xmlns="sap.m"> <header> <Text xmlns="sap.m"
text="Name" ></Text></header></Column>
<Column xmlns="sap.m"> <header> <Text xmlns="sap.m"
text="Email" ></Text></header></Column>
<Column xmlns="sap.m"> <header> <Text xmlns="sap.m"
text="Mobile" ></Text></header></Column>
</columns>
</Table>
</items>
</HBox>
</items> <!-- sap.ui.core.Control -->
</VBox>
</content>
</Page>
</core:View>

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme
-->

<script>
sap.ui.localResources("zcrudq_test");
var app = new sap.m.App({initialPage:"idcrud_demo1"});
var page = sap.ui.view({id:"idcrud_demo1",
viewName:"zcrudq_test.crud_demo", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>

</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
SAP- Odata/Fiori für die Bundesbank

>Ergebnis 1

Deployen der Anwendung

>Share Project
SAP- Odata/Fiori für die Bundesbank

>Next

>T22 selektieren + Next x 2

>Next
SAP- Odata/Fiori für die Bundesbank

>Next + Finish + ok

>Submit + ok + finish + 60 sekunden geduld

>BSP erkennen und über Cetrix starten


SAP- Odata/Fiori für die Bundesbank

1.Testergebnis mit F12 tracen

/UI2/FLPD_CUST - Fiori Lpd. Designer (mandantenabh.)

Fiori Katalog pflegen

>Katalog anlegen
SAP- Odata/Fiori für die Bundesbank

>Katalog anlegen, benennen und sichern

>Kachel hinzufügen
SAP- Odata/Fiori für die Bundesbank

>Statische Kachel anlegen

>die URL des Fiori-Services zuordnen + sichern

>Gruppen

>Gruppe erstellen + sichern

>auf das + klicken


SAP- Odata/Fiori für die Bundesbank

>Katalog wählen

>auf das + klicken

>Abschliessen

Rolle anlegen
SAP- Odata/Fiori für die Bundesbank

>Einzelrolle anlegen + Menu

>Kachelkatalog

>Enter
SAP- Odata/Fiori für die Bundesbank

>Benutzer

>Sichern

/UI2/FLP - SAP Fiori Launchpad starten


SAP- Odata/Fiori für die Bundesbank

Katalog:

 Ein Katalog ist ein Set von Fiori Applikationen


 Die Fiori Apps eines Katalogs werden für eine bestimmte Rolle zur Verfügung gestellt
 Der User kann die ihm zugewiesenen Kataloge durchsuchen und die benötigten Apps
auf seinem Launchpad anzeigen lassen
Gruppe:

 Der User kann seine zugewiesenen Fiori Applikationen im Launchpad gruppieren


 Diese Gruppierungen werden in dem Launchpad durch Überschriften kenntlich
gemacht
 Gruppierte Apps sind in den Gruppen wiederzufinden
Rolle:

 Rollen ist in Bezug auf das Fiori Launchpad mit Berechtigungen gleichzusetzen
 Stellen den Zugriff auf zugeordnete Kataloge und Gruppen bereit
Technischer Inhalt:

 Der Technische Inhalte/Content ist die Grundlage an technischen Informationen für


jeden Katalog, den die SAP bereitstellt
 Technisch bedeutet, dass in dem Inhalt alle Komponenten von der SAP
zusammengefasst sind, die für einen vollständigen Prozess essenziell sind. Diese große
Menge an Komponenten wird in den meisten Fällen nicht von dem User benötigt
 Namensraum für einen technischen Katalog: *_TC_*
 Namensraum für eine technische Rolle: *_TCR_*
Business Content:

 Der Business Inhalt/Content ist der Inhalt eines Kataloges, welcher nur bestimmte
Komponenten eines Prozesses beinhalten
 Business bedeutet, dass sich die Applikationen auf die wichtigsten Anforderungen eines
Prozesses beziehen. Somit ist der Business Content nur eine Teilmenge von dem
technischen Content
 Als Best Practise sollte deswegen der Business Content als Referenz für die
Implementierungen verwendet werden

Es stehen verschiedene Typen zur Auswahl. App-Launcher – Dynamisch erzeugt eine


dynamische Kachel bei der neben Titel und Beschreibung ein dynamischer Inhalt angezeigt
werden kann, z.B. aktuelle Anzahl offener Bestellungen. App-Launcher – Statisch hingegen
enthält nur statische Anzeigen, Titel und Beschreibung. In der Nachrichtenkachel werden
Inhalte aus News Feeds dargestellt. Nachdem ein Typ ausgewählt und die angezeigte
Kachel angeklickt wurde öffnet sich die Konfiguration der Kachel.