Sap Fiori Navigation Route ve SweetAlert Kullanım Örneği

Vs codeda yeni bir proje oluşturduk.

3 tane View oluşturdum.

Bu Viewların Controllerlarını oluşturdum. Ek olarak her zaman kullandığım Base Controllerı ekliyorum.

Ardından webapp klasörünün altına Sweet Alert.jsi ekledim. Aşağıdaki linki de referans verebilirsiniz. Ben dosya üzerinden erişmeyi tercih ediyorum.

https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.all.min.js

Ardından Manifest.jsonda routing yapımı belirliyorum . Burada view name ve targetların oluşturduğum view ile benzer olması önemli. İlerde belki kullanırım diye son levele de NotFound ekranı ekledim.

  "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "employee.overtime.view",
        "controlAggregation": "pages",
        "controlId": "app",
        "clearControlAggregation": false
      },
      "routes": [
        {
          "pattern": "",
          "name": "main",
          "target": "main"
      },
      {
          "name": "RouteMain",
          "pattern": ":?query:",
          "target": [
            "TargetMain"
          ]
        },
        {
          "pattern": "detail",
          "name": "detail",
          "target": "detail"
        },
        {
          "pattern": "second",
          "name": "second",
          "target": "second"
        }
      ],
      "targets": {
        "TargetMain": {
          "viewType": "XML",
          "transition": "slide",
          "clearControlAggregation": false,
          "viewId": "main",
          "viewName": "Main"
        },
        "main": {
          "viewName": "Main",
          "viewId": "main",
          "viewLevel": 0
      },
      "detail": {
          "viewName": "Detail",
          "viewId": "detail",
          "viewLevel": 1
      },
      "second": {
          "viewName": "Second",
          "viewId": "second",
          "viewLevel": 2
      },
      "notFound": {
          "viewName": "NotFound",
          "viewId": "notFoundView",
          "viewLevel": 3
      }
      }
    },

İlk viewim Main olduğu için 2 tane kutucuk ekledim.

<Page id="page" title="{i18n>title}">
        <content >
         
     <TileContainer>
        <StandardTile
            id="detailTile"
            icon="sap-icon://world"
            title="Tile 1 "
            info="Info for Tile 1"
            press="onTilePress"/>
        <StandardTile
            id="secondTile"
            icon="sap-icon://settings"
            title="Tile 2"
            info="Info for Tile 2"
            press="onTilePress"/>
    </TileContainer>
          
        </content>
    </Page>

Ardından controllerda sweetalerti tanımladıkten sonra sweet alert ile bir pop up çıkardım.

Sonrasında kutucuklara bastığımızda çalışacak fonksiyonda ;

oEvent.getSoruce ile tilei tanımaldım. Ardından titleini alıp ekrana bastım.

Routerimi tanımladıktan Sonra İdlerine göre gitmesini istediğim ekrana navigasyonunu sağladım.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "./BaseController",
    "sap/m/MessageToast",
    "nav/medium/utils/sweetalert"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller,BaseController,MessageToast,swalJS) {
        "use strict";
        return BaseController.extend("nav.medium.controller.Main", {
            onInit: function () {
                swal.fire("Main View");
            },
            
             
            onTilePress: function (oEvent) {
              var oTile = oEvent.getSource();
              var sTileTitle = oTile.getTitle();
              
   Swal.fire({
                position: "bottom",
                icon: "success",
                html: sTileTitle,
                showConfirmButton: false,
                toast: true,
                timer: 2000,
            });
              var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
              if (oTile.sId.includes("detailTile") ){
               
              oRouter.navTo("detail");
              }
              if (oTile.sId.includes("secondTile") ){
               
                oRouter.navTo("second");
                }
              //oRouter.navTo("detail");
          }
        
        });
    });

Navigasyon düğmesinin gözükmesi için showNavButton=”true” dedim.

<mvc:View
    controllerName="nav.medium.controller.Detail"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Page id="detailPage" title="Detail Page" showNavButton="true" navButtonPress="onNavBack">
        <content>
            <Text text="Welcome to the Detail Page"/>
        </content>
    </Page>
</mvc:View>

<mvc:View
    controllerName="nav.medium.controller.Second"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Page id="secondPage" title="Second Page" showNavButton="true" navButtonPress="onNavBack">
        <content>
            <Text text="Welcome to the Second Page"/>
        </content>
    </Page>
</mvc:View>

Son olarak Navigasyon düğmesiyle ana ekrana dönmek için bu fonksiyonu ekliyorum.

onNavBack: function () {
            var oHistory = sap.ui.core.routing.History.getInstance();
            var sPreviousHash = oHistory.getPreviousHash();
            if (sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.navTo("main", {}, true);
            }
        }

Kaynak kodlara buradan ulaşabilirsiniz.

https://github.com/kaancancalkan/Medium-Blog/tree/main/Navigati%C4%B1on%20With%20Sweet%20Alert