SAP CAP篇七:为CAP添加Fiori Launchpad入口 (Sandbox环境)

本文目录

  • 本系列之前的文章
  • 在现有代码基础上继续增强
  • 增强`app`文件夹
    • 文件 `package.json`
    • 文件夹`appconfig`
    • 文件`fioriSandboxConfig.json`
    • 文件 `fiori.html`
    • 更新`Srv`中的`UiIndexContentProviderFactory`
  • 再次检查代码
  • 运行效果
  • 代码库 (Gitcode)

本系列之前的文章

本系列之前的文章:

SAP CAP篇一:快速创建一个Service,基于Java的实现
SAP CAP篇二:为Service加上数据库支持
SAP CAP篇三:定义Model
SAP CAP篇四:为CAP添加Fiori Elements程序(1)
SAP CAP篇五:为CAP添加Fiori Elements程序(1)
SAP CAP篇六:为CAP添加Fiori Elements程序(3)

在现有代码基础上继续增强

根据从篇四到篇六的修改和增强,现有的代码结构如下:

SAP CAP篇七:为CAP添加Fiori Launchpad入口 (Sandbox环境)_第1张图片

增强app文件夹

app文件夹中添加如下文件:

  • package.json
  • appconfig folder

文件 package.json

正如在篇四提到的那样,这里app文件夹其实是为approuter准备的,所以,package.json的定义如下:

{
	"name": "approuter",
	"dependencies": {
		"@sap/approuter": "^13"
	},
	"scripts": {
		"start": "node node_modules/@sap/approuter/approuter.js"
	}
}

文件夹appconfig

app文件夹下新建子文件夹appconfig。该文件夹用来提供Fiori Launchpad的Sandbox系统。真正Deploy到SAP BTP上时,需要遵循Launchpad 定义的标准。

文件fioriSandboxConfig.json

在新创建的appconfig下创建fioriSandboxConfig.json。该文件用来定义一个Launchpad的Sandbox环境。

{
    "services": {
        "LaunchPage": {
            "adapter": {
                "config": {
                    "catalogs": [],
                    "groups": [
                        {
                            "id": "Admin",
                            "title": "Admin",
                            "isPreset": true,
                            "isVisible": true,
                            "isGroupLocked": false,
                            "tiles": [
                                {
                                    "id": "manage-books",
                                    "tileType": "sap.ushell.ui.tile.StaticTile",
                                    "properties": {
                                      "targetURL": "#Books-manage",
                                      "title": "Manage Books",
                                      "description": "Find your favorite book"
                                    }
                                }
                            ]
                        }, {
                            "id": "Book",
                            "title": "Book",
                            "isPreset": true,
                            "isVisible": true,
                            "isGroupLocked": false,
                            "tiles": [
                                {
                                    "id": "browse-books",
                                    "tileType": "sap.ushell.ui.tile.StaticTile",
                                    "properties": {
                                      "targetURL": "#Books-display",
                                      "title": "Display Books",
                                      "description": "Find your favorite book"
                                    }
                                }
                            ]
                        }
                    ]          
                }
            }
        },
        "NavTargetResolution": {
          "config": {
            "enableClientSideTargetResolution": true
          }
        },
        "ClientSideTargetResolution": {
            "adapter": {
                "config": {
                    "inbounds": {
                        "manage-books": {
                            "semanticObject": "Books",
                            "action": "manage",
                            "signature": {
                              "parameters": {},
                              "additionalParameters": "allowed"
                            },
                            "resolutionResult": {
                              "applicationType": "SAPUI5",
                              "additionalInformation": "SAPUI5.Component=manage-books",
                              "url": "/manage-books/webapp"
                            }
                        },
                        "browse-books": {
                            "semanticObject": "Books",
                            "action": "display",
                            "signature": {
                              "parameters": {},
                              "additionalParameters": "allowed"
                            },
                            "resolutionResult": {
                              "applicationType": "SAPUI5",
                              "additionalInformation": "SAPUI5.Component=browse-books",
                              "url": "/browse-books/webapp"
                            }
                        }              
                    }
                }
            }
        }    
    }
}

这里的Sandbox的inbound定义,完全对应了篇六的两个Fiori Elements程序的"semanticObject":和
“action”。

该配置要要求接入口为fiori.html,所以,继续创建该HTML文件。

文件 fiori.html

文件fiori.html是用作Fiori Launchpad的入口程序——类似于绝大多数的HTML程序的index.html一样。所以,这个fiori.html是标准的Fiori Launchpad的定义文件。

app文件夹下添加该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" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Fiorititle>

	<script>
		window["sap-ushell-config"] = {
			defaultRenderer: "fiori2",
			applications: {}
		};
	script>

	<script id="sap-ushell-bootstrap" src="https://sapui5.hana.ondemand.com/1.115.0/test-resources/sap/ushell/bootstrap/sandbox.js">script>
	<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/1.115.0/resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-theme="sap_horizon"
			data-sap-ui-frameOptions="allow">
	script>
	<script>
		sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
	script>

head>
<body class="sapUiBody" id="content">body>
html>

更新Srv中的UiIndexContentProviderFactory

更新UI index的入口:

	@Override
	public void writeContent(PrintWriter writer, String contextPath) {
		writer.print(ENDPOINT_START);
		writer.printf(ENDPOINT, contextPath + "/fiori.html", "Fiori Launchpad");
		writer.print(ENDPOINT_END);
	}

再次检查代码

根据本篇的增强后,代码结构最新如下:
SAP CAP篇七:为CAP添加Fiori Launchpad入口 (Sandbox环境)_第2张图片

运行效果

SAP CAP篇七:为CAP添加Fiori Launchpad入口 (Sandbox环境)_第3张图片
SAP CAP篇七:为CAP添加Fiori Launchpad入口 (Sandbox环境)_第4张图片

代码库 (Gitcode)

与本文配套的代码

参考README.md关于各个branch的详细介绍。

本篇对应的branch是3_withlaunchpad

你可能感兴趣的:(Spring,Boot,Web,Programming,ABAP/SAP,SAP,CAP,SAP,CDS,Fiori,Elements,Fiori,Launchapd,Cloud,Native,元原生)