├── .editorconfig ├── .github └── workflows │ ├── deploy.yml │ ├── github-ci.yml │ └── reuse-compliance.yml ├── .gitignore ├── .npmrc ├── CONTRIBUTING.md ├── LICENSE.txt ├── LICENSES └── Apache-2.0.txt ├── README.md ├── REUSE.toml ├── eslint.config.mjs ├── package-lock.json ├── package.json ├── renovate.json ├── ui5.yaml └── webapp ├── Component.js ├── controller └── App.controller.js ├── css └── styles.css ├── i18n ├── i18n.properties ├── i18n_de.properties └── i18n_en.properties ├── img └── logo_ui5.png ├── index.html ├── manifest.json ├── model └── todoitems.json ├── test ├── Test.qunit.html ├── integration │ ├── FilterJourney.js │ ├── SearchJourney.js │ ├── TodoListJourney.js │ ├── arrangements │ │ └── Startup.js │ ├── opaTests.qunit.js │ └── pages │ │ └── App.js ├── testsuite.qunit.html ├── testsuite.qunit.js └── unit │ ├── controller │ └── App.controller.js │ └── unitTests.qunit.js ├── util └── Helper.js └── view └── App.view.xml /.editorconfig: -------------------------------------------------------------------------------- 1 | # see http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = tab 8 | 9 | [*.{css,html,js,less,txt,json,yml,yaml,md}] 10 | trim_trailing_whitespace = true 11 | end_of_line = lf 12 | indent_size = 4 13 | insert_final_newline = true 14 | 15 | [*.{yml,yaml}] 16 | indent_style = space 17 | indent_size = 2 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | on: 3 | push: 4 | branches: [ main ] 5 | 6 | permissions: 7 | contents: write 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | 15 | - name: Setup Node.js environment 16 | uses: actions/setup-node@v4 17 | with: 18 | node-version: 20 19 | 20 | - run: npm install 21 | - run: npm run build 22 | 23 | - name: GitHub Pages action 24 | uses: peaceiris/actions-gh-pages@v4 25 | with: 26 | github_token: ${{ secrets.GITHUB_TOKEN }} 27 | publish_dir: dist 28 | -------------------------------------------------------------------------------- /.github/workflows/github-ci.yml: -------------------------------------------------------------------------------- 1 | name: GitHub CI 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | 9 | # No permissions are required for this workflow 10 | permissions: {} 11 | 12 | jobs: 13 | test: 14 | name: General checks, tests and build 15 | runs-on: ubuntu-latest 16 | steps: 17 | 18 | - uses: actions/checkout@v4 19 | 20 | - name: Use Node.js LTS 20.11.0 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: 20.11.0 24 | 25 | - name: Install dependencies 26 | run: npm ci 27 | 28 | - name: Perform checks and tests 29 | run: npm test 30 | 31 | - name: Perform preload build 32 | run: npm run build 33 | 34 | - name: Perform self-contained build 35 | run: npm run build-self-contained 36 | -------------------------------------------------------------------------------- /.github/workflows/reuse-compliance.yml: -------------------------------------------------------------------------------- 1 | name: REUSE 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | 9 | # No permissions are required for this workflow 10 | permissions: {} 11 | 12 | jobs: 13 | compliance-check: 14 | name: Compliance Check 15 | runs-on: ubuntu-latest 16 | steps: 17 | - uses: actions/checkout@v4 18 | - name: Execute REUSE Compliance Check 19 | uses: fsfe/reuse-action@v5 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # Misc 61 | .DS_Store 62 | 63 | dist/ 64 | tmp/ 65 | report/ 66 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | lockfile-version=3 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to openui5-sample-app 2 | 3 | In general the contributing guidelines of OpenUI5 also apply to this project. They can be found here: 4 | https://github.com/SAP/openui5/blob/main/CONTRIBUTING.md 5 | 6 | Some parts might not be relevant for this project (e.g. the browser-specific requirements like jQuery, CSS and accessibility in the "Contribution Content Guidelines") and the contribution process is easier (pull requests will be merged directly on GitHub). 7 | 8 | # Contributing with AI-generated code 9 | As artificial intelligence evolves, AI-generated code is becoming valuable for many software projects, including open-source initiatives. While we recognize the potential benefits of incorporating AI-generated content into our open-source projects there are certain requirements that need to be reflected and adhered to when making contributions. 10 | 11 | Please see our [guideline for AI-generated code contributions to SAP Open Source Software Projects](https://github.com/SAP/.github/blob/main/CONTRIBUTING_USING_GENAI.md) for these requirements. 12 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /LICENSES/Apache-2.0.txt: -------------------------------------------------------------------------------- 1 | Apache License 2 | 3 | Version 2.0, January 2004 4 | 5 | http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, 6 | AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | 11 | 12 | "License" shall mean the terms and conditions for use, reproduction, and distribution 13 | as defined by Sections 1 through 9 of this document. 14 | 15 | 16 | 17 | "Licensor" shall mean the copyright owner or entity authorized by the copyright 18 | owner that is granting the License. 19 | 20 | 21 | 22 | "Legal Entity" shall mean the union of the acting entity and all other entities 23 | that control, are controlled by, or are under common control with that entity. 24 | For the purposes of this definition, "control" means (i) the power, direct 25 | or indirect, to cause the direction or management of such entity, whether 26 | by contract or otherwise, or (ii) ownership of fifty percent (50%) or more 27 | of the outstanding shares, or (iii) beneficial ownership of such entity. 28 | 29 | 30 | 31 | "You" (or "Your") shall mean an individual or Legal Entity exercising permissions 32 | granted by this License. 33 | 34 | 35 | 36 | "Source" form shall mean the preferred form for making modifications, including 37 | but not limited to software source code, documentation source, and configuration 38 | files. 39 | 40 | 41 | 42 | "Object" form shall mean any form resulting from mechanical transformation 43 | or translation of a Source form, including but not limited to compiled object 44 | code, generated documentation, and conversions to other media types. 45 | 46 | 47 | 48 | "Work" shall mean the work of authorship, whether in Source or Object form, 49 | made available under the License, as indicated by a copyright notice that 50 | is included in or attached to the work (an example is provided in the Appendix 51 | below). 52 | 53 | 54 | 55 | "Derivative Works" shall mean any work, whether in Source or Object form, 56 | that is based on (or derived from) the Work and for which the editorial revisions, 57 | annotations, elaborations, or other modifications represent, as a whole, an 58 | original work of authorship. For the purposes of this License, Derivative 59 | Works shall not include works that remain separable from, or merely link (or 60 | bind by name) to the interfaces of, the Work and Derivative Works thereof. 61 | 62 | 63 | 64 | "Contribution" shall mean any work of authorship, including the original version 65 | of the Work and any modifications or additions to that Work or Derivative 66 | Works thereof, that is intentionally submitted to Licensor for inclusion in 67 | the Work by the copyright owner or by an individual or Legal Entity authorized 68 | to submit on behalf of the copyright owner. For the purposes of this definition, 69 | "submitted" means any form of electronic, verbal, or written communication 70 | sent to the Licensor or its representatives, including but not limited to 71 | communication on electronic mailing lists, source code control systems, and 72 | issue tracking systems that are managed by, or on behalf of, the Licensor 73 | for the purpose of discussing and improving the Work, but excluding communication 74 | that is conspicuously marked or otherwise designated in writing by the copyright 75 | owner as "Not a Contribution." 76 | 77 | 78 | 79 | "Contributor" shall mean Licensor and any individual or Legal Entity on behalf 80 | of whom a Contribution has been received by Licensor and subsequently incorporated 81 | within the Work. 82 | 83 | 2. Grant of Copyright License. Subject to the terms and conditions of this 84 | License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, 85 | no-charge, royalty-free, irrevocable copyright license to reproduce, prepare 86 | Derivative Works of, publicly display, publicly perform, sublicense, and distribute 87 | the Work and such Derivative Works in Source or Object form. 88 | 89 | 3. Grant of Patent License. Subject to the terms and conditions of this License, 90 | each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, 91 | no-charge, royalty-free, irrevocable (except as stated in this section) patent 92 | license to make, have made, use, offer to sell, sell, import, and otherwise 93 | transfer the Work, where such license applies only to those patent claims 94 | licensable by such Contributor that are necessarily infringed by their Contribution(s) 95 | alone or by combination of their Contribution(s) with the Work to which such 96 | Contribution(s) was submitted. If You institute patent litigation against 97 | any entity (including a cross-claim or counterclaim in a lawsuit) alleging 98 | that the Work or a Contribution incorporated within the Work constitutes direct 99 | or contributory patent infringement, then any patent licenses granted to You 100 | under this License for that Work shall terminate as of the date such litigation 101 | is filed. 102 | 103 | 4. Redistribution. You may reproduce and distribute copies of the Work or 104 | Derivative Works thereof in any medium, with or without modifications, and 105 | in Source or Object form, provided that You meet the following conditions: 106 | 107 | (a) You must give any other recipients of the Work or Derivative Works a copy 108 | of this License; and 109 | 110 | (b) You must cause any modified files to carry prominent notices stating that 111 | You changed the files; and 112 | 113 | (c) You must retain, in the Source form of any Derivative Works that You distribute, 114 | all copyright, patent, trademark, and attribution notices from the Source 115 | form of the Work, excluding those notices that do not pertain to any part 116 | of the Derivative Works; and 117 | 118 | (d) If the Work includes a "NOTICE" text file as part of its distribution, 119 | then any Derivative Works that You distribute must include a readable copy 120 | of the attribution notices contained within such NOTICE file, excluding those 121 | notices that do not pertain to any part of the Derivative Works, in at least 122 | one of the following places: within a NOTICE text file distributed as part 123 | of the Derivative Works; within the Source form or documentation, if provided 124 | along with the Derivative Works; or, within a display generated by the Derivative 125 | Works, if and wherever such third-party notices normally appear. The contents 126 | of the NOTICE file are for informational purposes only and do not modify the 127 | License. You may add Your own attribution notices within Derivative Works 128 | that You distribute, alongside or as an addendum to the NOTICE text from the 129 | Work, provided that such additional attribution notices cannot be construed 130 | as modifying the License. 131 | 132 | You may add Your own copyright statement to Your modifications and may provide 133 | additional or different license terms and conditions for use, reproduction, 134 | or distribution of Your modifications, or for any such Derivative Works as 135 | a whole, provided Your use, reproduction, and distribution of the Work otherwise 136 | complies with the conditions stated in this License. 137 | 138 | 5. Submission of Contributions. Unless You explicitly state otherwise, any 139 | Contribution intentionally submitted for inclusion in the Work by You to the 140 | Licensor shall be under the terms and conditions of this License, without 141 | any additional terms or conditions. Notwithstanding the above, nothing herein 142 | shall supersede or modify the terms of any separate license agreement you 143 | may have executed with Licensor regarding such Contributions. 144 | 145 | 6. Trademarks. This License does not grant permission to use the trade names, 146 | trademarks, service marks, or product names of the Licensor, except as required 147 | for reasonable and customary use in describing the origin of the Work and 148 | reproducing the content of the NOTICE file. 149 | 150 | 7. Disclaimer of Warranty. Unless required by applicable law or agreed to 151 | in writing, Licensor provides the Work (and each Contributor provides its 152 | Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY 153 | KIND, either express or implied, including, without limitation, any warranties 154 | or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR 155 | A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness 156 | of using or redistributing the Work and assume any risks associated with Your 157 | exercise of permissions under this License. 158 | 159 | 8. Limitation of Liability. In no event and under no legal theory, whether 160 | in tort (including negligence), contract, or otherwise, unless required by 161 | applicable law (such as deliberate and grossly negligent acts) or agreed to 162 | in writing, shall any Contributor be liable to You for damages, including 163 | any direct, indirect, special, incidental, or consequential damages of any 164 | character arising as a result of this License or out of the use or inability 165 | to use the Work (including but not limited to damages for loss of goodwill, 166 | work stoppage, computer failure or malfunction, or any and all other commercial 167 | damages or losses), even if such Contributor has been advised of the possibility 168 | of such damages. 169 | 170 | 9. Accepting Warranty or Additional Liability. While redistributing the Work 171 | or Derivative Works thereof, You may choose to offer, and charge a fee for, 172 | acceptance of support, warranty, indemnity, or other liability obligations 173 | and/or rights consistent with this License. However, in accepting such obligations, 174 | You may act only on Your own behalf and on Your sole responsibility, not on 175 | behalf of any other Contributor, and only if You agree to indemnify, defend, 176 | and hold each Contributor harmless for any liability incurred by, or claims 177 | asserted against, such Contributor by reason of your accepting any such warranty 178 | or additional liability. END OF TERMS AND CONDITIONS 179 | 180 | APPENDIX: How to apply the Apache License to your work. 181 | 182 | To apply the Apache License to your work, attach the following boilerplate 183 | notice, with the fields enclosed by brackets "[]" replaced with your own identifying 184 | information. (Don't include the brackets!) The text should be enclosed in 185 | the appropriate comment syntax for the file format. We also recommend that 186 | a file or class name and description of purpose be included on the same "printed 187 | page" as the copyright notice for easier identification within third-party 188 | archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | 194 | you may not use this file except in compliance with the License. 195 | 196 | You may obtain a copy of the License at 197 | 198 | http://www.apache.org/licenses/LICENSE-2.0 199 | 200 | Unless required by applicable law or agreed to in writing, software 201 | 202 | distributed under the License is distributed on an "AS IS" BASIS, 203 | 204 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 205 | 206 | See the License for the specific language governing permissions and 207 | 208 | limitations under the License. 209 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![OpenUI5 logo](http://openui5.org/images/OpenUI5_new_big_side.png) 2 | 3 | # openui5-sample-app 4 | > [OpenUI5](https://github.com/SAP/openui5) sample app using the [UI5 Tooling](https://github.com/SAP/ui5-tooling). 5 | 6 | [![REUSE status](https://api.reuse.software/badge/github.com/SAP/openui5-sample-app)](https://api.reuse.software/info/github.com/SAP/openui5-sample-app) 7 | 8 | ## Live Demo 9 | A deployed version of the [openui5-sample-app](http://sap.github.io/openui5-sample-app/index.html) is hosted on GitHub Pages. 10 | 11 | ## Prerequisites 12 | - The **UI5 CLI** of the [UI5 Tooling](https://github.com/SAP/ui5-tooling#installing-the-ui5-cli). 13 | - For installation instructions please see: [Installing the UI5 CLI](https://github.com/SAP/ui5-tooling#installing-the-ui5-cli). 14 | 15 | ## Getting started 16 | 1. Clone this repository and navigate into it 17 | ```sh 18 | git clone https://github.com/SAP/openui5-sample-app.git 19 | cd openui5-sample-app 20 | ``` 21 | 1. Install all dependencies 22 | ```sh 23 | npm install 24 | ``` 25 | 26 | 1. Start a local server and run the application (http://localhost:8080/index.html) 27 | ```sh 28 | ui5 serve -o index.html 29 | ``` 30 | 31 | ## Testing 32 | * Run [ESLint](https://eslint.org/) code validation 33 | ```sh 34 | npm run lint 35 | ``` 36 | * Start the [UI5 Test Runner](https://www.npmjs.com/package/ui5-test-runner) and execute the tests 37 | ```sh 38 | npm run test-ui5 39 | ``` 40 | * Run both ESLint and UI5 Test Runner 41 | ```sh 42 | npm test 43 | ``` 44 | ## Building 45 | ### Option 1: Standard preload build 46 | 1. Execute the build 47 | ```sh 48 | ui5 build -a 49 | ``` 50 | 1. Run the result 51 | 1. Run a local HTTP server on the build results (`/dist` directory) 52 | (**Note:** This script is using the [local-web-server](https://www.npmjs.com/package/local-web-server) npm module, but you can use any HTTP server for that) 53 | ```sh 54 | npm run serve-dist 55 | ``` 56 | 1. Open the app at http://localhost:8000 57 | 58 | ### Option 2: Self-contained build 59 | 1. (Optional) Remove previous build results 60 | ```sh 61 | rm -rf ./dist 62 | ``` 63 | 1. Execute the `self-contained` build to create a bundle with all of your applications runtime dependencies 64 | ```sh 65 | ui5 build self-contained -a 66 | ``` 67 | 1. Run the result 68 | 1. Run a local HTTP server on the build results (`/dist` directory) 69 | (**Note:** This script is using the [local-web-server](https://www.npmjs.com/package/local-web-server) npm module, but you can use any HTTP server for that) 70 | ```sh 71 | npm run serve-dist 72 | ``` 73 | 1. Open the app at http://localhost:8000 74 | 75 | ## Working with local dependencies 76 | 77 | For local development of your applications' dependencies (like OpenUI5 libraries) you can use [UI5 Workspaces](https://sap.github.io/ui5-tooling/stable/pages/Workspace/). This will allow you to make changes to those dependencies locally and see the impact in your application immediately. 78 | 79 | ### Preparation 80 | The following needs to be done just once per setup. 81 | 82 | 1. Clone the OpenUI5 repository and navigate into it 83 | **Note:** The UI5 version must be 1.65.0 or higher, you can check that in the root `package.json` file 84 | ```sh 85 | git clone https://github.com/SAP/openui5.git 86 | cd openui5 87 | ``` 88 | 1. Install all dependencies (this also links all OpenUI5 libraries between each other) 89 | ```sh 90 | npm install 91 | ``` 92 | 93 | ### Setup UI5 Workspace 94 | 95 | Would you like to work on the application project and one or more of its UI5 framework dependencies at the same time? We got you covered! 96 | 97 | 1. Create a new file `ui5-workspace.yaml` in the root folder of the project, right next to the `ui5.yaml` 98 | 2. In `ui5-workspace.yaml`, add the paths to the local dependencies you'd like to use from your local machine: 99 | ```yaml 100 | specVersion: workspace/1.0 101 | metadata: 102 | name: default 103 | dependencyManagement: 104 | resolutions: 105 | # local path to OpenUI5. It will resolve all required libraries and transitive dependencies. 106 | - path: /local/path/to/openui5 107 | ``` 108 | 3. Start the development server with default dependency resolution 109 | ```sh 110 | npm run start 111 | ``` 112 | 113 | You can now make changes in your local OpenUI5 repository and see the impact directly when serving or building your application. 114 | 115 | If a dependency that is listed in `ui5.yaml` is omitted in the `resolutions` section of `ui5-workspace.yaml`, the library is resolved in the usual way by downloading it from the registry. For more information about dependency resolutions, check [here](https://sap.github.io/ui5-tooling/v3/pages/Workspace/#dependency-management). 116 | 117 | #### Non-default workspace 118 | 119 | The workspace feature always uses the `default` workspace and always attempts to resolve any dependencies from it. If you'd like to use the workspace for local development but want to resolve the libraries in the usual way by default, you can name the workspace and use that name later, for example like this: 120 | 121 | ```yaml 122 | specVersion: workspace/1.0 123 | metadata: 124 | name: local-dependencies # Not "default" 125 | dependencyManagement: 126 | resolutions: 127 | - path: /local/path/to/openui5 128 | ``` 129 | 130 | ```sh 131 | # Starts a server with a named workspace 132 | npm run start -- -w local-dependencies 133 | ``` 134 | -------------------------------------------------------------------------------- /REUSE.toml: -------------------------------------------------------------------------------- 1 | version = 1 2 | SPDX-PackageName = "openui5-sample-app" 3 | SPDX-PackageSupplier = "SAP OpenUI5 " 4 | SPDX-PackageDownloadLocation = "https://github.com/SAP/openui5-sample-app" 5 | SPDX-PackageComment = "The code in this project may include calls to APIs (“API Calls”) of\n SAP or third-party products or services developed outside of this project\n (“External Products”).\n “APIs” means application programming interfaces, as well as their respective\n specifications and implementing code that allows software to communicate with\n other software.\n API Calls to External Products are not licensed under the open source license\n that governs this project. The use of such API Calls and related External\n Products are subject to applicable additional agreements with the relevant\n provider of the External Products. In no event shall the open source license\n that governs this project grant any rights in or to any External Products,or\n alter, expand or supersede any terms of the applicable additional agreements.\n If you have a valid license agreement with SAP for the use of a particular SAP\n External Product, then you may make use of any API Calls included in this\n project’s code for that SAP External Product, subject to the terms of such\n license agreement. If you do not have a valid license agreement for the use of\n a particular SAP External Product, then you may only make use of any API Calls\n in this project for that SAP External Product for your internal, non-productive\n and non-commercial test and evaluation of such API Calls. Nothing herein grants\n you any rights to use or access any SAP External Product, or provide any third\n parties the right to use of access any SAP External Product, through API Calls." 6 | 7 | [[annotations]] 8 | path = "**" 9 | precedence = "aggregate" 10 | SPDX-FileCopyrightText = "2025 SAP SE or an SAP affiliate company and openui5-sample-app contributors" 11 | SPDX-License-Identifier = "Apache-2.0" 12 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import globals from "globals"; 2 | import js from "@eslint/js"; 3 | 4 | export default [ 5 | js.configs.recommended, 6 | { 7 | languageOptions: { 8 | globals: { 9 | ...globals.browser, 10 | sap: "readonly" 11 | }, 12 | ecmaVersion: 2023, 13 | sourceType: "script" 14 | }, 15 | rules: { 16 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 17 | "consistent-this": 2, 18 | "no-div-regex": 2, 19 | "no-floating-decimal": 2, 20 | "no-self-compare": 2, 21 | "no-mixed-spaces-and-tabs": [2, true], 22 | "no-nested-ternary": 2, 23 | "radix": 2, 24 | "keyword-spacing": 2, 25 | "space-unary-ops": 2, 26 | "wrap-iife": [2, "any"], 27 | "camelcase": 1, 28 | "consistent-return": 1, 29 | "max-nested-callbacks": [1, 3], 30 | "new-cap": 1, 31 | "no-extra-boolean-cast": 1, 32 | "no-lonely-if": 1, 33 | "no-new": 1, 34 | "no-new-wrappers": 1, 35 | "no-redeclare": 1, 36 | "no-unused-expressions": 1, 37 | "no-use-before-define": [1, "nofunc"], 38 | "no-warning-comments": 1, 39 | "strict": 1, 40 | "default-case": 1, 41 | "dot-notation": 0, 42 | "eol-last": 0, 43 | "eqeqeq": 0, 44 | "no-trailing-spaces": 0, 45 | "no-underscore-dangle": 0, 46 | "quotes": 0, 47 | "key-spacing": 0, 48 | "comma-spacing": 0, 49 | "no-multi-spaces": 0, 50 | "no-shadow": 0, 51 | "no-irregular-whitespace": 0, 52 | "no-var": 2, 53 | "no-const-assign": 2, 54 | "prefer-const": 2 55 | } 56 | } 57 | ] 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "openui5-sample-app", 3 | "version": "0.5.0", 4 | "description": "Sample of an OpenUI5 app", 5 | "private": true, 6 | "engines": { 7 | "node": "^20.11.0 || >=22.0.0", 8 | "npm": ">= 8" 9 | }, 10 | "scripts": { 11 | "start": "ui5 serve --port 8080", 12 | "lint": "eslint webapp && ui5lint", 13 | "test-runner": "ui5-test-runner --url http://localhost:8080/test/testsuite.qunit.html --start start --start-timeout 30000 --coverage -ccb 100 -ccf 100 -ccl 100 -ccs 100", 14 | "test": "npm run lint && npm run test-runner", 15 | "build": "ui5 build -a --clean-dest", 16 | "build-self-contained": "ui5 build self-contained -a --clean-dest", 17 | "serve-dist": "ws --compress -d dist" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.14.0", 21 | "@ui5/cli": "^4.0.15", 22 | "@ui5/linter": "^1.13.0", 23 | "@ui5/middleware-code-coverage": "^2.0.1", 24 | "eslint": "^9.25.1", 25 | "globals": "^16.0.0", 26 | "local-web-server": "^5.4.0", 27 | "rimraf": "^6.0.1", 28 | "ui5-test-runner": "^5.7.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:recommended", 5 | "github>ui5/renovate-config" 6 | ], 7 | "lockFileMaintenance": { 8 | "enabled": true, 9 | "automerge": true, 10 | "commitMessagePrefix": "build:", 11 | "commitMessageAction": "In-range update of npm dependencies", 12 | "schedule": [ 13 | "* 0-8 * * 1" 14 | ] 15 | }, 16 | "packageRules": [ 17 | { 18 | "matchDepNames": [ 19 | "*" 20 | ], 21 | "automerge": true, 22 | "commitMessagePrefix": "build(deps-dev):", 23 | "commitMessageAction": "Bump", 24 | "schedule": [ 25 | "* 8-16 * * 1" 26 | ] 27 | }, 28 | { 29 | "matchManagers": [ 30 | "github-actions" 31 | ], 32 | "automerge": true, 33 | "commitMessagePrefix": "build(github-actions):", 34 | "commitMessageAction": "Bump", 35 | "schedule": [ 36 | "* 8-16 * * 1" 37 | ] 38 | }, 39 | { 40 | "matchPackageNames": [ 41 | "node", 42 | "npm" 43 | ], 44 | "enabled": false 45 | }, 46 | { 47 | "matchDepNames": [ 48 | "openui5" 49 | ], 50 | "automerge": true, 51 | "commitMessagePrefix": "deps:", 52 | "commitMessageAction": "Update", 53 | "schedule": [ 54 | "* 8-16 * * 1" 55 | ] 56 | } 57 | ] 58 | } 59 | -------------------------------------------------------------------------------- /ui5.yaml: -------------------------------------------------------------------------------- 1 | specVersion: '4.0' 2 | metadata: 3 | name: openui5-sample-app 4 | type: application 5 | framework: 6 | name: OpenUI5 7 | version: "1.136.0" 8 | libraries: 9 | - name: sap.f 10 | - name: sap.m 11 | - name: sap.ui.core 12 | - name: themelib_sap_horizon 13 | server: 14 | customMiddleware: 15 | - name: "@ui5/middleware-code-coverage" 16 | afterMiddleware: compression 17 | configuration: 18 | excludePatterns: 19 | - "resources/" 20 | - "test/" 21 | -------------------------------------------------------------------------------- /webapp/Component.js: -------------------------------------------------------------------------------- 1 | sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/ComponentSupport"], (UIComponent) => { 2 | "use strict"; 3 | return UIComponent.extend("sap.ui.demo.todo.Component", { 4 | metadata: { 5 | manifest: "json", 6 | interfaces: ["sap.ui.core.IAsyncContentCreation"], 7 | } 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /webapp/controller/App.controller.js: -------------------------------------------------------------------------------- 1 | sap.ui.define([ 2 | "sap/ui/Device", 3 | "sap/ui/core/mvc/Controller", 4 | "sap/ui/model/Filter", 5 | "sap/ui/model/FilterOperator", 6 | "sap/ui/model/json/JSONModel", 7 | "sap/base/strings/formatMessage" 8 | ], (Device, Controller, Filter, FilterOperator, JSONModel, formatMessage) => { 9 | "use strict"; 10 | 11 | return Controller.extend("sap.ui.demo.todo.controller.App", { 12 | 13 | onInit() { 14 | this.aSearchFilters = []; 15 | this.aTabFilters = []; 16 | 17 | this.getView().setModel(new JSONModel({ 18 | isMobile: Device.browser.mobile 19 | }), "view"); 20 | }, 21 | 22 | /** 23 | * Get the default model from the view 24 | * 25 | * @returns {sap.ui.model.json.JSONModel} The model containing the todo list, etc. 26 | */ 27 | getModel() { 28 | return this.getView().getModel(); 29 | }, 30 | 31 | /** 32 | * Adds a new todo item to the bottom of the list. 33 | */ 34 | addTodo() { 35 | const oModel = this.getModel(); 36 | const aTodos = this.getTodos().map((oTodo) => Object.assign({}, oTodo)); 37 | 38 | aTodos.push({ 39 | title: oModel.getProperty("/newTodo"), 40 | completed: false 41 | }); 42 | 43 | oModel.setProperty("/todos", aTodos); 44 | oModel.setProperty("/newTodo", ""); 45 | }, 46 | 47 | /** 48 | * Trigger removal of all completed items from the todo list. 49 | */ 50 | onClearCompleted() { 51 | const aTodos = this.getTodos().map((oTodo) => Object.assign({}, oTodo)); 52 | this.removeCompletedTodos(aTodos); 53 | this.getModel().setProperty("/todos", aTodos); 54 | }, 55 | 56 | /** 57 | * Removes all completed items from the given todos. 58 | * 59 | * @param {object[]} aTodos 60 | */ 61 | removeCompletedTodos(aTodos) { 62 | let i = aTodos.length; 63 | while (i--) { 64 | const oTodo = aTodos[i]; 65 | if (oTodo.completed) { 66 | aTodos.splice(i, 1); 67 | } 68 | } 69 | }, 70 | 71 | /** 72 | * Determines the todo list 73 | * 74 | * @returns {object[]} The todo list 75 | */ 76 | getTodos(){ 77 | const oModel = this.getModel(); 78 | return oModel && oModel.getProperty("/todos") || []; 79 | }, 80 | 81 | /** 82 | * Updates the number of items not yet completed 83 | */ 84 | onUpdateItemsLeftCount() { 85 | const iItemsLeft = this.getTodos().filter((oTodo) => oTodo.completed !== true).length; 86 | this.getModel().setProperty("/itemsLeftCount", iItemsLeft); 87 | }, 88 | 89 | /** 90 | * Trigger search for specific items. The removal of items is disable as long as the search is used. 91 | * @param {sap.ui.base.Event} oEvent Input changed event 92 | */ 93 | onSearch(oEvent) { 94 | const oModel = this.getModel(); 95 | 96 | // First reset current filters 97 | this.aSearchFilters = []; 98 | 99 | // add filter for search 100 | this.sSearchQuery = oEvent.getSource().getValue(); 101 | if (this.sSearchQuery && this.sSearchQuery.length > 0) { 102 | oModel.setProperty("/itemsRemovable", false); 103 | const filter = new Filter("title", FilterOperator.Contains, this.sSearchQuery); 104 | this.aSearchFilters.push(filter); 105 | } else { 106 | oModel.setProperty("/itemsRemovable", true); 107 | } 108 | 109 | this._applyListFilters(); 110 | }, 111 | 112 | onFilter(oEvent) { 113 | // First reset current filters 114 | this.aTabFilters = []; 115 | 116 | // add filter for search 117 | this.sFilterKey = oEvent.getParameter("item").getKey(); 118 | 119 | switch (this.sFilterKey) { 120 | case "active": 121 | this.aTabFilters.push(new Filter("completed", FilterOperator.EQ, false)); 122 | break; 123 | case "completed": 124 | this.aTabFilters.push(new Filter("completed", FilterOperator.EQ, true)); 125 | break; 126 | case "all": 127 | default: 128 | // Don't use any filter 129 | } 130 | 131 | this._applyListFilters(); 132 | }, 133 | 134 | _applyListFilters() { 135 | const oList = this.byId("todoList"); 136 | const oBinding = oList.getBinding("items"); 137 | 138 | oBinding.filter(this.aSearchFilters.concat(this.aTabFilters), "todos"); 139 | 140 | const sI18nKey = this.getI18NKey(this.sFilterKey, this.sSearchQuery); 141 | 142 | this.byId("filterToolbar").setVisible(!!sI18nKey); 143 | if (sI18nKey) { 144 | this.byId("filterLabel").bindProperty("text", { 145 | path: sI18nKey, 146 | model: "i18n", 147 | formatter: (textWithPlaceholder) => { 148 | return formatMessage(textWithPlaceholder, [this.sSearchQuery]); 149 | } 150 | }); 151 | } 152 | }, 153 | 154 | getI18NKey(sFilterKey, sSearchQuery) { 155 | if (!sFilterKey || sFilterKey === "all") { 156 | return sSearchQuery ? "ITEMS_CONTAINING" : undefined; 157 | } else if (sFilterKey === "active") { 158 | return "ACTIVE_ITEMS" + (sSearchQuery ? "_CONTAINING" : ""); 159 | } else { 160 | return "COMPLETED_ITEMS" + (sSearchQuery ? "_CONTAINING" : ""); 161 | } 162 | } 163 | }); 164 | 165 | }); 166 | -------------------------------------------------------------------------------- /webapp/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Strikes through the completed items */ 2 | li[data-todo-item-completed="true"] span { 3 | text-decoration: line-through; 4 | } 5 | -------------------------------------------------------------------------------- /webapp/i18n/i18n.properties: -------------------------------------------------------------------------------- 1 | TITLE=todos 2 | INPUT_PLACEHOLDER=What needs to be done? 3 | CLEAR_COMPLETED=Clear completed 4 | ACTIVE_ITEMS=Active items 5 | ACTIVE_ITEMS_CONTAINING=Active items containing "{0}" 6 | COMPLETED_ITEMS=Completed items 7 | COMPLETED_ITEMS_CONTAINING=Completed items containing "{0}" 8 | ITEMS_CONTAINING=Items containing "{0}" 9 | LABEL_ALL=All 10 | LABEL_ACTIVE=Active 11 | LABEL_COMPLETED=Completed -------------------------------------------------------------------------------- /webapp/i18n/i18n_de.properties: -------------------------------------------------------------------------------- 1 | TITLE=Todos 2 | INPUT_PLACEHOLDER=Was muss getan werden? 3 | CLEAR_COMPLETED=Erledigte Einträge entfernen 4 | ACTIVE_ITEMS=Aktive Einträge 5 | ACTIVE_ITEMS_CONTAINING=Aktive Einträge mit "{0}" 6 | COMPLETED_ITEMS=Erledigte Einträge 7 | COMPLETED_ITEMS_CONTAINING=Erledigte Einträge mit "{0}" 8 | ITEMS_CONTAINING=Einträge mit "{0}" 9 | LABEL_ALL=Alle 10 | LABEL_ACTIVE=Aktiv 11 | LABEL_COMPLETED=Erledigt 12 | -------------------------------------------------------------------------------- /webapp/i18n/i18n_en.properties: -------------------------------------------------------------------------------- 1 | TITLE=todos 2 | INPUT_PLACEHOLDER=What needs to be done? 3 | CLEAR_COMPLETED=Clear completed 4 | ACTIVE_ITEMS=Active items 5 | ACTIVE_ITEMS_CONTAINING=Active items containing "{0}" 6 | COMPLETED_ITEMS=Completed items 7 | COMPLETED_ITEMS_CONTAINING=Completed items containing "{0}" 8 | ITEMS_CONTAINING=Items containing "{0}" 9 | LABEL_ALL=All 10 | LABEL_ACTIVE=Active 11 | LABEL_COMPLETED=Completed -------------------------------------------------------------------------------- /webapp/img/logo_ui5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP/openui5-sample-app/9e35d0827cb338a95ee7eecc9372cdd6d6a48b31/webapp/img/logo_ui5.png -------------------------------------------------------------------------------- /webapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OpenUI5 Todo App 7 | 8 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /webapp/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "_version": "1.61.0", 3 | "sap.app": { 4 | "id": "sap.ui.demo.todo", 5 | "type": "application" 6 | }, 7 | "sap.ui5": { 8 | "dependencies": { 9 | "minUI5Version": "1.121.0", 10 | "libs": { 11 | "sap.ui.core": {}, 12 | "sap.m": {}, 13 | "sap.f": {} 14 | } 15 | }, 16 | "rootView": { 17 | "viewName": "sap.ui.demo.todo.view.App", 18 | "type": "XML", 19 | "id": "app" 20 | }, 21 | "models": { 22 | "i18n": { 23 | "type": "sap.ui.model.resource.ResourceModel", 24 | "settings": { 25 | "bundleName": "sap.ui.demo.todo.i18n.i18n", 26 | "async": true 27 | } 28 | }, 29 | "": { 30 | "type": "sap.ui.model.json.JSONModel", 31 | "uri": "model/todoitems.json" 32 | } 33 | }, 34 | "resources": { 35 | "css": [ 36 | { 37 | "uri": "css/styles.css" 38 | } 39 | ] 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /webapp/model/todoitems.json: -------------------------------------------------------------------------------- 1 | { 2 | "newTodo": "", 3 | "todos": [{ 4 | "title": "Start this app", 5 | "completed": true 6 | }, 7 | { 8 | "title": "Learn OpenUI5", 9 | "completed": false 10 | } 11 | ], 12 | "itemsRemovable": true, 13 | "completedCount": 1 14 | } 15 | -------------------------------------------------------------------------------- /webapp/test/Test.qunit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /webapp/test/integration/FilterJourney.js: -------------------------------------------------------------------------------- 1 | /* global QUnit */ 2 | 3 | sap.ui.define([ 4 | "sap/ui/test/opaQunit", 5 | "./pages/App" 6 | ], (opaTest) => { 7 | "use strict"; 8 | 9 | QUnit.module("Filter"); 10 | 11 | opaTest("should show correct items when filtering for 'Active' items", (Given, When, Then) => { 12 | 13 | // Arrangements 14 | Given.iStartMyApp(); 15 | 16 | //Actions 17 | When.onTheAppPage.iFilterForItems("active"); 18 | 19 | // Assertions 20 | Then.onTheAppPage.iShouldSeeItemCount(1); 21 | 22 | // Cleanup 23 | Then.iTeardownMyApp(); 24 | }); 25 | 26 | opaTest("should show correct items when filtering for 'Completed' items", (Given, When, Then) => { 27 | 28 | // Arrangements 29 | Given.iStartMyApp(); 30 | 31 | //Actions 32 | When.onTheAppPage.iFilterForItems("completed"); 33 | 34 | // Assertions 35 | Then.onTheAppPage.iShouldSeeItemCount(1); 36 | 37 | // Cleanup 38 | Then.iTeardownMyApp(); 39 | }); 40 | 41 | opaTest("should show correct items when filtering for 'Completed' items and switch back to 'All'", (Given, When, Then) => { 42 | 43 | // Arrangements 44 | Given.iStartMyApp(); 45 | 46 | //Actions 47 | When.onTheAppPage.iFilterForItems("completed"); 48 | 49 | // Assertions 50 | Then.onTheAppPage.iShouldSeeItemCount(1); 51 | 52 | //Actions 53 | When.onTheAppPage.iFilterForItems("all"); 54 | 55 | // Assertions 56 | Then.onTheAppPage.iShouldSeeItemCount(2); 57 | 58 | // Cleanup 59 | Then.iTeardownMyApp(); 60 | }); 61 | 62 | }); 63 | -------------------------------------------------------------------------------- /webapp/test/integration/SearchJourney.js: -------------------------------------------------------------------------------- 1 | /* global QUnit */ 2 | 3 | sap.ui.define([ 4 | "sap/ui/Device", 5 | "sap/ui/test/opaQunit", 6 | "./pages/App" 7 | ], (Device, opaTest) => { 8 | "use strict"; 9 | 10 | QUnit.module("Search"); 11 | 12 | if (Device.browser.mobile) { 13 | // Search functionality is currently not support on mobile devices 14 | return; 15 | } 16 | 17 | opaTest("should show correct item count after search (1)", (Given, When, Then) => { 18 | 19 | // Arrangements 20 | Given.iStartMyApp(); 21 | 22 | //Actions 23 | When.onTheAppPage.iEnterTextForSearchAndPressEnter("earn"); 24 | 25 | // Assertions 26 | Then.onTheAppPage.iShouldSeeItemCount(1); 27 | 28 | // Cleanup 29 | Then.iTeardownMyApp(); 30 | }); 31 | 32 | opaTest("should show correct item count after search (0)", (Given, When, Then) => { 33 | 34 | // Arrangements 35 | Given.iStartMyApp(); 36 | 37 | //Actions 38 | When.onTheAppPage.iEnterTextForSearchAndPressEnter("there should not be an item for this search"); 39 | 40 | // Assertions 41 | Then.onTheAppPage.iShouldSeeItemCount(0); 42 | 43 | // Cleanup 44 | Then.iTeardownMyApp(); 45 | }); 46 | 47 | opaTest("should show correct item count after search and clearing the search", (Given, When, Then) => { 48 | 49 | // Arrangements 50 | Given.iStartMyApp(); 51 | 52 | //Actions 53 | When.onTheAppPage.iEnterTextForSearchAndPressEnter("earn") 54 | .and.iEnterTextForSearchAndPressEnter(""); 55 | 56 | // Assertions 57 | Then.onTheAppPage.iShouldSeeItemCount(2); 58 | 59 | // Cleanup 60 | Then.iTeardownMyApp(); 61 | }); 62 | 63 | opaTest("should show correct item count after search and active items filter", (Given, When, Then) => { 64 | 65 | // Arrangements 66 | Given.iStartMyApp(); 67 | 68 | //Actions 69 | When.onTheAppPage.iEnterTextForSearchAndPressEnter("earn") 70 | .and.iFilterForItems("active"); 71 | 72 | // Assertions 73 | Then.onTheAppPage.iShouldSeeItemCount(1); 74 | 75 | // Cleanup 76 | Then.iTeardownMyApp(); 77 | }); 78 | 79 | opaTest("should show correct item count after search and completed items filter", (Given, When, Then) => { 80 | 81 | // Arrangements 82 | Given.iStartMyApp(); 83 | 84 | //Actions 85 | When.onTheAppPage.iEnterTextForSearchAndPressEnter("earn") 86 | .and.iFilterForItems("completed"); 87 | 88 | // Assertions 89 | Then.onTheAppPage.iShouldSeeItemCount(0); 90 | 91 | // Cleanup 92 | Then.iTeardownMyApp(); 93 | }); 94 | 95 | opaTest("should show correct item count after search and all items filter", (Given, When, Then) => { 96 | 97 | // Arrangements 98 | Given.iStartMyApp(); 99 | 100 | //Actions 101 | When.onTheAppPage.iEnterTextForSearchAndPressEnter("earn") 102 | .and.iFilterForItems("all"); 103 | 104 | // Assertions 105 | Then.onTheAppPage.iShouldSeeItemCount(1); 106 | 107 | // Cleanup 108 | Then.iTeardownMyApp(); 109 | }); 110 | 111 | }); 112 | -------------------------------------------------------------------------------- /webapp/test/integration/TodoListJourney.js: -------------------------------------------------------------------------------- 1 | /* global QUnit */ 2 | 3 | sap.ui.define([ 4 | "sap/ui/test/opaQunit", 5 | "./pages/App" 6 | ], (opaTest) => { 7 | "use strict"; 8 | 9 | QUnit.module("Todo List"); 10 | 11 | opaTest("should add an item", (Given, When, Then) => { 12 | 13 | // Arrangements 14 | Given.iStartMyApp(); 15 | 16 | //Actions 17 | When.onTheAppPage.iEnterTextForNewItemAndPressEnter("my test"); 18 | 19 | // Assertions 20 | Then.onTheAppPage.iShouldSeeTheItemBeingAdded(3, "my test"); 21 | 22 | // Cleanup 23 | Then.iTeardownMyApp(); 24 | }); 25 | 26 | opaTest("should remove a completed item", (Given, When, Then) => { 27 | 28 | // Arrangements 29 | Given.iStartMyApp(); 30 | 31 | //Actions 32 | When.onTheAppPage.iEnterTextForNewItemAndPressEnter("my test") 33 | .and.iSelectAllItems(true) 34 | .and.iClearTheCompletedItems() 35 | .and.iEnterTextForNewItemAndPressEnter("my test"); 36 | 37 | // Assertions 38 | Then.onTheAppPage.iShouldSeeAllButOneItemBeingRemoved("my test"); 39 | 40 | // Cleanup 41 | Then.iTeardownMyApp(); 42 | }); 43 | 44 | opaTest("should select an item", (Given, When, Then) => { 45 | 46 | // Arrangements 47 | Given.iStartMyApp(); 48 | 49 | //Actions 50 | When.onTheAppPage.iEnterTextForNewItemAndPressEnter("my test") 51 | .and.iSelectTheLastItem(true); 52 | 53 | // Assertions 54 | Then.onTheAppPage.iShouldSeeTheLastItemBeingCompleted(true); 55 | 56 | // Cleanup 57 | Then.iTeardownMyApp(); 58 | }); 59 | 60 | opaTest("should unselect an item", (Given, When, Then) => { 61 | 62 | // Arrangements 63 | Given.iStartMyApp(); 64 | 65 | //Actions 66 | When.onTheAppPage.iEnterTextForNewItemAndPressEnter("my test") 67 | .and.iSelectAllItems(true) 68 | .and.iClearTheCompletedItems() 69 | .and.iEnterTextForNewItemAndPressEnter("my test") 70 | .and.iSelectTheLastItem(true) 71 | .and.iSelectTheLastItem(false); 72 | 73 | // Assertions 74 | Then.onTheAppPage.iShouldSeeTheLastItemBeingCompleted(false); 75 | 76 | // Cleanup 77 | Then.iTeardownMyApp(); 78 | }); 79 | }); 80 | -------------------------------------------------------------------------------- /webapp/test/integration/arrangements/Startup.js: -------------------------------------------------------------------------------- 1 | sap.ui.define([ 2 | "sap/ui/test/Opa5" 3 | ], (Opa5) => { 4 | "use strict"; 5 | 6 | return Opa5.extend("sap.ui.demo.todo.test.integration.arrangements.Startup", { 7 | 8 | iStartMyApp() { 9 | this.iStartMyUIComponent({ 10 | componentConfig: { 11 | name: "sap.ui.demo.todo", 12 | async: true, 13 | manifest: true 14 | } 15 | }); 16 | } 17 | 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /webapp/test/integration/opaTests.qunit.js: -------------------------------------------------------------------------------- 1 | sap.ui.define([ 2 | "sap/ui/test/Opa5", 3 | "./arrangements/Startup", 4 | "./TodoListJourney", 5 | "./SearchJourney", 6 | "./FilterJourney" 7 | ], (Opa5, Startup) => { 8 | "use strict"; 9 | 10 | Opa5.extendConfig({ 11 | arrangements: new Startup(), 12 | autoWait: true 13 | }); 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /webapp/test/integration/pages/App.js: -------------------------------------------------------------------------------- 1 | sap.ui.require([ 2 | "sap/ui/Device", 3 | "sap/ui/test/Opa5", 4 | "sap/ui/test/matchers/AggregationLengthEquals", 5 | "sap/ui/test/matchers/PropertyStrictEquals", 6 | "sap/ui/test/matchers/Properties", 7 | "sap/ui/test/actions/EnterText", 8 | "sap/ui/test/actions/Press" 9 | ], (Device, Opa5, AggregationLengthEquals, PropertyStrictEquals, Properties, EnterText, Press) => { 10 | "use strict"; 11 | 12 | const sViewName = "sap.ui.demo.todo.view.App"; 13 | const sAddToItemInputId = "addTodoItemInput"; 14 | const sSearchTodoItemsInputId = "searchTodoItemsInput"; 15 | const sItemListId = "todoList"; 16 | const sToolbarId = Device.browser.mobile ? "toolbar-footer" : "toolbar"; 17 | const sClearCompletedId = Device.browser.mobile ? "clearCompleted-footer" : "clearCompleted"; 18 | 19 | Opa5.createPageObjects({ 20 | onTheAppPage: { 21 | 22 | actions: { 23 | iEnterTextForNewItemAndPressEnter(text) { 24 | return this.waitFor({ 25 | id: sAddToItemInputId, 26 | viewName: sViewName, 27 | actions: [new EnterText({ text: text })], 28 | errorMessage: "The text cannot be entered" 29 | }); 30 | }, 31 | iEnterTextForSearchAndPressEnter(text) { 32 | this._waitForToolbar(); 33 | return this.waitFor({ 34 | id: sSearchTodoItemsInputId, 35 | viewName: sViewName, 36 | actions: [new EnterText({ text: text })], 37 | errorMessage: "The text cannot be entered" 38 | }); 39 | }, 40 | iSelectTheLastItem(bSelected) { 41 | return this.waitFor({ 42 | id: sItemListId, 43 | viewName: sViewName, 44 | // selectionChange 45 | actions: [(oList) => { 46 | const iLength = oList.getItems().length; 47 | const oListItem = oList.getItems()[iLength - 1].getContent()[0].getItems()[0]; 48 | this._triggerCheckboxSelection(oListItem, bSelected); 49 | }], 50 | errorMessage: "Last checkbox cannot be pressed" 51 | }); 52 | }, 53 | iSelectAllItems(bSelected) { 54 | return this.waitFor({ 55 | id: sItemListId, 56 | viewName: sViewName, 57 | actions: [(oList) => { 58 | 59 | oList.getItems().forEach((oListItem) => { 60 | const oCheckbox = oListItem.getContent()[0].getItems()[0]; 61 | this._triggerCheckboxSelection(oCheckbox, bSelected) 62 | 63 | }); 64 | }], 65 | errorMessage: "checkbox cannot be pressed" 66 | }); 67 | }, 68 | _triggerCheckboxSelection(oListItem, bSelected) { 69 | //determine existing selection state and ensure that it becomes bSelected 70 | if (oListItem.getSelected() && !bSelected || !oListItem.getSelected() && bSelected) { 71 | const oPress = new Press(); 72 | //search within the CustomListItem for the checkbox id ending with 'selectMulti-CB' 73 | oPress.controlAdapters["sap.m.CustomListItem"] = "selectMulti-CB"; 74 | oPress.executeOn(oListItem); 75 | } 76 | }, 77 | iClearTheCompletedItems() { 78 | this._waitForToolbar(); 79 | return this.waitFor({ 80 | id: sClearCompletedId, 81 | viewName: sViewName, 82 | actions: [new Press()], 83 | errorMessage: "checkbox cannot be pressed" 84 | }); 85 | }, 86 | iFilterForItems(filterKey) { 87 | this._waitForToolbar(); 88 | return this.waitFor({ 89 | viewName: sViewName, 90 | controlType: "sap.m.SegmentedButtonItem", 91 | matchers: [ 92 | new Properties({ key: filterKey }) 93 | ], 94 | actions: [new Press()], 95 | errorMessage: "SegmentedButton can not be pressed" 96 | }); 97 | }, 98 | _waitForToolbar() { 99 | this.waitFor({ 100 | id: sToolbarId, 101 | viewName: sViewName, 102 | success: (oToolbar) => { 103 | return this.waitFor({ 104 | controlType: "sap.m.ToggleButton", 105 | visible: false, 106 | success: (aToggleButtons) => { 107 | const oToggleButton = aToggleButtons.find((oButton) => oButton.getId().startsWith(oToolbar.getId()) && oButton.getParent() === oToolbar) 108 | if (oToggleButton) { 109 | this.waitFor({ 110 | id: oToggleButton.getId(), 111 | actions: new Press() 112 | }); 113 | } else { 114 | Opa5.assert.ok(true, "The overflow toggle button is not present"); 115 | } 116 | } 117 | }) 118 | } 119 | }); 120 | } 121 | }, 122 | 123 | assertions: { 124 | iShouldSeeTheItemBeingAdded(iItemCount, sLastAddedText) { 125 | return this.waitFor({ 126 | id: sItemListId, 127 | viewName: sViewName, 128 | matchers: [new AggregationLengthEquals({ 129 | name: "items", 130 | length: iItemCount 131 | }), (oControl) => { 132 | const iLength = oControl.getItems().length; 133 | const oInput = oControl.getItems()[iLength - 1].getContent()[0].getItems()[1].getItems()[0]; 134 | return new PropertyStrictEquals({ 135 | name: "text", 136 | value: sLastAddedText 137 | }).isMatching(oInput); 138 | }], 139 | success() { 140 | Opa5.assert.ok(true, "The table has " + iItemCount + " item(s), with '" + sLastAddedText + "' as last item"); 141 | }, 142 | errorMessage: "List does not have expected entry '" + sLastAddedText + "'." 143 | }); 144 | }, 145 | iShouldSeeTheLastItemBeingCompleted(bSelected) { 146 | return this.waitFor({ 147 | id: sItemListId, 148 | viewName: sViewName, 149 | matchers: [(oControl) => { 150 | const iLength = oControl.getItems().length; 151 | const oCheckbox = oControl.getItems()[iLength - 1].getContent()[0].getItems()[0]; 152 | return bSelected && oCheckbox.getSelected() || !bSelected && !oCheckbox.getSelected(); 153 | }], 154 | success() { 155 | Opa5.assert.ok(true, "The last item is marked as completed"); 156 | }, 157 | errorMessage: "The last item is not disabled." 158 | }); 159 | }, 160 | iShouldSeeAllButOneItemBeingRemoved(sLastItemText) { 161 | return this.waitFor({ 162 | id: sItemListId, 163 | viewName: sViewName, 164 | matchers: [new AggregationLengthEquals({ 165 | name: "items", 166 | length: 1 167 | }), (oControl) => { 168 | const oInput = oControl.getItems()[0].getContent()[0].getItems()[1].getItems()[0]; 169 | return new PropertyStrictEquals({ 170 | name: "text", 171 | value: sLastItemText 172 | }).isMatching(oInput); 173 | }], 174 | success() { 175 | Opa5.assert.ok(true, "The table has 1 item, with '" + sLastItemText + "' as Last item"); 176 | }, 177 | errorMessage: "List does not have expected entry '" + sLastItemText + "'." 178 | }); 179 | }, 180 | iShouldSeeItemCount(iItemCount) { 181 | return this.waitFor({ 182 | id: sItemListId, 183 | viewName: sViewName, 184 | matchers: [new AggregationLengthEquals({ 185 | name: "items", 186 | length: iItemCount 187 | })], 188 | success() { 189 | Opa5.assert.ok(true, "The table has " + iItemCount + " item(s)"); 190 | }, 191 | errorMessage: "List does not have expected number of items '" + iItemCount + "'." 192 | }); 193 | } 194 | } 195 | 196 | } 197 | }); 198 | 199 | }); 200 | -------------------------------------------------------------------------------- /webapp/test/testsuite.qunit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | QUnit test suite for Todo App 6 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /webapp/test/testsuite.qunit.js: -------------------------------------------------------------------------------- 1 | sap.ui.define(function () { 2 | "use strict"; 3 | return { 4 | name: "QUnit test suite for Todo App", 5 | defaults: { 6 | page: "ui5://test-resources/sap/ui/demo/todo/Test.qunit.html?testsuite={suite}&test={name}", 7 | qunit: { 8 | version: 2 9 | }, 10 | sinon: { 11 | version: 4 12 | }, 13 | ui5: { 14 | language: "EN", 15 | theme: "sap_horizon" 16 | }, 17 | coverage: { 18 | only: "sap/ui/demo/todo/", 19 | never: "test-resources/sap/ui/demo/todo/" 20 | }, 21 | loader: { 22 | paths: { 23 | "sap/ui/demo/todo": "../" 24 | } 25 | } 26 | }, 27 | tests: { 28 | "unit/unitTests": { 29 | title: "Unit tests for Todo App" 30 | }, 31 | "integration/opaTests": { 32 | title: "Integration tests for Todo App" 33 | } 34 | } 35 | }; 36 | }); 37 | -------------------------------------------------------------------------------- /webapp/test/unit/controller/App.controller.js: -------------------------------------------------------------------------------- 1 | /* global QUnit, sinon */ 2 | 3 | sap.ui.define([ 4 | "sap/ui/demo/todo/controller/App.controller", 5 | "sap/ui/model/json/JSONModel" 6 | ], (AppController, JSONModel) => { 7 | "use strict"; 8 | 9 | let oAppController; 10 | 11 | QUnit.module("App.controller.js", { 12 | 13 | beforeEach() { 14 | oAppController = new AppController(); 15 | }, 16 | 17 | afterEach() { 18 | oAppController.destroy(); 19 | } 20 | }); 21 | 22 | QUnit.test("getI18NKey", (assert) => { 23 | assert.strictEqual(oAppController.getI18NKey(), undefined); 24 | assert.strictEqual(oAppController.getI18NKey(undefined, "My Todo"), "ITEMS_CONTAINING"); 25 | assert.strictEqual(oAppController.getI18NKey("all"), undefined); 26 | assert.strictEqual(oAppController.getI18NKey("active"), "ACTIVE_ITEMS"); 27 | assert.strictEqual(oAppController.getI18NKey("active", "My Todo"), "ACTIVE_ITEMS_CONTAINING"); 28 | assert.strictEqual(oAppController.getI18NKey("completed"), "COMPLETED_ITEMS"); 29 | assert.strictEqual(oAppController.getI18NKey("completed", "My Todo"), "COMPLETED_ITEMS_CONTAINING"); 30 | }); 31 | 32 | 33 | QUnit.test("removeCompletedTodos", (assert) => { 34 | const aTodos = [{title: "My Todo", completed: false}, {title: "My Todo 2", completed: false}]; 35 | oAppController.removeCompletedTodos(aTodos); 36 | assert.deepEqual(aTodos, [{title: "My Todo", completed: false}, {title: "My Todo 2", completed: false}]); 37 | 38 | aTodos[1].completed = true; 39 | oAppController.removeCompletedTodos(aTodos) 40 | assert.deepEqual(aTodos, [{title: "My Todo", completed: false}]); 41 | }); 42 | 43 | 44 | QUnit.test("getTodos", (assert) => { 45 | // Prepare 46 | const oViewStub = {}; 47 | oViewStub.getModel = () => { 48 | return new JSONModel(); 49 | }; 50 | const oGetViewStub = sinon.stub(oAppController, "getView"); 51 | oGetViewStub.returns(oViewStub); 52 | 53 | // Act 54 | assert.deepEqual(oAppController.getTodos(), []); 55 | 56 | // Clean-up 57 | oGetViewStub.restore(); 58 | }); 59 | }); 60 | -------------------------------------------------------------------------------- /webapp/test/unit/unitTests.qunit.js: -------------------------------------------------------------------------------- 1 | sap.ui.define([ 2 | "./controller/App.controller" 3 | ]); 4 | -------------------------------------------------------------------------------- /webapp/util/Helper.js: -------------------------------------------------------------------------------- 1 | sap.ui.define(["require"], (require) => { 2 | "use strict"; 3 | return { 4 | resolvePath(sPath) { 5 | // Relative to application root 6 | return require.toUrl("../") + sPath; 7 | } 8 | }; 9 | }); 10 | -------------------------------------------------------------------------------- /webapp/view/App.view.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |