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.[Link]
[Link]("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
[Link]("/sap/opu/odata/sap/ZCRUD_DEMO_SRV");
[Link]().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 = [Link]().getModel("myModel");
[Link]({
"X-Requested-With" : "X"
});
// CREATE******************
if ('Create' == [Link]) {
var obj = {};
[Link] = [Link]().byId("uniqueid").getValue();
[Link] = [Link]().byId("nameid").getValue();
[Link] = [Link]().byId("emailid").getValue();
[Link] = [Link]().byId("mobid").getValue();
[Link]('/UserdataSet', obj, {
success : function(oData, oResponse) {
debugger;
alert('Record Created Successfully...');
},
error : function(err, oResponse) {
debugger;
alert('Error while creating record - '
.concat([Link]));
}
});
}
// READ******************
else if ('Read' == [Link]) {
var readurl = "/UserdataSet/?$filter=(Id eq '')";
[Link](readurl, {
success : function(oData, oResponse) {
debugger;
var userdat1 = new [Link]({
"Result" : [Link]
});
var tab = [Link]().byId("userdatatable");
[Link](userdat1);
var i = 0;
[Link]("items", {
path : "/Result",
template : new [Link]({
cells : [ new
[Link]({
text : "{Id}",
design : "H5",
semanticColor : "Default"
}), new [Link]({
text : "{Name}",
design : "H5",
semanticColor : "Positive"
}), new [Link]({
text : "{Email}",
design : "H5",
semanticColor : "Positive"
}), new [Link]({
text : "{Mobile}",
design : "H5",
semanticColor : "Positive"
}), ]
})
});
SAP- Odata/Fiori für die Bundesbank
},
error : function(err) {
debugger;
}
});
}
// UPDATE******************
if ('Update' == [Link]) {
var obj = {};
[Link] = [Link]().byId("uniqueid").getValue();
[Link] = [Link]().byId("emailid").getValue();
var updateurl = "/UserdataSet(Id='"
+ [Link]().byId("uniqueid").getValue() +
"')";
[Link](updateurl, obj, {
success : function(oData, oResponse) {
debugger;
alert('Record Updated Successfully...');
},
error : function(err, oResponse) {
debugger;
alert('Error while updating record - '
.concat([Link]));
}
});
}
// DELETE******************
if ('Delete' == [Link]) {
var delurl = "/UserdataSet(Id='"
+ [Link]().byId("uniqueid").getValue() +
"')";
[Link](delurl, {
success : function(oData, oResponse) {
debugger;
alert('Record Removed Successfully...');
},
error : function(err, oResponse) {
debugger;
alert('Error while removing record - '
.concat([Link]));
}
});
}
}
});
crud_demo.[Link]
<core:View xmlns:core="[Link]" xmlns:mvc="[Link]" xmlns="sap.m"
SAP- Odata/Fiori für die Bundesbank
controllerName="zcrudq_test.crud_demo"
xmlns:html="[Link] xmlns:l="[Link]">
<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@[Link]"></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> <!-- [Link] -->
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> <!-- [Link] -->
</VBox>
</content>
</Page>
</core:View>
[Link]
<!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/[Link]"
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>
[Link]("zcrudq_test");
var app = new [Link]({initialPage:"idcrud_demo1"});
var page = [Link]({id:"idcrud_demo1",
viewName:"zcrudq_test.crud_demo", type:[Link]});
[Link](page);
[Link]("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
[Link] 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.