{"id":15148632,"url":"https://github.com/theplenkov-npm/fiori-tools","last_synced_at":"2025-03-29T14:30:49.080Z","repository":{"id":57236509,"uuid":"315549173","full_name":"theplenkov-npm/fiori-tools","owner":"theplenkov-npm","description":"Library of extensions for Fiori tools ( @sap/ux-ui5-tooling )","archived":false,"fork":false,"pushed_at":"2023-07-25T19:05:01.000Z","size":4105,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T12:49:28.779Z","etag":null,"topics":["abap","fiori","fiori-tools","sap","sapui5","ui5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theplenkov-npm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-24T07:15:57.000Z","updated_at":"2025-03-03T20:58:53.000Z","dependencies_parsed_at":"2024-10-10T02:40:47.440Z","dependency_job_id":"0853a93a-76c5-451e-9fe9-23a2d0e65bf2","html_url":"https://github.com/theplenkov-npm/fiori-tools","commit_stats":{"total_commits":144,"total_committers":2,"mean_commits":72.0,"dds":"0.13194444444444442","last_synced_commit":"4d7906cc508db0e035db06f690b2c39900fd7c4e"},"previous_names":["theplenkov/fiori-tools"],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theplenkov-npm%2Ffiori-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theplenkov-npm%2Ffiori-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theplenkov-npm%2Ffiori-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theplenkov-npm%2Ffiori-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theplenkov-npm","download_url":"https://codeload.github.com/theplenkov-npm/fiori-tools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246196648,"owners_count":20739134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abap","fiori","fiori-tools","sap","sapui5","ui5"],"created_at":"2024-09-26T13:21:21.422Z","updated_at":"2025-03-29T14:30:48.688Z","avatar_url":"https://github.com/theplenkov-npm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fiori-tools ![npm](https://img.shields.io/npm/v/fiori-tools)\r\nLibrary of extensions for [SAP Fiori Tools](https://www.npmjs.com/package/@sap/ux-ui5-tooling) ( @sap/ux-ui5-tooling )\r\n\r\nUI5 cli makes it possible to develop and test apps on your local machine. Fiori tools is a set of server middleware which delivers even greater experience.\r\n\r\nThis package brings features on top of functions developed by SAP\r\n\r\n- List of middlewares\r\n  - [fiori-tools-home-page: Redirect to a home page](#fiori-tools-home-page-redirect-to-a-home-page)\r\n  - [fiori-tools-proxy-cdn: bootstrap SAPUI5 from CDN](#fiori-tools-proxy-cdn-bootstrap-sapui5-from-cdn)\r\n  - [fiori-tools-neo-app: support neo-app.json for existing applications](#fiori-tools-neo-app-support-neo-appjson-for-existing-applications)\r\n\r\n## How to install\r\n\r\nInstall the module\r\n\r\n```bash\r\nnpm install fiori-tools @sap/ux-ui5-tooling\r\n```\r\n\r\nadd the following section to you package.json file\r\n\r\n```json\r\n\"ui5\": {\r\n    \"dependencies\": [\r\n      \"@sap/ux-ui5-tooling\",\r\n      \"fiori-tools\"\r\n    ]\r\n```\r\n\r\nThis module can be used indepentently from @sap/ux-ui5-tooling also but it's not a target use case.\r\n\r\n## fiori-tools-home-page: Redirect to a home page\r\n\r\n**What**: a very simple feature - redirection to a default page from the empty path\r\n\r\n![](docs/img/redirect_to_home_page.gif)\r\n\r\n**Why**: in the template provided by Fiori Tools application generator we can see test/flpSandbox.html and test/flpSandboxMockServer.html files. Besides of that we have also sandbox launchpad available as a part of UI5 library and we can take it directly from the test resources. [Fiori Launchpad - Sandbox for application development](https://ui5.sap.com/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html#Shell-home)\r\n\r\nIn addition, sandbox launchpad delivers really nice feature to maintain application config as a separate json file which creates even a space to generate it via API.\r\n\r\n**How to use**: just declare it like this\r\n\r\n```yaml\r\nserver:\r\n  customMiddleware:\r\n    - name: fiori-tools-home-page\r\n      beforeMiddleware: serveIndex\r\n      configuration:\r\n         home_page: \"/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html\"\r\n```\r\n\r\nit is important to remember that /test-reources is supposed to be published like this:\r\n\r\n```yaml\r\nserver:\r\n  customMiddleware:\r\n    - name: fiori-tools-proxy\r\n      beforeMiddleware: compression\r\n      configuration:\r\n        ui5:\r\n          path:\r\n            - /resources\r\n            - /test-resources\r\n        url: https://sapui5.hana.ondemand.com\r\n        version: 1.78.0\r\n```\r\n\r\n## fiori-tools-proxy-cdn: bootstrap SAPUI5 from CDN\r\n\r\n**What**: this concept is described in [SAPUI5 SDK - Demo Kit](https://ui5.sap.com/#/topic/2d3eb2f322ea4a82983c1c62a33ec4ae). The idea is simple - we use an absolute URL in bootstrap script instead of the relative one. This extension transforms the original page like this\r\n\r\n```html\r\n\u003cscript id=\"sap-ushell-bootstrap\" src=\"../../bootstrap/sandbox.js\"\u003e\u003c/script\u003e\r\n\r\n\u003cscript\r\n  id=\"sap-ui-bootstrap\"\r\n  src=\"../../../../../resources/sap-ui-core.js\"\r\n  data-sap-ui-evt-oninit=\"main();\"\r\n  data-sap-ui-libs=\"sap.m\"\r\n  data-sap-ui-async=\"true\"\r\n  data-sap-ui-theme=\"sap_fiori_3\"\r\n  data-sap-ui-compatVersion=\"1.16\"\r\n  data-sap-ui-xx-bindingSyntax=\"complex\"\r\n\u003e\u003c/script\u003e\r\n\r\n\u003cscript src=\"../../bootstrap/standalone.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\ninto properly resolved page like that\r\n\r\n```html\r\n\u003cscript\r\n  id=\"sap-ushell-bootstrap\"\r\n  src=\"https://sapui5.hana.ondemand.com/1.78.0/test-resources/sap/ushell/bootstrap/sandbox.js\"\r\n\u003e\u003c/script\u003e\r\n\r\n\u003cscript\r\n  id=\"sap-ui-bootstrap\"\r\n  src=\"https://sapui5.hana.ondemand.com/1.78.0/resources/sap-ui-core.js\"\r\n  data-sap-ui-evt-oninit=\"main();\"\r\n  data-sap-ui-libs=\"sap.m\"\r\n  data-sap-ui-theme=\"sap_fiori_3\"\r\n  data-sap-ui-compatversion=\"1.16\"\r\n  data-sap-ui-xx-bindingsyntax=\"complex\"\r\n\u003e\u003c/script\u003e\r\n\r\n\u003cscript src=\"https://sapui5.hana.ondemand.com/1.78.0/test-resources/sap/ushell/bootstrap/standalone.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n**Why**: basically the main reason for that is performance. In case if you are not UI5 library developer then you probably don't need even to send these requests for /resources and /test-resources to your local machine and then to resend them to the internet. In debug mode Fiori application can easily send around 1K files reading sources 1 by 1 so why you should load your PC if your browser can do this directly. Another reason is caching - by using an absolute path it doesn't matter on which local port your service is running - those files will be always cached within a specific UI5 version.\r\n\r\n**How to use:**\r\n\r\nYou can notice again that this middleware is supposed to work together with fiori-tools-proxy. In fact it's created to make life of a main proxy middleware much simpler and to send less traffic on it\r\n\r\n```yaml\r\nserver:\r\n  customMiddleware:\r\n    - name: fiori-tools-proxy-cdn\r\n      beforeMiddleware: fiori-tools-proxy\r\n      configuration:\r\n        fiori_tools_proxy:\r\n          ui5:\r\n            url: https://sapui5.hana.ondemand.com\r\n            version: 1.78.0\r\n        home_page: \"/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html\"\r\n```\r\n\r\nyou may notice that it uses the same configuration as the original middleware fiori-tools-proxy. Therefore if we want to use all of them we can use yaml merge feature to make file more compact:\r\n\r\n```yaml\r\ncustomConfiguration: \u0026global\r\n  fiori_tools_proxy: \u0026fiori-tools-proxy\r\n    ui5:\r\n      path:\r\n        - /resources\r\n        - /test-resources\r\n      url: https://sapui5.hana.ondemand.com\r\n      version: 1.78.0\r\n  home_page: \"/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html\"\r\nserver:\r\n  customMiddleware:\r\n    - name: fiori-tools-proxy\r\n      beforeMiddleware: compression\r\n      configuration:\r\n        \u003c\u003c: *fiori-tools-proxy\r\n    - name: fiori-tools-proxy-cdn\r\n      beforeMiddleware: fiori-tools-proxy\r\n      configuration:\r\n        \u003c\u003c: *global\r\n    - name: fiori-tools-home-page\r\n      beforeMiddleware: serveIndex\r\n      configuration:\r\n        \u003c\u003c: *global\r\n```\r\n\r\n## fiori-tools-neo-app: support neo-app.json for existing applications\r\n\r\n**What**: this middleware support neo-app.json file for ui5 apps launched with ui5 serve/fiori run. New middleware fiori-tools-proxy has a backend configuration however for some projects there might be too much rules. Also it requires separate backend host definition for each of rules while neo-app.json supports destinations.\r\n\r\n**How to use**:\r\n\r\ndeclare middleware in ui5.yaml\r\n\r\n```yaml\r\nserver:\r\n  customMiddleware:\r\n    - name: fiori-tools-neo-app\r\n      afterMiddleware: fiori-tools-proxy\r\n```\r\n\r\nprovide neo-app.json in the project root folder\r\n\r\n```json\r\n{\r\n  \"routes\": [\r\n    {\r\n      \"path\": \"/odata/northwind\",\r\n      \"target\": {\r\n        \"type\": \"destination\",\r\n        \"name\": \"northwind\",\r\n        \"entryPath\": \"/V2/Northwind/Northwind.svc\"\r\n      },\r\n      \"description\": \"Odata:dev\"\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\nprovide neo-dest.json file with configuration like this\r\n\r\n```json\r\n{ \"northwind\": { \"target\": \"https://services.odata.org\" } }\r\n```\r\n\r\nstart the server and check how it works\r\n\r\n```bash\r\n curl localhost:8080/odata/northwind/Regions\r\n```\r\n\r\n## appconfig/fioriSandboxConfig.json\r\n\r\nAll modules of this project are actually built around page /test-resources/sap/ushell/shells/sandbox/fioriSandbox.html. This is just a simple Fiori launchpad page which uses /appconfig/fioriSandboxConfig.json as configuration file\r\n\r\nBy default we have a page like this:\r\n\r\n![](docs/img/default_launchpad.png)\r\n\r\nBut adding a file like this:\r\n\r\n```json\r\n{\r\n  \"applications\": {\r\n    \"GL-lineItems\": {\r\n      \"title\": \"G/L items report\"\r\n    }\r\n  },\r\n  \"services\": {\r\n    \"LaunchPage\": {\r\n      \"adapter\": {\r\n        \"config\": {\r\n          \"groups\": []\r\n        }\r\n      }\r\n    },\r\n    \"NavTargetResolution\": {\r\n      \"adapter\": {\r\n        \"config\": {\r\n          \"applications\": {\r\n            \"GL-lineItems\": {\r\n              \"additionalInformation\": \"SAPUI5.Component=fin.gl.glview.display.FIN_GL_LITB_GLVExtension\",\r\n              \"url\": \"/\"\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nwe have a page like this:\r\n\r\n![](docs/img/custom_launchpad.png)\r\n\r\nWith this config we can also test cross-app navigations.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheplenkov-npm%2Ffiori-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheplenkov-npm%2Ffiori-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheplenkov-npm%2Ffiori-tools/lists"}