OData SmartControl Übung 1: Aufgabe 1.1 - Generieren der UI5 Freestyle Applikation

In dieser Übung wird erneut eine Freestyle App mit dem Template Generator angelegt und wir werden verschiedene Anpassungen vornehmen.

• Starten Template Wizard mit STRG + SHIFT + P
• Generator SAP Fiori application auswählen
• Template Basic auswählen
• Data Source, System (K1X) entsprechend auswählen
• Service ZI_UI5_CUSTOMER_UI_00
• Module: demosmartv2##
• Application namespace: de.ui5ws.demos
• ACHTUNG auf den Project Folder: /home/user/projects (Vorschlag ändern!!!!!)
• Keine Deployment Config, kein FLP, kein Advanced Options
• Starten -> Warten -> Testen
  • Popup "Add project ot workspace" auswählen

OData SmartControl Übung 2 - Aufgabe 2.2 - Filterbar hinzufügen

Im oberen Bereich soll nun eine Filterbar hinzugefügt werden. Dafür ersetzen wir den header Bereich. Ganz oben müssen wir aber noch die Filterbar bekannt geben.

xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"

<f:header>
    <f:DynamicPageHeader pinnable="true">
        <smartFilterBar:SmartFilterBar
            id="smartFilterBarID"
            entitySet="Customer"
            enableBasicSearch="true">
        </smartFilterBar:SmartFilterBar>
    </f:DynamicPageHeader>
</f:header>

Fragestellungen

• Ist die Filterbar ersichtlich?
• Können Felder in der Filterbar eingeblendet werden?

OData SmartControl Übung 2 - Aufgabe 2.4 - Annotations anpassen

Obwohl im Backend Annotations eingestellt sind, werden diese ja bisher nicht berücksichtigt. Das wollen wir jetzt ändern.

Dazu Ändern bzw. Erstetzen wir die dataSource Einstellungen. Dadurch werden die Annotations aus dem Backend gezogen.

    "dataSources": {
        "mainService": {
            "uri": "/sap/opu/odata/sap/ZI_UI5_CUSTOMER_UI_00/",
            "type": "OData",
            "settings": {
            "annotations": [
                "ZI_UI5_CUSTOMER_UI_00_VAN",
                "annotation"
            ],
            "localUri": "localService/metadata.xml",
            "odataVersion": "2.0"
            }
        },
        "ZI_UI5_CUSTOMER_UI_00_VAN": {
            "uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZI_UI5_CUSTOMER_UI_00_VAN',Version='0001')/$value/",
            "type": "ODataAnnotation",
            "settings": {
            "localUri": "localService/ZI_UI5_CUSTOMER_UI_00_VAN.xml"
            }
        },
        "annotation": {
            "type": "ODataAnnotation",
            "uri": "annotations/annotation.xml",
            "settings": {
            "localUri": "annotations/annotation.xml"
            }
        }
    }
     



     

OData SmartControl Übung 2 - Aufgabe 2.5 - Splitter Control ergänzen

Jetzt werden wir ein Splitter Control ergänzen, damit wir Filter, Liste und Detailpage auf einer Seite darstellen können

Wir ersetzen die derzeitige smartTable im View durch nachfolgendes Coding:

    <l:Splitter orientation="Vertical" height="100%">
        <l:Splitter>
            <smartTable:SmartTable
                id="smartTableID"
                smartFilterId="smartFilterBarID"
                tableType="Table"
                editable="false"
                entitySet="Customer"
                fitContainer="true"
                useVariantManagement="true"
                useTablePersonalisation="true"
                header="Customer"
                showRowCount="true"
                enableAutoBinding="true">
            </smartTable:SmartTable>
        </l:Splitter>
        <l:Splitter orientation="Horizontal">
        </l:Splitter>   
    </l:Splitter>

Wichtig, oben: xmlns:l="sap.ui.layout"

OData SmartForms Übung 2 - Aufgabe 2.6 - SmartForms ergänzen

Jetzt wollen wir noch eine SmartForm mit ein paar ausgewählten Feldern ergänzen. Dazu ersetzen wir den zweiten Splitter mit folgendem Coding:

<l:Splitter id="splitterId" orientation="Horizontal">
   <smartForm:SmartForm id="smartForm" class="editableForm" editTogglable="true"  editable="true">
       <smartForm:Group id="formGroupCustomer" title="Customer">
           <smartForm:GroupElement>
           <smartField:SmartField textLabel="Customer Id" value="{CustomerId}" />
           </smartForm:GroupElement>
           <smartForm:GroupElement>
           <smartField:SmartField textLabel="Last Name" value="{LastName}" />
           </smartForm:GroupElement>
           <smartForm:GroupElement>
           <smartField:SmartField textLabel="First Name" value="{FirstName}" />
           </smartForm:GroupElement>
           <smartForm:GroupElement>
           <smartField:SmartField textLabel="Country" value="{CountryCode}" />
           </smartForm:GroupElement>
       </smartForm:Group>
   </smartForm:SmartForm>
</l:Splitter>

Fragestellungen

• Sind nun im unteren Bereich 3 Felder ersichtlich?
• Was passiert wenn man eine Zeile in der List auswählt?