├── .github └── workflows │ └── reuse-compliance.yml ├── .gitignore ├── .reuse └── dep5 ├── DEV160.pdf ├── LICENSE ├── LICENSES └── Apache-2.0.txt ├── README.md └── exercises ├── ex0 ├── README.md └── images │ ├── 00_01_0010.png │ ├── 00_01_0020.png │ ├── 00_01_0030.png │ └── 00_01_0040.png ├── ex1 ├── README.md └── images │ ├── 01_01_0010.png │ ├── 01_01_0010b.png │ ├── 01_01_0015b.png │ ├── 01_01_0020.png │ ├── 01_01_0020b.png │ ├── 01_01_0025b.png │ ├── 01_01_0027b.png │ ├── 01_01_0030.png │ ├── 01_01_0030b.png │ ├── 01_01_0040.png │ ├── 01_01_0050.png │ ├── 01_01_0050b.png │ ├── 01_01_0051b.png │ ├── 01_01_0060.png │ ├── 01_01_0060b.png │ ├── 01_01_0065b.png │ ├── 01_01_0070.png │ ├── 01_01_0070b.png │ ├── 01_01_0071b.png │ ├── 01_01_0080.png │ ├── 01_01_0090.png │ ├── 01_02_0005b.png │ ├── 01_02_0010.png │ ├── 01_02_0010b.png │ ├── 01_02_0020.png │ ├── 01_02_0020b.png │ ├── 01_02_0025b.png │ ├── 01_02_0027b.png │ ├── 01_02_0030.png │ ├── 01_02_0040.png │ ├── 01_02_0040b.png │ ├── 01_02_0050.png │ ├── 01_02_0060.png │ ├── 01_02_0070.png │ ├── 01_02_0080.png │ ├── 01_02_0090.png │ ├── 01_02_0100.png │ └── 01_02_05b.png ├── ex10 ├── README.md └── images │ ├── 10_01_0010.png │ ├── 10_02_0010.png │ ├── 10_02_0020.png │ ├── 10_02_0030.png │ └── 10_02_0040.png ├── ex11 ├── README.md └── images │ ├── 11_01_0010.png │ ├── 11_01_0020.png │ ├── 11_01_0030.png │ ├── 11_01_0040.png │ ├── 11_01_0050.png │ ├── 11_02_0010.png │ ├── 11_02_0020.png │ ├── 11_02_0030.png │ ├── 11_02_0040.png │ ├── 11_02_0050.png │ ├── 11_02_0060.png │ ├── 11_02_0070.png │ ├── 11_03_0010.png │ ├── 11_03_0020.png │ ├── 11_03_0030.png │ ├── 11_03_0040.png │ ├── 11_04_0010.png │ ├── 11_06_0010.png │ ├── 11_06_0020.png │ ├── 11_07_0010.png │ ├── 11_07_0020.png │ ├── 11_07_0030.png │ └── 11_07_0040.png ├── ex12 ├── README.md └── images │ ├── 12_01_0010.png │ ├── 12_02.png │ └── 12_03_0040.png ├── ex2 ├── README.md └── images │ ├── 02_02_0010.png │ ├── 02_02_0020.png │ └── 02_02_0030.png ├── ex3 ├── README.md ├── data │ └── sensors.json └── images │ ├── 03_01_0010.png │ ├── 03_01_0020.png │ ├── 03_03_0010.png │ └── 03_04_0010.png ├── ex4 ├── README.md └── images │ ├── 04_01_0010.png │ ├── 04_03_0010.png │ └── 04_03_0020.png ├── ex5 ├── README.md └── images │ ├── 05_02_0010.png │ ├── 05_02_0020.png │ ├── 05_03_0010.png │ └── 05_05_0010.png ├── ex6 ├── README.md └── images │ ├── 06_01_0010.png │ ├── 06_03_0010.png │ └── 06_04_0010.png ├── ex7 ├── README.md └── images │ ├── 07_01_0010.png │ ├── 07_01_0020.png │ ├── 07_03_0010.png │ ├── 07_06_0010.png │ ├── 07_06_0020.png │ └── 07_06_0030.png ├── ex8 ├── README.md └── images │ ├── 08_01_0010.png │ ├── 08_01_0020.png │ ├── 08_02_0010.png │ ├── 08_04_0010.png │ ├── 08_05_0010.png │ ├── 08_05_0020.png │ ├── 08_06_0010.png │ ├── 08_06_0020.png │ └── 08_06_0030.png └── ex9 ├── README.md └── images ├── 09_02_0010.png ├── 09_03_0010.png └── 09_03_0020.png /.github/workflows/reuse-compliance.yml: -------------------------------------------------------------------------------- 1 | name: REUSE Compliance Check 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | - name: REUSE Compliance Check 11 | uses: fsfe/reuse-action@v1.1 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.reuse/dep5: -------------------------------------------------------------------------------- 1 | Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/ 2 | Upstream-Name: teched2021-DEV160 3 | Upstream-Contact: Martin Haeuser 4 | Source: https://github.com/sap-samples/teched2021-DEV160 5 | Disclaimer: The code in this project may include calls to APIs (“API Calls”) of 6 | SAP or third-party products or services developed outside of this project 7 | (“External Products”). 8 | “APIs” means application programming interfaces, as well as their respective 9 | specifications and implementing code that allows software to communicate with 10 | other software. 11 | API Calls to External Products are not licensed under the open source license 12 | that governs this project. The use of such API Calls and related External 13 | Products are subject to applicable additional agreements with the relevant 14 | provider of the External Products. In no event shall the open source license 15 | that governs this project grant any rights in or to any External Products,or 16 | alter, expand or supersede any terms of the applicable additional agreements. 17 | If you have a valid license agreement with SAP for the use of a particular SAP 18 | External Product, then you may make use of any API Calls included in this 19 | project’s code for that SAP External Product, subject to the terms of such 20 | license agreement. If you do not have a valid license agreement for the use of 21 | a particular SAP External Product, then you may only make use of any API Calls 22 | in this project for that SAP External Product for your internal, non-productive 23 | and non-commercial test and evaluation of such API Calls. Nothing herein grants 24 | you any rights to use or access any SAP External Product, or provide any third 25 | parties the right to use of access any SAP External Product, through API Calls. 26 | 27 | Files: * 28 | Copyright: 2021 SAP SE or an SAP affiliate company and teched2021-DEV160 contributors 29 | License: Apache-2.0 30 | -------------------------------------------------------------------------------- /DEV160.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/DEV160.pdf -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 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 | 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Deprecation Notice 2 | 3 | This public repository is read-only and no longer maintained. 4 | 5 | ![](https://img.shields.io/badge/STATUS-NOT%20CURRENTLY%20MAINTAINED-red.svg?longCache=true&style=flat) 6 | 7 | --- 8 | [![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/teched2021-DEV160)](https://api.reuse.software/info/github.com/SAP-samples/teched2021-DEV160) 9 | 10 | # DEV160 - Scale Application Development with SAPUI5 11 | 12 | ## Description 13 | 14 | This repository contains the material for a beginner workshop about developing applications with SAPUI5, based on the the SAP TechEd 2021 session called **DEV160 – Scale Application Development with SAPUI5**. 15 | 16 | ## Overview 17 | 18 | In this session, you will learn about developing web applications with SAPUI5. You will use the SAP Business Application Studio as development environment and build a small application to get familiar with our latest developer tools and recommendations. The recording of the workshop can be found [here](https://reg.sapevents.sap.com/flow/sap/sapteched2021/portal/page/sessions/session/1630367368989001368Q). 19 | 20 | ## Requirements 21 | 22 | The requirements to follow the exercises in this repository are: 23 | - Get a free trial account on SAP BTP; see this [tutorial](https://developers.sap.com/tutorials/hcp-create-trial-account.html). 24 | - Enable Cloud Foundry and create an organization e.g. *ui5-cloud-foundry*; see the [help portal](https://help.sap.com/viewer/a96b1df8525f41f79484717368e30626/Cloud/en-US/dc18bac42270468d84b6c030a668e003.html). 25 | - Set Up SAP Business Application Studio for development; see this [tutorial](https://developers.sap.com/tutorials/appstudio-onboarding.html). 26 | - Be excited about the power of SAP technologies to make your developer life easier. 27 | 28 | 29 | ## Exercises 30 | - [Introduction](DEV160.pdf) 31 | - [Getting Started](exercises/ex0/) 32 | - [Exercise 1 - Project Setup Using Business Application Studio](exercises/ex1/) 33 | - [Exercise 1.1 - Create a New UI5 Application](exercises/ex1#exercise-11---create-a-new-ui5-application) 34 | - [Exercise 1.2 - Try out the generated Application](exercises/ex1#exercise-12---try-out-the-generated-application) 35 | - [Exercise 2 - Basic UI5 Configuration and View Creation](exercises/ex2/) 36 | - [Exercise 2.1 - Switch to SAP Fiori 3](exercises/ex2#exercise-21---switch-to-sap-fiori-3) 37 | - [Exercise 2.2 - Create Sensors.view.xml](exercises/ex2#exercise-22---create-sensorsviewxml) 38 | - [Exercise 2.3 - Add Dependencies](exercises/ex2#exercise-23---add-dependencies) 39 | - [Exercise 2.4 - Enable Routing for Sensors.view.xml](exercises/ex2#exercise-24---enable-routing-for-sensorsviewxml) 40 | - [Exercise 3 - Show Sensor Content](exercises/ex3/) 41 | - [Exercise 3.1 - Import Sensor Data](exercises/ex3#exercise-31---import-sensor-data) 42 | - [Exercise 3.2 - Configure a Data Service](exercises/ex3#exercise-32---configure-a-data-service) 43 | - [Exercise 3.3 - Add a GridList](exercises/ex3#exercise-33---add-a-gridlist) 44 | - [Exercise 3.4 - Add Data Binding](exercises/ex3#exercise-34---add-data-binding) 45 | - [Exercise 4 - Introduce Localization](exercises/ex4/) 46 | - [Exercise 4.1 - Replacing Hard Coded Text with i18n Variables](exercises/ex4#exercise-41---replacing-hard-coded-text-with-i18n-variables) 47 | - [Exercise 4.2 - Add Additional Languages](exercises/ex4#exercise-42---add-additional-languages) 48 | - [Exercise 4.3 - Configure Supported Languages](exercises/ex4#exercise-43---configure-supported-languages) 49 | - [Exercise 5 - Improve Visualization](exercises/ex5/) 50 | - [Exercise 5.1 - Enhance Sensors.view.xml](exercises/ex5#exercise-51---enhance-sensorsviewxml) 51 | - [Exercise 5.2 - Create Sensors.controller.js](exercises/ex5#exercise-52---create-sensorscontrollerjs) 52 | - [Exercise 5.3 - Assign Controller to View](exercises/ex5#exercise-53---assign-controller-to-view) 53 | - [Exercise 5.4 - Create your first Formatter](exercises/ex5#exercise-54---create-your-first-formatter) 54 | - [Exercise 5.5 - Add the Formatter in your View](exercises/ex5#exercise-55---add-the-formatter-in-your-view) 55 | - [Exercise 6 - Filtering With the IconTabBar](exercises/ex6/) 56 | - [Exercise 6.1 - Add new IconTabFilters to the Sensors.view.xml](exercises/ex6#exercise-61---add-new-icontabfilters-to-the-sensorsviewxml) 57 | - [Exercise 6.2 - Implement the Filtering](exercises/ex6#exercise-62---implement-the-filtering) 58 | - [Exercise 6.3 - Assign the Filtering to the IconTabBar](exercises/ex6#exercise-63---assign-the-filtering-to-the-icontabbar) 59 | - [Exercise 6.4 - Display the Total Number of Sensors in Every IconTabFilter](exercises/ex6#exercise-64---display-the-total-number-of-sensors-in-every-icontabfilter) 60 | - [Exercise 7 - Fragment Containing a SelectDialog](exercises/ex7/) 61 | - [Exercise 7.1 - Create a new Fragment Definition](exercises/ex7#exercise-71---create-a-new-fragment-definition) 62 | - [Exercise 7.2 - Implement the Dialog Opening Logic](exercises/ex7#exercise-72---implement-the-dialog-opening-logic) 63 | - [Exercise 7.3 - Add a Dialog Opening Button](exercises/ex7#exercise-73---add-a-dialog-opening-button) 64 | - [Exercise 7.4 - Implement the 'Filter Customer' Logic](exercises/ex7#exercise-74---implement-the-filter-customer-logic) 65 | - [Exercise 7.5 - Implement the 'Select Customer' Logic](exercises/ex7#exercise-75---implement-the-select-customer-logic) 66 | - [Exercise 7.6 - Assign the 'Customer Change' and 'Customer Select' Logic to the Dialog](exercises/ex7#exercise-76---assign-the-customer-change-and-select-logic-to-the-dialog) 67 | - [Exercise 8 - Second View with Navigation](exercises/ex8/) 68 | - [Exercise 8.1 - Create SensorStatus.view.xml](exercises/ex8#exercise-81---create-sensorstatusviewxml) 69 | - [Exercise 8.2 - Configure the 'manifest.json' file](exercises/ex8#exercise-82---configure-the-manifestjson-file) 70 | - [Exercise 8.3 - Implement the Navigation to the New View](exercises/ex8#exercise-83---implement-the-navigation-to-the-new-view) 71 | - [Exercise 8.4 - Assign the Navigation Logic to the Sensor Items](exercises/ex8#exercise-84---assign-the-navigation-logic-to-the-sensor-items) 72 | - [Exercise 8.5 - Create SensorStatus.controller.js](exercises/ex8#exercise-85---create-sensorstatuscontrollerjs) 73 | - [Exercise 8.6 - Implement the Back-Navigation to Sensors.view.xml](exercises/ex8#exercise-86---implement-the-back-navigation-to-sensorsviewxml) 74 | - [Exercise 9 - Card with NumericHeader](exercises/ex9/) 75 | - [Exercise 9.1 - Add a Card to SensorStatus.view.xml](exercises/ex9#exercise-91---add-a-card-to-sensorstatusviewxml) 76 | - [Exercise 9.2 - Enhance SensorStatus.controller.js](exercises/ex9#exercise-92---enhance-sensorstatuscontrollerjs) 77 | - [Exercise 9.3 - Add a NumericHeader to the Card](exercises/ex9#exercise-93---add-a-numericheader-to-the-card) 78 | - [Exercise 10 - Chart with DataBinding](exercises/ex10/) 79 | - [Exercise 10.1 - Create the Chart](exercises/ex10#exercise-101---create-the-chart) 80 | - [Exercise 10.2 - Master the Chart](exercises/ex10#exercise-102---master-the-chart) 81 | - [Exercise 11 - Deployment to SAP BTP, Cloud Foundry runtime](exercises/ex11/) 82 | - [Exercise 11.1 - Create Space in Cloud Foundry](exercises/ex11#exercise-111---create-space-in-cloud-foundry) 83 | - [Exercise 11.2 - Login to Cloud Foundry](exercises/ex11#exercise-112---login-to-cloud-foundry) 84 | - [Exercise 11.3 - Set Organization and Space](exercises/ex11#exercise-113---set-organization-and-space) 85 | - [Exercise 11.4 - Configure App Router for Redirect](exercises/ex11#exercise-114---configure-the-app-router-for-redirect) 86 | - [Exercise 11.5 - Configure Your UI5 Application](exercises/ex11#exercise-115---configure-your-ui5-application) 87 | - [Exercise 11.6 - Build Your Application](exercises/ex11#exercise-116---build-your-application) 88 | - [Exercise 11.7 - Deploy Your Application](exercises/ex11#exercise-117---deploy-your-application) 89 | - [Exercise 12 - Develop your own Control](exercises/ex12/) 90 | - [Exercise 12.1 - Create the custom control code](exercises/ex12#exercise-121---create-the-custom-control-code) 91 | - [Exercise 12.2 - Beautify your Thermometer Control](exercises/ex12#exercise-122---beautify-your-thermometer-control) 92 | 93 | 94 | ## Download and Installation 95 | Follow these [steps](../../tree/code) to get the code or do the exercises step by step. 96 | 97 | ## Known Issues 98 | No known issues. 99 | 100 | ## Contributing 101 | The content of this repository is meant for a UI5 course. Only course teachers will make contributions to this repository. If you want to enhance the content of this repository feel free to fork it. Bug fixes are welcome, though. 102 | 103 | ## How to obtain support 104 | Support for the content in this repository is available during the actual time of the online session for which this content has been designed. Otherwise, you may request support via the [Issues](../../issues) tab. 105 | 106 | ## Stay in touch 107 | Stay in touch with the community by choosing your favourite channel. 108 | 109 | **UI5**: 110 | * Landing page: [OpenUI5 Website](https://openui5.org/) 111 | * Podcasts series: [UI5 Newscast](https://podcast.opensap.info/ui5-newscast/) 112 | * Blog posts: [UI5ers Buzz](https://blogs.sap.com/tag/ui5ers-buzz/) 113 | * Twitter: [@openui5](https://twitter.com/openui5) 114 | * Slack: [Get Access to OpenUI5 Slack Workspace](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/) 115 | 116 | **SAP Open Source**: 117 | * Landing page: [Run better together with open source](https://developers.sap.com/open-source.html) 118 | * Podcasts series: *[The Open Source Way](https://podcast.opensap.info/open-source-way/2020/10/28/corona-warn-app-behind-the-scenes/)* 119 | * Blog posts: [open source on SAP Community](https://blogs.sap.com/tags/b2aac474-1581-4b1b-8932-de5f60b52558/) 120 | * Twitter: [@sapopensource](https://twitter.com/sapopensource) 121 | 122 | ## License 123 | 124 | Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This repository is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](/LICENSES/Apache-2.0.txt) file. 125 | -------------------------------------------------------------------------------- /exercises/ex0/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | In this exercise, you will logon to your SAP Business Application Studio account, create a dev space, and get a brief overview. 4 | 5 | ## Logon 6 | 7 | After completing these steps you will know how to open SAP Business Application Studio and prepare it for development. 8 | 9 | 1. Open a browser of your choice (Google Chrome, Microsoft Edge, Apple Safari, etc). 10 | 11 | 2. Open SAP Business Application Studio [Academy for Engineering Account](https://mde2103.us10cf.applicationstudio.cloud.sap/index.html) or [Trial Version](https://triallink.eu10.trial.applicationstudio.cloud.sap/) and login with your credentials. If the login doesn't work, make sure you fulfill the [requirements](../../README.md#requirements). 12 | 13 | 3. Now you can create your dev space! Click *Create Dev Space*. 14 |

![](images/00_01_0010.png)

15 | 16 | 4. Enter the new name of your dev space, e.g. *UI5development*, select *SAP Fiori* as application type, and click *Create Dev Space*. 17 |

![](images/00_01_0020.png)

18 | 19 | 5. Your dev space is being prepared and starts up. This might take a few minutes. Wait until the status shows *RUNNING*. 20 |

![](images/00_01_0030.png)

21 | 22 | 6. Click on your dev space name, e.g. *UI5development*. You'll be redirected to your newly created SAP Business Application Studio dev space. 23 |

![](images/00_01_0040.png)

24 | 25 | 7. Bookmark this URL, so it'll be easier for you to access your dev space within SAP Business Application Studio. 26 | 27 | ## Summary 28 | 29 | Congratulations, you completed the [Getting Started](#getting-started) exercise! 30 | 31 | Continue to [Exercise 1 - Project Setup Using Business Application Studio](../ex1/README.md). 32 | -------------------------------------------------------------------------------- /exercises/ex0/images/00_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex0/images/00_01_0010.png -------------------------------------------------------------------------------- /exercises/ex0/images/00_01_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex0/images/00_01_0020.png -------------------------------------------------------------------------------- /exercises/ex0/images/00_01_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex0/images/00_01_0030.png -------------------------------------------------------------------------------- /exercises/ex0/images/00_01_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex0/images/00_01_0040.png -------------------------------------------------------------------------------- /exercises/ex1/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex1) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex1/sensormanager/webapp/) 3 | 4 | # Exercise 1 - Project Setup Using SAP Business Application Studio 5 | 6 | In this exercise you'll create a new UI5 application based on a template provided by SAP Business Application Studio. 7 | 8 | ## Scenario 9 | 10 | Your customer "Keep Cool, Inc." is an operator of several icehouses across the country. Recently, they have been upgraded with new sensors with Internet connection, so that their measuring values are available as a service. To make use of this data and improve their internal workflows, the company asked us to provide an application leveraging this sensor data, visualize it, and provide an overview of the current state of each sensor, so that they can react quickly on any issues. 11 | 12 | ## Exercise 1.1 - Create a New UI5 Application 13 | 14 | After completing these steps you'll have created your first UI5 application. 15 | 16 | 1. Click on *Start from template* on the *Welcome* page. 17 | * [Optional] If you have closed the *Welcome* page accidentally, click in the header toolbar on *View*, and select *Find Command...* Enter *Welcome*. 18 |

![](images/01_01_0010b.png)

19 | 20 | 2. Click on *SAP Fiori application* on as template and click *Start*. 21 |

![](images/01_01_0015b.png)

22 | 23 | 3. Enter the following settings in the *Floorplan Selection* step: 24 | 1. Select *SAPUI5 freestyle* from the dropdown box. 25 | 2. Select *SAPUI5 Application* as application template and click *Next*. 26 |
![](images/01_01_0020b.png)

    27 | 28 | 4. Select *None* as Data Source, since we start without an external data source. Click *Next* 29 |

    ![](images/01_01_0025b.png)

    30 | 31 | 5. Enter *App* as view name in the next step. (we don't really select an entity set, since we start without a data service). 32 |

    ![](images/01_01_0030b.png)

    33 | 34 | 6. Enter the following settings in the *Project Attributes* step: 35 | 1. Enter *sensormanager* as *Module name*. 36 | 2. Choose *Sensor Manager* as *Application title*. 37 | 3. Enter *keepcool* as your namespace. 38 | 4. You can leave the description 39 | 5. Leave the Project folder path as */home/user/projects* . 40 | 6. Select *Add deployment configuration* 41 | 7. Click *Next*.
42 |
![](images/01_01_0051b.png)

    43 | 44 | 7. In the next step, select *Cloud Foundry* as target, leave the Destination name to "None" and make sure that the *Yes* is checked for adding the application to the application router and click *Finish*. 45 |

    ![](images/01_01_0065b.png)

    46 | 47 | 8. The project is generated, and a notification window appears in the lower right corner which will inform you when the project has been generated. Wait for the message that the project has been generated! 48 | 49 | 9. Click the blue *Open Folder* button at the top left of the screen. Alternatively, click *File* in the header toolbar, select *Open Workspace* and pick the generated project. 50 |

    ![](images/01_01_0060b.png)

    51 | 52 | 10. Open the *projects* folder and select the *sensormanager* folder in the dialog and click *open* 53 |

    ![](images/01_01_0071b.png)

    54 | 55 | ## Exercise 1.2 - Try out the generated Application 56 | 57 | It's time for a first preview of your newly created application! 58 | 59 | 1. The Business Application Studio has altready created three so called Run Configurations. 60 | 1. Click the ![](images/01_02_0005b.png) icon in the left icon bar. 61 | 2. Click on the green run icon of the first runconfiguration named *Start sensormanager* 62 | 63 |

    ![](images/01_02_0010b.png)

    64 | 65 | 2. The application is initialized. After a few seconds, the application is started in a new tab of your browser. (It might be neccessary to switch off the pop up blocker) 66 |

    ![](images/01_02_0040b.png)

    67 | 68 | 69 | ## Summary 70 | 71 | Hooray! You've successfully accomplished [Exercise 1 - Project Setup using SAP Business Application Studio](#exercise-1---project-setup-using-sap-business-applicationsstudio)! 72 | 73 | Continue to [Exercise 2 - Basic UI5 Configuration and View Creation](../ex2/README.md). 74 | -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0010.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0010b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0010b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0015b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0015b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0020.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0020b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0020b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0025b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0025b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0027b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0027b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0030.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0030b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0030b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0040.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0050.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0050b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0050b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0051b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0051b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0060.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0060.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0060b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0060b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0065b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0065b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0070.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0070.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0070b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0070b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0071b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0071b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0080.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0080.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_01_0090.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_01_0090.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0005b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0005b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0010.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0010b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0010b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0020.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0020b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0020b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0025b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0025b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0027b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0027b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0030.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0040.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0040b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0040b.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0050.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0060.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0060.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0070.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0070.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0080.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0080.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0090.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0090.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_0100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_0100.png -------------------------------------------------------------------------------- /exercises/ex1/images/01_02_05b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex1/images/01_02_05b.png -------------------------------------------------------------------------------- /exercises/ex10/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex10) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex10/sensormanager/webapp/) 3 | 4 | # Exercise 10 - Chart with Data Binding 5 | 6 | In this exercise you'll add some analytical flavor to your UI5 application by using a chart. 7 | 8 | ## Exercise 10.1 - Create the Chart 9 | 10 | To show some historical data you can use the `temperatureLog` of the sensor data. You'll use an `sap.suite.ui.microchart.InteractiveLineChart`to add the data points. 11 | 12 | 1. Open `sensormanager/webapp/view/SensorStatus.view.xml`. 13 | 14 | 2. Add the `sap.suite.ui.microchart` library to the `SensorStatus.view.xml`. 15 | 16 | ***SensorStatus/webapp/view/SensorStatus.view.xml*** 17 | 18 | ````xml 19 | 26 | ```` 27 | 28 | 3. Add the chart to the content aggregation of the card and bind the `temperatureLog` to the `points` aggregation. For each point we'll display the `temperature` property. 29 | 30 | ***SensorStatus/webapp/view/SensorStatus.view.xml*** 31 | 32 | ````xml 33 | 34 | 39 | 43 | 45 | 46 | 47 | 48 | ```` 49 | 50 | 4. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a chart with a temperature history. 51 |

    ![](images/10_01_0010.png)

    52 | 53 | ## Exercise 10.2 - Master the Chart 54 | 55 | After completing the previous exercises, you are quite experienced in enhancing your UI5 application. Master your chart to show what you've learned. 56 | 57 | 1. Open `sensormanager/webapp/view/SensorStatus.view.xml`. 58 | 59 | 2. Add formatting to every data point to improve readability. In this case we simply change the format of the temperature value to one digit after the comma. You can use expression binding to achieve this. 60 | 61 | ***SensorStatus/webapp/view/SensorStatus.view.xml*** 62 | 63 | ````xml 64 | 66 | ```` 67 | 68 | 3. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a chart with a temperature history with better readability. 69 |

    ![](images/10_02_0010.png)

    70 | 71 | 4. Add semantic coloring to the data points with a formatter function. 72 | 73 | ***SensorStatus/webapp/view/SensorStatus.view.xml*** 74 | 75 | ````xml 76 | 80 | ```` 81 | 82 | 5. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a chart with a temperature history with colored data points. 83 |

    ![](images/10_02_0020.png)

    84 | 85 | 6. Add labels to the chart to provide some contextual info to the user. 86 | 87 | ***SensorStatus/webapp/view/SensorStatus.view.xml*** 88 | 89 | ````xml 90 | 95 | ```` 96 | 97 | 7. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a chart with a temperature history with x-axis labels. 98 |

    ![](images/10_02_0030.png)

    99 | 100 | 8. Displaying timestamps on the x-axis does not make much sense. To improve readability you should format the label using a UI5 "DataType". These types are predefined and can be configured individually regarding the input and output format. 101 | 102 | ***SensorStatus/webapp/view/SensorStatus.view.xml*** 103 | 104 | ````xml 105 | 115 | ```` 116 | 117 | 9. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a chart with a temperature history with readable x-axis labels. 118 |

    ![](images/10_02_0040.png)

    119 | 120 | ## Summary 121 | 122 | Congratulations, you've completed successfully [Exercise 10 - Chart with DataBinding](#exercise-10---chart-with-databinding)! 123 | 124 | Continue to [Exercise 11 - Deployment to SAP BTP, Cloud Foundry runtime](../ex11/README.md). 125 | 126 | 127 | ## Further Information 128 | 129 | * UI5 Microcharts: https://ui5.sap.com/#/topic/9cbe3f06465e47b8a136956034a718ed 130 | * sap.suite.ui.microchart.InteractiveLineChart: https://ui5.sap.com/#/api/sap.suite.ui.microchart.InteractiveLineChart 131 | * Formatting, Parsing, and Validating Data: https://ui5.sap.com/#/topic/07e4b920f5734fd78fdaa236f26236d8 132 | * sap.ui.model.type.Time: https://ui5.sap.com/#/topic/91f322a06f4d1014b6dd926db0e91070 133 | -------------------------------------------------------------------------------- /exercises/ex10/images/10_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex10/images/10_01_0010.png -------------------------------------------------------------------------------- /exercises/ex10/images/10_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex10/images/10_02_0010.png -------------------------------------------------------------------------------- /exercises/ex10/images/10_02_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex10/images/10_02_0020.png -------------------------------------------------------------------------------- /exercises/ex10/images/10_02_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex10/images/10_02_0030.png -------------------------------------------------------------------------------- /exercises/ex10/images/10_02_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex10/images/10_02_0040.png -------------------------------------------------------------------------------- /exercises/ex11/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex11) 2 | 3 | # Exercise 11 - Deploy Your App to SAP BTP, Cloud Foundry runtime 4 | 5 | In this exercise you'll learn how easy it is to deploy your application directly from SAP Business Application Studio to the SAP BTP, Cloud Foundry runtime. 6 | 7 | ## Exercise 11.1 - Create Space in Cloud Foundry 8 | 9 | First of all, you need to create the space in your Cloud Foundry environment to host your newly created UI5 application. 10 | 11 | 1. Open the SAP BTP Trial by opening *https://cockpit.hanatrial.ondemand.com/cockpit/#/home/trial* in a new browser tab and click *Go To Your Trial Account*. 12 |

    ![](images/11_01_0010.png)

    13 | 14 | 2. You're redirected to your personal SAP BTP Cockpit where your subaccounts are listed. Click on the prefered subaccount, e.g. *trial*. 15 |

    ![](images/11_01_0020.png)

    16 | 17 | 3. Click the menu item *Cloud Foundry* and then *Spaces*. Until now, no space was created by you. Click *Create Space*. 18 |

    ![](images/11_01_0030.png)

    19 | 20 | 4. In the popup, enter the space name, e.g. *ui5-apps*. Click *Create*. 21 |

    ![](images/11_01_0040.png)

    22 | 23 | 5. The newly created space is displayed. 24 |

    ![](images/11_01_0050.png)

    25 | 26 | ## Exercise 11.2 - Subscribe to Launchpad Service 27 | 28 | To be able to display deployed UI5 applications we need the Launchpad Service in our trial account. 29 | 1. To subscribe to it, click on *Service Marketplace* and search the Launchpad Service. 30 | 2. Click on the Launchpad Service tile and then on *Create* on the right hand side 31 |

    ![](images/11_02_0060.png)

    32 | 33 | 3. Leave the selected values as they are and click *Create* 34 |

    ![](images/11_02_0070.png)

    35 | 36 | If you now click on *Instance and Subscriptions* you'll see that you have subscribed to the Launchpad Servcice. 37 | ## Exercise 11.3 - Login to Cloud Foundry 38 | 39 | Now you can login to your Cloud Foundry environment directly from SAP Business Application Studio. 40 | 41 | 1. Open SAP Business Application Studio. Click in the header toolbar on *View* and then select *Find Command...*. Enter *CF: Login to cloud foundry*. 42 |

    ![](images/11_02_0010.png)

    43 | 44 | 2. Enter the Cloud Foundry API endpoint you'd like to use. If your environment runs in the EU10 region, this is `https://api.cf.eu10.hana.ondemand.com`. If you wanna host your application in another region, please check [this site](https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/350356d1dc314d3199dca15bd2ab9b0e.html) to get an overview about all available regions and respective API endpoints. 45 |

    ![](images/11_02_0020.png)

    46 | 47 | 3. Enter the email address you have used for registering your SAP BTP account. 48 |

    ![](images/11_02_0030.png)

    49 | 50 | 4. Enter the password for your SAP BTP account. Remember that you have to enter your password followed by your 2FA code in case you have set up 2-Factor-Authentication! 51 |

    ![](images/11_02_0040.png)

    52 | 53 | 5. After a few seconds a small window appears in the lower right corner notifying you that the login was successful. 54 |

    ![](images/11_02_0050.png)

    55 | 56 | 57 | ## Exercise 11.4 - Set Organization and Space 58 | 59 | After logging in you're asked to specify your desired Cloud Foundry organization and space. 60 | 61 | 1. If you are not asked right away to select the organization, then click in the header toolbar on *View* and then select *Find Command...*. Enter *CF: Set Org and Space*. 62 |

    ![](images/11_03_0010.png)

    63 | 64 | 2. Enter your Cloud Foundry organization name e.g. *ui5-cloud-foundry* - or select the ID of your trial account (the first part of the Business Application Studio URL) 65 |

    ![](images/11_03_0020.png)

    66 | 67 | 3. Select your newly created space, e.g. *ui5-apps*. 68 |

    ![](images/11_03_0030.png)

    69 | 70 | 4. After a few seconds a small window appears in the lower right corner notifying you that your organization and space have been set successfully. 71 |

    ![](images/11_03_0040.png)

    72 | 73 | 74 | ## Exercise 11.5 - Configure Your UI5 Application 75 | 76 | Since you created your app using one of the application templates available in SAP Business Application Studio, all files which are located under `sensormanager/test/` and `sensormanager/localService/` are excluded from any build, because in a productive application these files are usually not needed. In our case the sensor data is placed in a local JSON file, so the `sensors.json` file needs to be included in the build. 77 | 78 | 1. Open `sensormanager/ui5-deploy.yaml`. 79 | 80 | 2. Remove the `"/localService/**"` entry for the `builder` section. 81 | 82 | ***sensormanager/ui5-deploy.yaml*** 83 | 84 | ````yaml 85 | builder: 86 | resources: 87 | excludes: 88 | - "/test/**" 89 | ```` 90 | 91 | ## Exercise 11.6 - Build Your Application 92 | 93 | Now it's time to build your application. Yeah! 94 | 95 | 1. Right-click the `mta.yaml` file in the root folder. 96 | 97 | 2. Select *Build MTA Project*. The build starts. 98 |

    ![](images/11_06_0010.png)

    99 | 100 | 3. Once the build has finished the terminal will display messages that the MTA archive has been generated and temporary files are cleaned up: 101 |

    ![](images/11_06_0020.png)

    102 | 103 | 104 | ## Exercise 11.7 - Deploy Your Application 105 | 106 | The build step has created a file named `TechEd2020_0.0.1.mtar` located under `mta_archives`. This file contains your build. 107 | 108 | 1. Right-click `mta_archives/TechEd2020_0.0.1.mtar` and select *Deploy MTA Archive*. Deployment starts. 109 |

    ![](images/11_07_0010.png)

    110 | 111 | 2. You are asked for the organisation and space again. Choose your trial account as organisation and the *ui5-apps* space you just created. 112 | 113 | 3. Deployment takes some time but should have finished after a few minutes, of which you'll be notified by in the terminal. 114 |

    ![](images/11_07_0020.png)

    115 | 116 | 4. The deployed application can be started from the SAP BTP Cockpit. Go to your trial subaccount and click on the *HTML5 Applications* section at tjhe left hand side. The application is listed there as 'keepcoolsensormanager'. Click on it to start it. 117 |

    ![](images/11_07_0030.png)

    118 | 119 | 5. Congratulations! You've deployed your UI5 application to the SAP BTP, Cloud Foundry runtime. 120 |

    ![](images/11_07_0040.png)

    121 | 122 | ## Summary 123 | 124 | Hooray! You've completed successfully [Exercise 11 - Deployment to SAP BTP, Cloud Foundry runtime](../ex11/README.md). But this is not the end yet: 125 | 126 | Continue to [Exercise 12 - Develop your own Control](../ex12/README.md). 127 | -------------------------------------------------------------------------------- /exercises/ex11/images/11_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_01_0010.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_01_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_01_0020.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_01_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_01_0030.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_01_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_01_0040.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_01_0050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_01_0050.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0010.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0020.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0030.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0040.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0050.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0050.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0060.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0060.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_02_0070.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_02_0070.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_03_0010.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_03_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_03_0020.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_03_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_03_0030.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_03_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_03_0040.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_04_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_04_0010.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_06_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_06_0010.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_06_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_06_0020.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_07_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_07_0010.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_07_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_07_0020.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_07_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_07_0030.png -------------------------------------------------------------------------------- /exercises/ex11/images/11_07_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex11/images/11_07_0040.png -------------------------------------------------------------------------------- /exercises/ex12/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex12) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex12/sensormanager/webapp/) 3 | 4 | # Exercise 12 - Develop your own Control 5 | 6 | In this exercise you'll create your own UI5 custom control. Although the color of the thermometer icons shows already the general state in the main page, we want to see the temperature value and the temperature level also displayed graphically. Therefore we create a thermometer control which displays the temperatur with the color and the height of the scale directly. 7 | 8 | ## Exercise 12.1 - Create the Custom Control Code 9 | 10 | 1. Right-click on the `sensormanager/webapp` folder and select `New Folder`. Enter "control" as folder name and confirm. 11 | 12 | 2. Right-click on this newly created `sensormanager/webapp/control` folder and select `New File`. Enter "Thermometer.js" as file name and confirm. 13 | 14 | 3. Add the following thermometer control code as content of the newly created `Thermometer.js` file. The control just renders a simple `div` element which contains the temperature value as text. This will be enhanced later. 15 | 16 | ***sensormanager/webapp/control/Thermometer.js*** 17 | 18 | ````js 19 | sap.ui.define([ 20 | "sap/ui/core/Control" 21 | ], function (Control) { 22 | "use strict"; 23 | return Control.extend("keepcool.sensormanager.control.Thermometer", { 24 | metadata : { 25 | properties : { 26 | value: {type : "float", defaultValue : 0}, 27 | color: {type : "string"} 28 | } 29 | }, 30 | 31 | renderer : { 32 | apiVersion : 2, 33 | render : function (oRM, oControl) { 34 | if (oControl.getValue()){ 35 | oRM.openStart("div", oControl); 36 | oRM.class("thermometer-control"); 37 | oRM.openEnd(); 38 | oRM.text(oControl.getValue()); 39 | oRM.close("div"); 40 | } 41 | } 42 | } 43 | }); 44 | }); 45 | ```` 46 | 47 | 4. Open `sensormanager/css/style.css`. 48 | 49 | 5. Add the css properties for the `div` element which is created by your thermometer control. In the first step it is just a gray square displaying the temparature. 50 | 51 | ***sensormanager/webapp/css/style.css*** 52 | 53 | ````css 54 | /* Enter your custom styles here */ 55 | .thermometer-control { 56 | width: 50px; 57 | height: 80px; 58 | text-align: center; 59 | color: white; 60 | background-color: gray; 61 | } 62 | ```` 63 | 64 | 6. In the file `Sensors.view.xml`, switch from the icon control to your thermometer control. First define a namespace for the control folder like for a library: 65 | 66 | ***sensormanager/webapp/view/Sensors.view.xml*** 67 | 68 | ````xml 69 | 78 | 79 | 80 | ```` 81 | 82 | 6. Replace the icon control with your thermometer control in the view. It will use the same properties as the icon control, but uses a new formatter for the color. 83 | 84 | ***sensormanager/webapp/view/Sensors.view.xml*** 85 | 86 | ````xml 87 | 88 | 89 | 90 | <Label text="{i18n>distanceLabel}:"/> 91 | </VBox> 92 | 93 | <cc:Thermometer 94 | value="{sensorModel>temperature/value}" 95 | color="{path: 'sensorModel>temperature/value', formatter:'.formatThermometerColor'}" 96 | class="sapUiSmallMarginTop sapUiSmallMarginEnd"/> 97 | 98 | <!--core:Icon 99 | src="sap-icon://temperature" 100 | color="{path: 'sensorModel>temperature/value', formatter:'.formatIconColor'}" 101 | size="2.5rem" 102 | class="sapUiSmallMarginTop sapUiSmallMarginEnd"/--> 103 | </HBox> 104 | ```` 105 | 106 | 7. Open the file `Sensors.controller.js` and add the new formatter, which closely resembles the old one, but returns concrete CSS color values. These values can be written directly to the HTML, while the previously used UI5 icon color values were translated by the icon control. 107 | 108 | ***sensormanager/webapp/controller/Sensors.controller.xml*** 109 | 110 | ````js 111 | formatThermometerColor: function(iTemperature) { 112 | var oThreshold = this.getSensorModel().getProperty("/threshold"); 113 | if (!oThreshold) { 114 | return "black"; 115 | } else if (iTemperature < oThreshold.warm) { 116 | return "#1873B4"; // less obtrusive than the standard "blue" 117 | } else if (iTemperature >= oThreshold.warm && iTemperature < oThreshold.hot) { 118 | return "orange"; 119 | } else { 120 | return "red"; 121 | } 122 | }, 123 | ```` 124 | 125 | 8. Reload the preview page and you see the first simple version of your thermometer control. You may have noticed that the calculated color was not yet written to the HTML in the control renderer, so the boxes are all colored the same, as defined in the CSS. 126 | 127 | <br><br>![](images/12_01_0010.png)<br><br> 128 | 129 | 130 | ## Exercise 12.2 - Beautify your Thermometer Control 131 | 132 | Now you want to create a nice looking thermometer, which displays not only the temperature value as number but also using the height of the thermometer scale - with colors. 133 | 134 | 1. Open `sensormanager/webapp/control/Thermometer.js`. 135 | 136 | 2. Enhance the code of the renderer to create several HTML elements which will be used to paint a thermometer. We use three HTML elements (one `<figure>`, one `<figcaption>`, one `<div>`) which are styled using CSS and overlaid on top of each other in a way that makes the result look like a nice thermometer. 137 | 138 | <br><br>![](images/12_02.png)<br><br> 139 | 140 | ***sensormanager/webapp/control/Thermometer.js*** 141 | 142 | ````js 143 | renderer : { 144 | apiVersion : 2, 145 | render : function (oRM, oControl) { 146 | oRM.openStart("figure", oControl); 147 | oRM.class("thermometer"); 148 | oRM.style("border", "2px solid " + oControl.getColor()); 149 | oRM.openEnd(); 150 | 151 | oRM.openStart("figcaption"); 152 | oRM.class("thermometer-value"); 153 | oRM.style("background-color", oControl.getColor()); 154 | oRM.style("box-shadow", "0 0 0 2px " + oControl.getColor()); 155 | oRM.openEnd(); 156 | oRM.text(oControl.getValue().toFixed(1)); // the temperature value 157 | oRM.close("figcaption"); 158 | 159 | oRM.openStart("div"); 160 | oRM.class("thermometer-level"); 161 | var temperatureHeight = Math.min(oControl.getValue() * 7, 50) + 5; // values should range from 5 to 55 162 | oRM.style("height", temperatureHeight + "px"); 163 | oRM.style("background-color", oControl.getColor()); 164 | oRM.openEnd(); 165 | oRM.close("div"); 166 | 167 | oRM.close("figure"); 168 | } 169 | } 170 | ```` 171 | 172 | 3. While some of the CSS properties, like the color and the height of the mercury column, are calculated and have been written by the renderer with the respective current values, most CSS (e.g. for the overall layout information) is static. Now add these static CSS properties to the CSS file of the project. Note how the CSS classes like `thermometer` and `thermometer-value` match those written in the renderer code above. 173 | 174 | ***sensormanager/webapp/css/style.css*** 175 | 176 | ````css 177 | /* Enter your custom styles here */ 178 | .thermometer { 179 | display: block; 180 | position: relative; 181 | box-sizing: border-box; 182 | width: 18px; 183 | height: 60px; 184 | background-color: white; 185 | border-radius: 10px 10px 0 0; 186 | margin: 6px; 187 | } 188 | 189 | .thermometer-value { 190 | position: absolute; 191 | bottom: -22px; 192 | left: -6px; 193 | border: 2px solid white; 194 | width: 22px; 195 | height: 18px; 196 | border-radius: 14px; 197 | color: white; 198 | font-size: 13px; 199 | text-align: center; 200 | padding-top: 4px; 201 | } 202 | 203 | .thermometer-level { 204 | background-color: white; 205 | box-sizing: border-box; 206 | position: absolute; 207 | left: 0; 208 | bottom: 1px; 209 | height: 30px; 210 | width: 14px; 211 | border-left: 2px solid white; 212 | border-right: 2px solid white; 213 | } 214 | ```` 215 | 216 | 4. Switch to the browser tab where the application preview is opened. Now you see your own custom control displaying the temperature also graphically for every icehouse. 217 | <br><br>![](images/12_03_0040.png)<br><br> 218 | 219 | 220 | ## Summary 221 | 222 | Hooray! You've successfully completed [Exercise 12 - Develop your own Control](../ex12/README.md). 223 | 224 | Now it's time to celebrate! By mastering this session you've reached the first level in becoming a UI5 expert. 225 | 226 | ## Further Information 227 | * Developing Controls: https://ui5.sap.com/#/topic/8dcab0011d274051808f959800cabf9f.html 228 | * Walkthrough - Custom Controls: https://ui5.sap.com/#/topic/d12d2ee6a5454d799358d425f9e7c4db 229 | -------------------------------------------------------------------------------- /exercises/ex12/images/12_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex12/images/12_01_0010.png -------------------------------------------------------------------------------- /exercises/ex12/images/12_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex12/images/12_02.png -------------------------------------------------------------------------------- /exercises/ex12/images/12_03_0040.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex12/images/12_03_0040.png -------------------------------------------------------------------------------- /exercises/ex2/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex2) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex2/sensormanager/webapp/) 3 | 4 | # Exercise 2 - Basic UI5 Configuration and View Creation 5 | 6 | In this exercise you'll add some content to your application. A new UI5 view showing multiple sensors will be the first part of your app. 7 | 8 | ## Exercise 2.1 - Check SAP Fiori 3 9 | 10 | SAP Fiori 3 is SAP’s new target design system. It evolves the SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device. SAP Business Application Studio by default generates UI5 projects based on SAP Fiori 3. In your UI5 application the SAP Fiori version is controlled by the UI5 theme. 11 | 12 | 1. Click on the files icon at the top of the icon bar at the left and open `sensormanager/webapp/index.html`. 13 | 14 | 2. Check that the attribute `data-sap-ui-theme` has the value `sap_fiori_3`. 15 | 16 | ***sensormanager/webapp/index.html*** 17 | 18 | ````html 19 | <!DOCTYPE html> 20 | <html> 21 | <head> 22 | <meta charset="utf-8" /> 23 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 24 | <title>sensormanager 25 | 36 | 37 | 38 |
    44 | 45 | 46 | ```` 47 | 48 | ## Exercise 2.2 - Create Sensors.view.xml 49 | 50 | After completing these steps you'll have written your first UI5 view. 51 | 52 | 1. Right-click on the `sensormanager/webapp/view` folder and select `New File`. 53 |

    ![](/exercises/ex2/images/02_02_0010.png)

    54 | 55 | 2. Enter `Sensors.view.xml` as file name and confirm. 56 |

    ![](/exercises/ex2/images/02_02_0020.png)

    57 | 58 | 3. Now we'll add some content to your newly created UI5 view. Let's start with an empty `sap.m.IconTabBar`. 59 | 60 | ***sensormanager/webapp/view/Sensors.view.xml*** 61 | 62 | ````xml 63 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | ```` 77 | 78 | ## Exercise 2.3 - Add Dependencies 79 | 80 | You will use several UI5 libraries like `sap.m` or `sap.f` in your application. The central point for configuring your UI5 application is the `manifest.json` file, which is located at `sensormanager/webapp/manifest.json`. 81 | 82 | 1. Open `sensormanager/webapp/manifest.json`. 83 | 2. Go to the section `sap.ui5`. 84 | 3. Add the `sap.f` and `sap.suite.ui.microchart` libraries to the `dependencies/libs` section. UI5 will take care of loading all the libraries listed here when your app is started. 85 | 86 | ***sensormanager/webapp/manifest.json*** 87 | 88 | ````json 89 | "dependencies": { 90 | "minUI5Version": "1.93.0", 91 | "libs": { 92 | "sap.ui.core": {}, 93 | "sap.ui.layout": {}, 94 | "sap.m": {}, 95 | "sap.f": {}, 96 | "sap.suite.ui.microchart": {} 97 | } 98 | }, 99 | ```` 100 | 101 | ## Exercise 2.4 - Enable Routing for Sensors.view.xml 102 | 103 | UI5 comes with a powerful routing API that helps you control the state of your application efficiently. It takes care of displaying the desired UI5 view based on the given browser URL hash. 104 | 105 | Let's adjust the `manifest.json` to enable the routing feature for your newly created view. 106 | 107 | 1. Open `sensormanager/webapp/manifest.json`. 108 | 2. Go to the section `sap.ui5`. 109 | 3. Replace all content inside the `routing` property with the following content: 110 | 111 | ***sensormanager/webapp/manifest.json*** 112 | 113 | ````json 114 | "routing": { 115 | "config": { 116 | "routerClass": "sap.m.routing.Router", 117 | "viewType": "XML", 118 | "async": true, 119 | "transition": "slide", 120 | "viewPath": "keepcool.sensormanager.view", 121 | "controlAggregation": "pages", 122 | "controlId": "app" 123 | }, 124 | "routes": [{ 125 | "name": "RouteSensors", 126 | "pattern": "", 127 | "target": ["TargetSensors"] 128 | }], 129 | "targets": { 130 | "TargetSensors": { 131 | "viewType": "XML", 132 | "transition": "slide", 133 | "clearControlAggregation": false, 134 | "viewId": "Sensors", 135 | "viewName": "Sensors" 136 | } 137 | } 138 | } 139 | ```` 140 | 141 | 4. Open the tab with the application preview and reload it. The application is being updated, and you can see an empty `sap.m.IconTabBar`. 142 | * [Optional] If you have closed the tab with the application preview accidentally, click in the header toolbar on *View* and then select *Find Command...*. Enter here *Ports: Preview* and confirm. A new tab with the application preview opens. 143 | 144 |

    ![](images/02_02_0030.png)

    145 | 146 | ## Summary 147 | 148 | You've now enabled routing for your application and prepared your application for further development. Stay tuned! 149 | 150 | Continue to [Exercise 3 - Show Sensor Content](../ex3/README.md). 151 | 152 | 153 | ## Further Information 154 | 155 | * UI5 Demokit: https://ui5.sap.com/ 156 | * Views in UI5: https://ui5.sap.com/#/topic/91f27e3e6f4d1014b6dd926db0e91070 157 | * Routing in UI5: https://ui5.sap.com/#/topic/3d18f20bd2294228acb6910d8e8a5fb5 158 | * SAP Fiori 3: https://experience.sap.com/fiori-design-web/sap-fiori/#sap-fiori-3 159 | -------------------------------------------------------------------------------- /exercises/ex2/images/02_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex2/images/02_02_0010.png -------------------------------------------------------------------------------- /exercises/ex2/images/02_02_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex2/images/02_02_0020.png -------------------------------------------------------------------------------- /exercises/ex2/images/02_02_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex2/images/02_02_0030.png -------------------------------------------------------------------------------- /exercises/ex3/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex3) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex3/sensormanager/webapp/) 3 | 4 | # Exercise 3 - Show Sensor Content 5 | 6 | In this exercise you'll add a local data service to the application and display the data on the enhanced UI5 view. 7 | 8 | ## Exercise 3.1 - Import Sensor Data 9 | 10 | To simulate a source providing sensor data, you'll now add some sensor data to your application. 11 | 12 | 1. Go to folder `sensormanager/webapp/localService`. 13 | 14 | 2. Right-click on the `localService` folder. 15 | 16 | 3. Select `New File`. 17 |

    ![](images/03_01_0010.png)

    18 | 19 | 4. Enter `sensors.json` as file name. 20 |

    ![](images/03_01_0020.png)

    21 | 22 | 1. Copy and paste the content of [sensors.json](data/sensors.json) into the newly created file. 23 | 24 | ## Exercise 3.2 - Configure a Data Service 25 | 26 | After adding the sensor data to your application, you'll need to configure the data service which provides the sensor data. 27 | 28 | 1. Open the `manifest.json` file located under `sensormanager/webapp`. 29 | 30 | 2. Go to the section `sap.app`. Here, you add a new `dataSources` section containing a data source with name `sensorSource`, which points to the sensor data. 31 | 32 | ***sensormanager/webapp/manifest.json*** 33 | 34 | ````js 35 | "sap.app": { 36 | ..., 37 | "dataSources": { 38 | "sensorSource": { 39 | "type": "JSON", 40 | "uri": "./localService/sensors.json" 41 | } 42 | } 43 | } 44 | ```` 45 | 46 | 3. Go to the section `sap.ui5`. Here, you add a new JSONModel with name `sensorModel`, which points to the newly created data source. 47 | 48 | ***sensormanager/webapp/manifest.json*** 49 | 50 | ````js 51 | "sap.ui5": { 52 | "models": { 53 | ..., 54 | "sensorModel": { 55 | "type": "sap.ui.model.json.JSONModel", 56 | "dataSource": "sensorSource" 57 | } 58 | } 59 | } 60 | ```` 61 | 62 | ## Exercise 3.3 - Add a GridList 63 | 64 | After configuring the data service, it's now time to enrich your `Sensors.view.xml` with some fancy UI5 controls! 65 | 66 | 1. Open the `Sensors.view.xml` located under `sensormanager/webapp/view`. 67 | 68 | 2. Add `sap.f` and `sap.ui.layout.cssgrid` to the xml namespace declarations to make sure that the required resources are available in your view. 69 | 70 | ***sensormanager/webapp/view/Sensors.view.xml*** 71 | 72 | ````xml 73 | 79 | ```` 80 | 81 | 3. Add `sap.f.GridList` to the `content` aggregation of the IconTabBar. An aggregation is a relation between two UI elements. It is used to define the parent-child relationship within the tree structure. The child end of the relation may have cardinality 0..1 or 0..*. The elements' API offers convenient and consistent methods to deal with aggregations (e.g. to get, set, or remove child elements). Examples are table rows and cells, or the content of a table cell. 82 | 83 | ***sensormanager/webapp/view/Sensors.view.xml*** 84 | 85 | ````xml 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | ```` 97 | 98 | 4. Switch browser tabs and refresh to see the updated UI5 application. 99 |

    ![](images/03_03_0010.png)

    100 | 101 | ## Exercise 3.4 - Add Data Binding 102 | 103 | After adding the `sap.f.GridList` control, you'll need to connect the control to the sensor data. For this, UI5 provides a mechanism called *Data Binding*. 104 | 105 | 1. Open the `Sensors.view.xml` located under `sensormanager/webapp/view`. 106 | 107 | 2. Bind the `items` aggregation of the `sap.f.GridList` to the path `sensorModel>/sensors`. Here, `sensorModel` is the name of your recently defined data model, and `/sensors` points to a property inside it. As this is an array with several entries, you'd probably like to define sorting and grouping as well. In the `sorter` you can configure this by using the properties available: 108 | 109 | ***sensormanager/webapp/view/Sensors.view.xml*** 110 | 111 | ````xml 112 | 116 | ```` 117 | 118 | 3. The list items are defined once as a template, which is then repeated multiple times to represent each entry of the sensors array. We also add some location details to our `sap.m.CustomListItem`. Here, `location` references the location property of each of the displayed sensor items. 119 | 120 | ***sensormanager/webapp/view/Sensors.view.xml*** 121 | 122 | ````xml 123 | 124 | 125 | </CustomListItem> 126 | ```` 127 | 128 | 4. Let's see if our UI5 application displays the correct sensor data. Switch to the browser tab with the opened application preview and reload the page. 129 | <br><br>![](images/03_04_0010.png)<br><br> 130 | 131 | ## Summary 132 | 133 | Congratulations! You've completed successully [Exercise 3 - Show Sensor Content](#exercise-3---show-sensor-content). 134 | 135 | Continue to [Exercise 4 - Introduce Localization](../ex4/README.md). 136 | 137 | ## Further Information 138 | 139 | * Data Binding: https://ui5.sap.com/#/topic/68b9644a253741e8a4b9e4279a35c247 140 | -------------------------------------------------------------------------------- /exercises/ex3/images/03_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex3/images/03_01_0010.png -------------------------------------------------------------------------------- /exercises/ex3/images/03_01_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex3/images/03_01_0020.png -------------------------------------------------------------------------------- /exercises/ex3/images/03_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex3/images/03_03_0010.png -------------------------------------------------------------------------------- /exercises/ex3/images/03_04_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex3/images/03_04_0010.png -------------------------------------------------------------------------------- /exercises/ex4/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex4) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex4/sensormanager/webapp/) 3 | 4 | # Exercise 4 - Introduce Localization 5 | 6 | In this exercise you'll learn how easy it is to enable localization for your UI5 application. 7 | 8 | ## Exercise 4.1 - Replacing Hard-Coded Text With i18n Variables 9 | 10 | In your existing UI5 application you've used hard-coded text values. That's OK if you'd like to implement a fast proof of concept. In your productive application no hard-coded text should be used, however, because it would be displayed regardless of the actual browser language the user has configured. Your goal is to build an enterprise-ready application which is fully localized. UI5 comes with a huge set of localization features out of the box, one of which is automatic language selection and text localization. To benefit from it, you need to replace all occurrences of hard-coded text in your UI5 application. Luckily, there's only one occurrence 😃 However, it's good practice to start directly with localization in mind instead of refactoring many places in your application afterwards. 11 | 12 | 1. Open the `Sensors.view.xml` located under `sensormanager/webapp/view/`. 13 | 14 | 2. Replace the `noDataText` value with the i18n key `noSensorDataText`. "i18n" is a common abbreviation of "internationalization". 15 | 16 | ````xml 17 | <f:GridList 18 | id="sensorsList" 19 | items="{path: 'sensorModel>/sensors', sorter: {path:'customer', group:true, descending: false}}" 20 | noDataText="{i18n>noSensorDataText}"> 21 | ```` 22 | 23 | 3. Add the newly introduced i18n key also to your `i18n.properties` file, which is located under `sensormanager/webapp/i18n/`, and by the way, let's also pick a better title and prepare some other strings we'll need later. 24 | 25 | ***sensormanager/webapp/i18n/i18n.properties*** 26 | 27 | ````ini 28 | title=Keep Cool Inc. Sensor Manager 29 | appTitle=Sensor Manager 30 | appDescription=The sensor manager 31 | noSensorDataText=No Sensor Data 32 | distanceLabel=Distance 33 | distanceUnit=km 34 | msgSensorDataLoaded=All sensors online! 35 | msgFilterAll=All 36 | msgFilterCold=Cold 37 | msgFilterWarm=Warm 38 | msgFilterHot=Too Hot 39 | toolTipSelectCustomer=Select Customer 40 | titleSelectCustomer=Select Customers 41 | titleSensorStatus=Sensor Status 42 | cardTitle=Customer: {0} 43 | locationLabel=Location 44 | cardSubTitle={0}: {1}, {2}: {3}{4} 45 | temperatureUnit=°C 46 | ```` 47 | 48 | 4. Switch browser tabs and refresh the page to see the changed user interface of your UI5 application. 49 | <br><br>![](images/04_01_0010.png)<br><br> 50 | 51 | ## Exercise 4.2 - Add Additional Languages 52 | 53 | Your UI5 application is prepared for localization. No matter which browser language is configured, your UI5 application currently displays the texts of the `i18n.properties` file. 54 | Let's provide new language files for English and German. 55 | 56 | 1. Go to folder `sensormanager/webapp/i18n/` and right-click. 57 | 58 | 2. In the popup, click `New File`. 59 | 60 | 3. Enter `i18n_en.properties` as file name. 61 | 62 | 4. Repeat Steps 1 and 2. 63 | 64 | 5. Enter `i18n_de.properties` as file name. 65 | 66 | 6. Open `i18n_en.properties` and paste the following content: 67 | 68 | ***sensormanager/webapp/i18n/i18n_en.properties*** 69 | 70 | ````ini 71 | title=Keep Cool Inc. Sensor Manager 72 | appTitle=Sensor Manager 73 | appDescription=The sensor 74 | noSensorDataText=No Sensor Data 75 | distanceLabel=Distance 76 | distanceUnit=km 77 | msgSensorDataLoaded=All sensors online! 78 | msgFilterAll=All 79 | msgFilterCold=Cold 80 | msgFilterWarm=Warm 81 | msgFilterHot=Too Hot 82 | toolTipSelectCustomer=Select Customer 83 | titleSelectCustomer=Select Customers 84 | titleSensorStatus=Sensor Status 85 | cardTitle=Customer: {0} 86 | locationLabel=Location 87 | cardSubTitle={0}: {1}, {2}: {3}{4} 88 | temperatureUnit=°C 89 | ```` 90 | 91 | 7. Open `i18n_de.properties` and paste the following content: 92 | 93 | ***sensormanager/webapp/i18n/i18n_de.properties*** 94 | 95 | ````ini 96 | title=Keep Cool Inc. Sensor Verwalter 97 | appTitle=Sensor Verwalter 98 | appDescription=Der Sensor Verwalter 99 | noSensorDataText=Keine Sensordaten 100 | distanceLabel=Distanz 101 | distanceUnit=km 102 | msgSensorDataLoaded=Alle Sensoren aktiv! 103 | msgFilterAll=Alle 104 | msgFilterCold=Kalt 105 | msgFilterWarm=Warm 106 | msgFilterHot=Zu Heiß 107 | toolTipSelectCustomer=Wähle den Kunden 108 | titleSelectCustomer=Wähle die Kunden 109 | titleSensorStatus=Sensor Status 110 | cardTitle=Kunde: {0} 111 | locationLabel=Ort 112 | cardSubTitle={0}: {1}, {2}: {3}{4} 113 | temperatureUnit=°C 114 | ```` 115 | 116 | 8. Depending on the browser language you've configured, you'd now be able to see different text on your user interface. 117 | * If your browser language is English, the content of `i18n_en.properties` is used. 118 | * If your browser language is German, the content of `i18n_de.properties` is used. 119 | * For any other language, the content of `i18n.properties` is used. 120 | 121 | ## Exercise 4.3 - Configure Supported Languages 122 | 123 | Usually, only the `i18n.properties` file is maintained by developers. The language-dependent files will be filled by native speakers or translators. As an application developer, you can configure which languages are supported by your application, and which language is your default (aka fallback) language. In this session English will be the default language, and additionally German should be supported. 124 | 125 | 1. Open the `manifest.json` located under `sensormanager/webapp`. 126 | 127 | 2. Go to section `sap.ui5` / `models` / `i18n`. Here, add two new configurations inside your settings object. 128 | 1. Add the property `supportedLocales` and assign the locales for German and English `["de", "en"]` 129 | 2. Add the property `fallbackLocale` and assign the English locale `"en"` 130 | 131 | ***sensormanager/webapp/manifest.json*** 132 | 133 | ````json 134 | "i18n": { 135 | "type": "sap.ui.model.resource.ResourceModel", 136 | "settings": { 137 | "bundleName": "keepcool.sensormanager.i18n.i18n", 138 | "supportedLocales": ["de", "en"], 139 | "fallbackLocale": "en" 140 | } 141 | }, 142 | ```` 143 | 144 | 3. Let's see if your UI5 application is able to start in English and German! Switch to the browser tab with an opened application preview and reload the page. The UI5 application should start in English or in German, depending on your browser language. 145 | <br><br>![](images/04_03_0010.png)<br><br> 146 | 147 | 4. UI5 provides a URL parameter to simulate another browser language. Add `?sap-ui-language=de` to the URL shown in your browser. UI5 should now start in German regardless of the language you have configured as your browser language. 148 | <br><br>![](images/04_03_0020.png)<br><br> 149 | 150 | 5. You can simulate any other language, e.g. English. Add `?sap-ui-language=en` to the URL shown in your browser. UI5 should now start in English regardless of the language you have configured as your browser language. 151 | <br><br>![](images/04_03_0010.png)<br><br> 152 | 153 | 5. Let's try to start the application in another language, e.g Hindi. Add `?sap-ui-language=hi` to the URL shown in your browser. UI5 should now start in English, because you have configured English as your fallback locale. 154 | <br><br>![](images/04_03_0010.png)<br><br> 155 | 156 | If you'd like to support Hindi, or any other language of your choice, feel free to repeat the steps described in [Exercise 4.2 Add New Languages](#exercise-42---add-additional-languages) with your desired language. 157 | 158 | ## Summary 159 | 160 | Yay! You've accomplished successfully [Exercise 4 - Introduce Localization](#exercise-4---introduce-localization). 161 | 162 | Continue to [Exercise 5 - Improve Visualization](../ex5/README.md). 163 | 164 | ## Further Information 165 | 166 | * Localization: https://ui5.sap.com/#/topic/91f217c46f4d1014b6dd926db0e91070 167 | * Supported Locales and Fallback: https://ui5.sap.com/#/topic/ec753bc539d748f689e3ac814e129563 168 | -------------------------------------------------------------------------------- /exercises/ex4/images/04_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex4/images/04_01_0010.png -------------------------------------------------------------------------------- /exercises/ex4/images/04_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex4/images/04_03_0010.png -------------------------------------------------------------------------------- /exercises/ex4/images/04_03_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex4/images/04_03_0020.png -------------------------------------------------------------------------------- /exercises/ex5/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex5) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex5/sensormanager/webapp/) 3 | 4 | # Exercise 5 - Improve Visualization 5 | 6 | You achieved a lot in the previous exercises. Now it's time to dress up your UI5 application with some visual effects! 7 | 8 | ## Exercise 5.1 - Enhance Sensors.view.xml 9 | 10 | To give the customer the best possible overview, add some color to your application. Introduce a new layout and structure for the items, and also show an `sap.ui.core.Icon` there. 11 | 12 | 1. Open `Sensors.view.xml` and add the xml namespace `xmlns:core="sap.ui.core"` to the view to have the `sap.ui.core.Icon` available. 13 | 14 | ***sensormanager/webapp/view/Sensors.view.xml*** 15 | 16 | ````xml 17 | <mvc:View 18 | xmlns:core="sap.ui.core" 19 | xmlns:mvc="sap.ui.core.mvc" 20 | xmlns="sap.m" 21 | xmlns:grid="sap.ui.layout.cssgrid" 22 | xmlns:f="sap.f" 23 | displayBlock="true"> 24 | ```` 25 | 26 | 2. Add a temperature icon as well as layouting to the `sap.m.CustomListItem` control. `sapUiSmallMarginTop` and `sapUiSmallMarginEnd` are predefined responsive css classes, which add screen size dependent spacing to controls. `sap.m.HBox`and `sap.m.VBox` are helpers for layouting your application. 27 | 28 | ***sensormanager/webapp/view/Sensors.view.xml*** 29 | 30 | ````xml 31 | <CustomListItem type="Active"> 32 | <layoutData> 33 | <FlexItemData 34 | growFactor="1" 35 | shrinkFactor="0"/> 36 | </layoutData> 37 | <HBox justifyContent="SpaceBetween"> 38 | <VBox 39 | justifyContent="SpaceBetween" 40 | class="sapUiSmallMarginTop sapUiSmallMarginBegin"> 41 | <Title text="{sensorModel>location}"/> 42 | <Label text="{i18n>distanceLabel}:"/> 43 | </VBox> 44 | <core:Icon 45 | src="sap-icon://temperature" 46 | size="2.5rem" 47 | class="sapUiSmallMarginTop sapUiSmallMarginEnd"/> 48 | </HBox> 49 | <HBox 50 | justifyContent="SpaceBetween" 51 | class="sapUiTinyMarginTop sapUiSmallMarginBottom sapUiSmallMarginBeginEnd"> 52 | <ObjectNumber 53 | number="{sensorModel>distance}" 54 | unit="{i18n>distanceUnit}"/> 55 | </HBox> 56 | </CustomListItem> 57 | ```` 58 | 59 | ## Exercise 5.2 - Create Sensors.controller.js 60 | 61 | In this exercise you'll enhance your application with some additional controller coding. 62 | 63 | 1. Right-click the `sensormanager/webapp/controller/` folder and select `New File`. 64 | <br><br>![](images/05_02_0010.png)<br><br> 65 | 66 | 2. Enter `Sensors.controller.js` as the file name. 67 | <br><br>![](images/05_02_0020.png)<br><br> 68 | 69 | 3. All functions defined in the Controller can be used in your View. This gives you more flexibility to implement specific functionality to improve the visualization in your View. Copy and paste the following code into `Sensors.controller.js`: 70 | 71 | ***sensormanager/webapp/controller/Sensors.controller.js*** 72 | 73 | ````js 74 | sap.ui.define([ 75 | "sap/ui/core/mvc/Controller" 76 | ], 77 | function (Controller) { 78 | "use strict"; 79 | 80 | return Controller.extend("keepcool.sensormanager.controller.Sensors", { 81 | onInit: function () { 82 | 83 | } 84 | }); 85 | } 86 | ); 87 | ```` 88 | 89 | 4. Add the modules `sap/ui/core/IconColor` and `sap/m/MessageToast` as dependencies to the `Sensors.controller.js`. You'll use them later on during this exercise. 90 | 91 | ***sensormanager/webapp/controller/Sensors.controller.js*** 92 | 93 | ````js 94 | sap.ui.define([ 95 | "sap/ui/core/mvc/Controller", 96 | "sap/ui/core/IconColor", 97 | "sap/m/MessageToast" 98 | ], function (Controller, IconColor, MessageToast) { 99 | "use strict"; 100 | ```` 101 | 102 | 5. Your next goal is to show an `sap.m.MessageToast` when your sensor data is loaded. Replace the `onInit` function of `Sensors.controller.js` with the following content. This also adds a function `getSensorModel` to retrieve the sensor model. 103 | 104 | ***sensormanager/webapp/controller/Sensors.controller.js*** 105 | 106 | ````js 107 | onInit: function() { 108 | this.getSensorModel().dataLoaded().then(function() { 109 | MessageToast.show( 110 | this.getOwnerComponent().getModel("i18n").getResourceBundle().getText("msgSensorDataLoaded"), 111 | { closeOnBrowserNavigation: false }); 112 | }.bind(this)); 113 | }, 114 | getSensorModel: function(){ 115 | return this.getOwnerComponent().getModel("sensorModel"); 116 | } 117 | 118 | ```` 119 | 120 | ## Exercise 5.3 - Assign Controller to View 121 | 122 | Now you need to tell your view which controller is associated with it. 123 | 124 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 125 | 126 | 2. Add the `controllerName` attribute to the view and enter the controller name `keepcool.sensormanager.controller.Sensors`. The Controller's functions can then be used in your View. UI5 maps this path to the `sensormanager/webapp/controller/Sensors.controller.js` file. 127 | 128 | ***sensormanager/webapp/view/Sensors.view.xml*** 129 | 130 | ````xml 131 | <mvc:View 132 | controllerName="keepcool.sensormanager.controller.Sensors" 133 | xmlns:core="sap.ui.core" 134 | xmlns:mvc="sap.ui.core.mvc" 135 | xmlns="sap.m" 136 | xmlns:grid="sap.ui.layout.cssgrid" 137 | xmlns:f="sap.f" 138 | displayBlock="true"> 139 | ```` 140 | 141 | 3. Let's see if your UI5 application is able to show the `sap.m.MessageToast`! Switch to the browser tab with the opened application preview and reload the page. The `sap.m.MessageToast` should be displayed to confirm that your sensor data has been loaded successfully. 142 | <br><br>![](images/05_03_0010.png)<br><br> 143 | 144 | ## Exercise 5.4 - Create your First Formatter 145 | 146 | Your next goal is to bring some color to the user interface. You'd like to display the icon in a suitable color which is based on the actual temperature of the sensor. To do this, you can use the formatter concept of UI5. 147 | 148 | 1. Open `sensormanager/webapp/controller/Sensors.controller.js`. 149 | 150 | 2. Add the new function `formatIconColor` after the `getSensorModel` function (don't forget adding a comma after the `getSensorModel` function!). 151 | 152 | ***sensormanager/webapp/controller/Sensors.controller.js*** 153 | 154 | ````js 155 | formatIconColor: function(iTemperature) { 156 | var oThreshold = this.getSensorModel().getProperty("/threshold"); 157 | if (!oThreshold) { 158 | return IconColor.Neutral; 159 | } else if (iTemperature < oThreshold.warm) { 160 | return IconColor.Default; 161 | } else if (iTemperature >= oThreshold.warm && iTemperature < oThreshold.hot) { 162 | return IconColor.Critical; 163 | } else { 164 | return IconColor.Negative; 165 | } 166 | } 167 | 168 | ```` 169 | 170 | ## Exercise 5.5 - Add the Formatter in your View 171 | 172 | 173 | You're almost done. The last piece is adding the newly created formatter function to the binding of your icon. 174 | 175 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 176 | 177 | 2. Add the `color` property to the `sap.ui.core.Icon` definition, bind the `color` property to the path `sensors>temperature/value`, and assign the formatter function to the binding. 178 | 179 | ***sensormanager/webapp/view/Sensors.view.xml*** 180 | 181 | ````xml 182 | <core:Icon 183 | src="sap-icon://temperature" 184 | size="2.5rem" 185 | color="{path: 'sensorModel>temperature/value', formatter:'.formatIconColor'}" 186 | class="sapUiSmallMarginTop sapUiSmallMarginEnd"/> 187 | ```` 188 | 189 | 3. Let's see if your UI5 application can now color icons depending on the sensor data! Switch to the browser tab with the opened application preview and reload the page. The sensor icons should be displayed either in blue (default), yellow (critical) or red (negative). 190 | <br><br>![](images/05_05_0010.png)<br><br> 191 | 192 | ## Summary 193 | 194 | Congratulations, you completed the [Exercise 5 - Improve Visualization](#xxercise-5---improve-visualization) exercise! 195 | 196 | Continue to [Exercise 6 - Filtering with the IconTabBar](../ex6/README.md). 197 | 198 | ## Further Information 199 | 200 | * Model View Controller Concept: https://ui5.sap.com/#/topic/91f233476f4d1014b6dd926db0e91070 201 | * Controller: https://ui5.sap.com/#/topic/121b8e6337d147af9819129e428f1f75 202 | * Formatting, Parsing, and Validating Data: https://ui5.sap.com/#/topic/07e4b920f5734fd78fdaa236f26236d8 203 | -------------------------------------------------------------------------------- /exercises/ex5/images/05_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex5/images/05_02_0010.png -------------------------------------------------------------------------------- /exercises/ex5/images/05_02_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex5/images/05_02_0020.png -------------------------------------------------------------------------------- /exercises/ex5/images/05_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex5/images/05_03_0010.png -------------------------------------------------------------------------------- /exercises/ex5/images/05_05_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex5/images/05_05_0010.png -------------------------------------------------------------------------------- /exercises/ex6/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex6) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex6/sensormanager/webapp/) 3 | 4 | # Exercise 6 - Filtering With the IconTabBar 5 | 6 | As your customer needs the full overview to make decisions quickly, you will give them an option to narrow down the list of sensors based on the current sensor temperature. 7 | 8 | ## Exercise 6.1 - Add new IconTabFilters to the Sensors.view.xml 9 | 10 | For this, we enhance our `sap.m.IconTabBar` control. 11 | 12 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 13 | 14 | 2. Add `sap.m.IconTabFilter` elements to the `items` aggregation of the `sap.m.IconTabBar` control. They will be visible as icons above the bar, so that the user can click them to filter the list. 15 | 16 | ***sensormanager/webapp/view/Sensors.view.xml*** 17 | 18 | ````xml 19 | <IconTabBar id="iconTabBar" class="sapUiResponsiveContentPadding"> 20 | <items> 21 | <IconTabFilter showAll="true" text="{i18n>msgFilterAll}" key="All"/> 22 | <IconTabSeparator/> 23 | <IconTabFilter icon="sap-icon://fridge" iconColor="Default" text="{i18n>msgFilterCold}" key="Cold"/> 24 | <IconTabFilter icon="sap-icon://blur" iconColor="Critical" text="{i18n>msgFilterWarm}" key="Warm"/> 25 | <IconTabFilter icon="sap-icon://warning" iconColor="Negative" text="{i18n>msgFilterHot}" key="Hot"/> 26 | </items> 27 | <content> 28 | ... 29 | ```` 30 | 31 | 3. Let's see if your UI5 application now displays the newly introduced `sap.m.IconTabFilter` elements! Switch to the browser tab with the opened application preview and reload the page. 32 | <br><br>![](images/06_01_0010.png)<br><br> 33 | 34 | ## Exercise 6.2 - Implement the Filtering 35 | 36 | In the previous section you've added all necessary controls. Next, you'll implement the filtering logic. 37 | 38 | 1. Open `sensormanager/webapp/controller/Sensors.controller.js`. 39 | 40 | 2. Add the module `sap/ui/model/Filter` as a dependency to `Sensors.controller.js`. 41 | 42 | ***sensormanager/webapp/controller/Sensors.controller.js*** 43 | 44 | ````js 45 | sap.ui.define([ 46 | "sap/ui/core/mvc/Controller", 47 | "sap/ui/core/IconColor", 48 | "sap/m/MessageToast", 49 | "sap/ui/model/Filter" 50 | ], function (Controller, IconColor, MessageToast, Filter) { 51 | "use strict"; 52 | ```` 53 | 54 | 3. Implement the `onSensorSelect` function for filtering the sensor list items by checking their `status` property. We'll also make use of the previously defined threshold and use some filter settings to narrow down the result. `LT` for example means "less than". 55 | 56 | ***sensormanager/webapp/controller/Sensors.controller.js*** 57 | 58 | ````js 59 | onSensorSelect: function (oEvent) { 60 | this._aCustomerFilters = []; 61 | this._aStatusFilters = []; 62 | 63 | var oBinding = this.getView().byId("sensorsList").getBinding("items"), 64 | sKey = oEvent.getParameter("key"), 65 | oThreshold = this.getSensorModel().getProperty("/threshold"); 66 | 67 | if (sKey === "Cold") { 68 | this._aStatusFilters = [new Filter("temperature/value", "LT", oThreshold.warm, false)]; 69 | } else if (sKey === "Warm") { 70 | this._aStatusFilters = [new Filter("temperature/value", "BT", oThreshold.warm, oThreshold.hot, false)]; 71 | } else if (sKey === "Hot") { 72 | this._aStatusFilters = [new Filter("temperature/value", "GT", oThreshold.hot, false)]; 73 | } else { 74 | this._aStatusFilters = []; 75 | } 76 | 77 | oBinding.filter(this._aStatusFilters); 78 | } 79 | ```` 80 | 81 | ## Exercise 6.3 - Assign the Filtering to the IconTabBar 82 | 83 | The filtering logic is written. Next, you need to assign the filtering function to the `select` event of the `sap.m.IconTabBar`. 84 | 85 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 86 | 87 | 2. Bind the `onSensorSelect` function to the `select` event of the `IconTabBar`. Whenever one of the `sap.m.IconTabFilter` elements is clicked, this function will be called. 88 | 89 | ***sensormanager/webapp/view/Sensors.view.xml*** 90 | 91 | ````xml 92 | <IconTabBar id="iconTabBar" select=".onSensorSelect" class="sapUiResponsiveContentPadding"> 93 | ```` 94 | 95 | 3. Let's see if your UI5 application is now able to filter the sensor data correctly. Switch to the browser tab with the opened application preview and reload the page. Click the *Too Hot* icon. Only sensors with too high a temperature are displayed. 96 | <br><br>![](images/06_03_0010.png)<br><br> 97 | 98 | ## Exercise 6.4 - Display the Total Number of Sensors in Every IconTabFilter 99 | 100 | Your customer wishes to display the total number of sensors as well. For this, you can introduce the `count` property of `sap.m.IconTabFilter`. 101 | 102 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 103 | 104 | 2. Make use of an expression binding by adding the `count` property and the expression binding `{=${sensorModel>/sensors}.length}`. 105 | 106 | ***sensormanager/webapp/view/Sensors.view.xml*** 107 | 108 | ````xml 109 | <IconTabFilter 110 | showAll="true" 111 | text="{i18n>msgFilterAll}" 112 | key="All" 113 | count="{=${sensorModel>/sensors}.length}"/> 114 | ```` 115 | 116 | 3. Let's see if your UI5 application can display the total number of sensors correctly. Switch to the browser tab with the opened application preview and reload the page. Do you see *100*? Yeah! 117 | <br><br>![](images/06_04_0010.png)<br><br> 118 | 119 | ## Summary 120 | 121 | Hooray! You've successfully completed [Exercise 6 - Filtering with the IconTabBar](#exercise-6---filtering-with-the-icontabbar). 122 | 123 | Continue to [Exercise 7 - Fragment containing a SelectDialog](../ex7/README.md). 124 | 125 | ## Further Information 126 | 127 | * Model Filter in UI5: https://ui5.sap.com/#/topic/5295470d7eee46c1898ee46c1b9ad763 128 | * Expression Binding: https://ui5.sap.com/#/topic/daf6852a04b44d118963968a1239d2c0 129 | -------------------------------------------------------------------------------- /exercises/ex6/images/06_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex6/images/06_01_0010.png -------------------------------------------------------------------------------- /exercises/ex6/images/06_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex6/images/06_03_0010.png -------------------------------------------------------------------------------- /exercises/ex6/images/06_04_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex6/images/06_04_0010.png -------------------------------------------------------------------------------- /exercises/ex7/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex7) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex7/sensormanager/webapp/) 3 | 4 | # Exercise 7 - Fragment Containing a SelectDialog 5 | 6 | Not all the icehouse data might be relevant for every employee of your customer. You should add some kind of basic personalization to the application. You can do this by providing a dialog in which users can select only the icehouse clients relevant for them. 7 | 8 | ## Exercise 7.1 - Create a new Fragment Definition 9 | 10 | A dialog is a perfect scenario in which to use a `sap.ui.core.Fragment`. This UI5 artefact allows you to modularize your code in smaller reusable pieces. 11 | 12 | 1. Go to folder `sensormanager/webapp/view/`. 13 | 14 | 2. Right-click on the `view` folder and select `New File`. 15 | <br><br>![](images/07_01_0010.png)<br><br> 16 | 17 | 3. Enter `CustomerSelectDialog.fragment.xml` as file name. 18 | <br><br>![](images/07_01_0020.png)<br><br> 19 | 20 | 4. Copy and paste the following content into the newly created `CustomerSelectDialog.fragment.xml`. With that you create a `sap.m.SelectDialog`, which offers functionality to help users select their preferred icehouse clients. 21 | 22 | ***sensormanager/webapp/view/CustomerSelectDialog.fragment.xml*** 23 | 24 | ````xml 25 | <core:FragmentDefinition 26 | xmlns="sap.m" 27 | xmlns:core="sap.ui.core"> 28 | <SelectDialog 29 | title="{i18n>titleSelectCustomer}" 30 | contentHeight="38.3%" 31 | rememberSelections="true" 32 | items="{ 33 | path: 'sensorModel>/customers', 34 | sorter: {path:'name'} 35 | }"> 36 | <StandardListItem title="{sensorModel>name}"/> 37 | </SelectDialog> 38 | </core:FragmentDefinition> 39 | ```` 40 | 41 | ## Exercise 7.2 - Implement the Dialog Opening Logic 42 | 43 | After creating the dialog, you need to implement the coding to open the dialog. 44 | 45 | 1. Open `sensormanager/webapp/controller/Sensors.controller.js`. 46 | 47 | 2. Add the module `sap/ui/core/Fragment`. 48 | 49 | ***sensormanager/webapp/controller/Sensors.controller.js*** 50 | 51 | ````js 52 | sap.ui.define([ 53 | "sap/ui/core/mvc/Controller", 54 | "sap/ui/core/IconColor", 55 | "sap/m/MessageToast", 56 | "sap/ui/model/Filter", 57 | "sap/ui/core/Fragment" 58 | ], function (Controller, IconColor, MessageToast, Filter, Fragment) { 59 | "use strict" 60 | ```` 61 | 62 | 3. Implement the `onCustomerSelect` function to open the dialog. It loads the Fragment and sets the required model and properties. 63 | 64 | ***sensormanager/webapp/controller/Sensors.controller.js*** 65 | 66 | ````js 67 | onCustomerSelect: function(){ 68 | if(!this._pDialog) { 69 | this._pDialog = Fragment.load({ 70 | type: "XML", 71 | name: "keepcool.sensormanager.view.CustomerSelectDialog", 72 | controller: this 73 | }).then(function(oDialog){ 74 | oDialog.setModel(this.getSensorModel(), "sensorModel"); 75 | oDialog.setModel(this.getView().getModel("i18n"), "i18n"); 76 | oDialog.setMultiSelect(true); 77 | return oDialog; 78 | }.bind(this)); 79 | } 80 | this._pDialog.then(function(oDialog){ 81 | oDialog.open(); 82 | }); 83 | } 84 | 85 | ```` 86 | 87 | ## Exercise 7.3 - Add a Dialog Opening Button 88 | After implementing the dialog opening logic, you need to assign this logic to a control. 89 | 90 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 91 | 92 | 2. Add a new menu button to the page header and bind its `press` event to the newly created `onCustomerSelect` function. 93 | 94 | ***sensormanager/webapp/view/Sensors.view.xml*** 95 | 96 | ````xml 97 | <Page id="page" title="{i18n>title}"> 98 | <headerContent> 99 | <Button icon="sap-icon://menu" press=".onCustomerSelect" tooltip="{i18n>toolTipSelectCustomer}"/> 100 | </headerContent> 101 | <content> 102 | ... 103 | ```` 104 | 105 | 3. Switch the browser tab to the application preview and refresh the page to see how the user interface of your application changes. Click the menu button in upper right corner. 106 | <br><br>![](images/07_03_0010.png)<br><br> 107 | 108 | ## Exercise 7.4 - Implement the 'Filter Customer' Logic 109 | 110 | The Dialog contains an input field where the user can search for a customer name. 111 | For this, you need to implement the filter logic. 112 | 113 | 1. Open `sensormanager/webapp/controller/Sensors.controller.js`. 114 | 115 | 2. Add an `onCustomerSelectChange` function with the following content: 116 | 117 | ***sensormanager/webapp/controller/Sensors.controller.js*** 118 | 119 | ````js 120 | onCustomerSelectChange: function(oEvent) { 121 | var sValue = oEvent.getParameter("value"); 122 | var oFilter = new Filter("name", "Contains", sValue); 123 | var oBinding = oEvent.getSource().getBinding("items"); 124 | oBinding.filter([oFilter]); 125 | } 126 | 127 | ```` 128 | 129 | ## Exercise 7.5 - Implement the 'Select Customer' Logic 130 | 131 | After providing an option to select preferred customers, you also need to add the logic to filter the sensors. 132 | 133 | 1. Open `sensormanager/webapp/controller/Sensors.controller.js`. 134 | 135 | 2. Add an `onCustomerSelectConfirm` function with the following content: 136 | 137 | ***sensormanager/webapp/controller/Sensors.controller.js*** 138 | 139 | ````js 140 | onCustomerSelectConfirm: function(oEvent) { 141 | var aSelectedItems = oEvent.getParameter("selectedItems"); 142 | var oBinding = this.getView().byId("sensorsList").getBinding("items"); 143 | this._aCustomerFilters = aSelectedItems.map(function(oItem) { 144 | return new Filter("customer", "EQ", oItem.getTitle()); 145 | }); 146 | oBinding.filter(this._aCustomerFilters.concat(this._aStatusFilters)); 147 | } 148 | ```` 149 | 150 | 3. To ensure that both filters (customer and status) are applied, you need to make two more adaptations in `Sensors.controller.js`. Here, you declare the `_aCustomerFilters` and `_aStatusFilters` in the `onInit` function to ensure that they are defined. You also merge the `_aCustomerFilters` with the `_aStatusFilters` before performing the filtering on the binding. 151 | 152 | ***sensormanager/webapp/controller/Sensors.controller.js*** 153 | 154 | ````js 155 | onInit: function() { 156 | this._aCustomerFilters = []; 157 | this._aStatusFilters = []; 158 | ... 159 | ```` 160 | 161 | ***sensormanager/webapp/controller/Sensors.controller.js*** 162 | 163 | ````js 164 | onSensorSelect: function (oEvent) { 165 | var oBinding = this.getView().byId("sensorsList").getBinding("items"), 166 | sKey = oEvent.getParameter("key"), 167 | oThreshold = this.getSensorModel().getProperty("/threshold"); 168 | 169 | if (sKey === "Cold") { 170 | this._aStatusFilters = [new Filter("temperature/value", "LT", oThreshold.warm, false)]; 171 | } else if (sKey === "Warm") { 172 | this._aStatusFilters = [new Filter("temperature/value", "BT", oThreshold.warm, oThreshold.hot, false)]; 173 | } else if (sKey === "Hot") { 174 | this._aStatusFilters = [new Filter("temperature/value", "GT", oThreshold.hot, false)]; 175 | } else { 176 | this._aStatusFilters = []; 177 | } 178 | 179 | oBinding.filter(this._aStatusFilters.concat(this._aCustomerFilters)); 180 | }, 181 | ```` 182 | 183 | ## Exercise 7.6 - Assign the 'Customer Change and Select' Logic to the Dialog 184 | 185 | One last thing is missing: You need to assign the newly created functions to the dialog. 186 | 187 | 1. Open `sensormanager/webapp/view/CustomerSelectDialog.fragment.xml` 188 | 189 | 2. Add the newly created functions to the `confirm` and `liveChange` events. 190 | 191 | ***sensormanager/webapp/view/CustomerSelectDialog.fragment.xml*** 192 | 193 | ````xml 194 | <SelectDialog 195 | title="{i18n>titleSelectCustomer}" 196 | contentHeight="38.3%" 197 | rememberSelections="true" 198 | confirm=".onCustomerSelectConfirm" 199 | liveChange=".onCustomerSelectChange" 200 | items="{ 201 | path: 'sensorModel>/customers', 202 | sorter: {path:'name'} 203 | }"> 204 | <StandardListItem title="{sensorModel>name}"/> 205 | </SelectDialog> 206 | ```` 207 | 208 | 3. It's demo time! Switch the browser tab to the application preview and refresh the page to see how the user interface of your UI5 application changes. Select the *menu* button in upper right corner. Enter some parts of customer names and check if the customer list is filtered. 209 | <br><br>![](images/07_06_0010.png)<br><br> 210 | 211 | 4. Select some preferred customers and click the *Select* button 212 | <br><br>![](images/07_06_0020.png)<br><br> 213 | 214 | 5. The list of sensors is filtered by both temperature status and preferred customers. 215 | <br><br>![](images/07_06_0030.png)<br><br> 216 | 217 | ## Summary 218 | 219 | Yay! You've successfully completed [Exercise 7 - Fragment containing a SelectDialog](#exercise-7---fragment-containing-a-selectdialog). 220 | 221 | Continue to [Exercise 8 - Second View with Navigation](../ex8/README.md). 222 | 223 | ## Further Information 224 | * (Usage of Fragments in UI5: https://ui5.sap.com/#/topic/d6af195124cf430599530668ddea7425) 225 | * `sap.m.SelectDialog`: https://ui5.sap.com/#/api/sap.m.SelectDialog 226 | -------------------------------------------------------------------------------- /exercises/ex7/images/07_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex7/images/07_01_0010.png -------------------------------------------------------------------------------- /exercises/ex7/images/07_01_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex7/images/07_01_0020.png -------------------------------------------------------------------------------- /exercises/ex7/images/07_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex7/images/07_03_0010.png -------------------------------------------------------------------------------- /exercises/ex7/images/07_06_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex7/images/07_06_0010.png -------------------------------------------------------------------------------- /exercises/ex7/images/07_06_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex7/images/07_06_0020.png -------------------------------------------------------------------------------- /exercises/ex7/images/07_06_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex7/images/07_06_0030.png -------------------------------------------------------------------------------- /exercises/ex8/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex8) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex8/sensormanager/webapp/) 3 | 4 | # Exercise 8 - Add a Second View with Navigation 5 | 6 | Your customer does not only want to have a broad overview of all their icehouses. In case of an error they'd like to inspect a sensor for recent temperature data. You'll add a second view to display more available data. 7 | 8 | ## Exercise 8.1 - Create SensorStatus.view.xml 9 | 10 | Create a new view as follows: 11 | 12 | 1. Go to folder `sensormanager/webapp/view/`. 13 | 14 | 2. Right-click on the `view` folder and select `New File`. 15 | <br><br>![](images/08_01_0010.png)<br><br> 16 | 17 | 3. Enter `SensorStatus.view.xml` as file name. 18 | <br><br>![](images/08_01_0020.png)<br><br> 19 | 20 | 4. Add an empty `sap.m.Page` to the newly created view. 21 | 22 | ***sensormanager/webapp/view/SensorStatus.view.xml*** 23 | 24 | ````xml 25 | <mvc:View displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> 26 | <Page id="SensorStatusPage" title="{i18n>titleSensorStatus}" showNavButton="true"> 27 | </Page> 28 | </mvc:View> 29 | ```` 30 | 31 | ## Exercise 8.2 - Configure the `manifest.json` file 32 | 33 | After creating the new view, you'll next add routing information for it to the `manifest.json` file. 34 | 35 | 1. Open `sensormanager/webapp/manifest.json`. 36 | 37 | 2. Go to section `sap.ui5` / `routing` / `routes`. 38 | 39 | 3. Add a new entry to the `routes` configuration. Note that the new route contains a patch segment in brackets: `{index}`. This will later pass the currently selected sensor as a parameter in the browser hash. 40 | 41 | ***sensormanager/webapp/manifest.json*** 42 | 43 | ````json 44 | { 45 | "name": "RouteSensorStatus", 46 | "pattern": "sensor/{index}", 47 | "target": ["TargetSensorStatus"] 48 | } 49 | ```` 50 | 51 | 4. Go to section `sap.ui5` / `routing` / `targets`. 52 | 53 | 5. Add a new entry to the `targets` configuration. Here, you need to pass `SensorStatus` as the `viewName`. 54 | 55 | ***sensormanager/webapp/manifest.json*** 56 | 57 | ````json 58 | "TargetSensorStatus": { 59 | "viewId": "sensorStatus", 60 | "viewName": "SensorStatus", 61 | "viewLevel": 2 62 | } 63 | ```` 64 | 65 | 6. Let's see if the newly created view can be opened. Switch to the browser tab with the opened application preview. Add `#/sensor/0` at the end of the URL in the browser's location bar and open that URL (i.e. the URL should end with `/index.html#/sensor/0`). The UI5 application is refreshed, and the newly created page is displayed. 66 | <br><br>![](images/08_02_0010.png)<br><br> 67 | 68 | ## Exercise 8.3 - Implement the Navigation to the New View 69 | 70 | Fine. You can access the newly created view. Next, you need to implement logic to navigate from your first view to the newly created one. 71 | 72 | 1. Open `sensormanager/webapp/controller/Sensors.controller.js`. 73 | 74 | 2. Create the function `navToSensorStatus`. Here, you get the index of the currently selected sensor and navigate to the new view by passing the index. 75 | 76 | ***sensormanager/webapp/controller/Sensors.controller.js*** 77 | 78 | ````js 79 | navToSensorStatus: function(oEvent) { 80 | var iSensorIndex = oEvent.getSource().getBindingContext("sensorModel").getProperty("index"); 81 | this.getOwnerComponent().getRouter().navTo("RouteSensorStatus", {index: iSensorIndex}); 82 | } 83 | ```` 84 | 85 | ## Exercise 8.4 - Assign the Navigation Logic to the Sensor Items 86 | 87 | After implementing the navigation logic you'll need to assign it to a control, so it can be triggered by the user. 88 | 89 | 1. Open `sensormanager/webapp/view/Sensors.view.xml`. 90 | 91 | 2. Add the `press` event to the `sap.m.CustomListItem` control and assign the newly created function. 92 | 93 | ***sensormanager/webapp/view/Sensors.view.xml*** 94 | 95 | ````xml 96 | <CustomListItem type="Active" press=".navToSensorStatus"> 97 | ```` 98 | 99 | 3. Let's see if the navigation logic works. Switch to the browser tab with the opened application preview. In the URL, remove any content after `index.html`. Reload the page. Click any sensor. The navigation takes place, and you see the newly created view. 100 | <br><br>![](images/08_04_0010.png)<br><br> 101 | 102 | ## Exercise 8.5 - Create SensorStatus.controller.js 103 | Nice. Now let's implement the navigation back to `Sensors.view.xml`. To do this, you'll need a new controller for the newly created view. 104 | 105 | 1. Go to folder `sensormanager/webapp/controller/`. 106 | 107 | 2. Right-click on the `controller` folder and select `New File`. 108 | <br><br>![](images/08_05_0010.png)<br><br> 109 | 110 | 3. Enter `SensorStatus.controller.js` as file name. 111 | <br><br>![](images/08_05_0020.png)<br><br> 112 | 113 | 4. Copy and paste the controller definition given below into the newly created `SensorStatus.controller.js`. 114 | 115 | ***sensormanager/webapp/controller/SensorStatus.controller.js*** 116 | 117 | ````js 118 | sap.ui.define([ 119 | "sap/ui/core/mvc/Controller" 120 | ], function (Controller) { 121 | "use strict"; 122 | 123 | return Controller.extend("keepcool.sensormanager.controller.SensorStatus", { 124 | 125 | }); 126 | }); 127 | ```` 128 | 129 | 5. Open `sensormanager/webapp/view/SensorStatus.view.xml`. 130 | 131 | 6. Using the `controllerName` attribute, assign the newly created controller to the view. 132 | 133 | ````xml 134 | <mvc:View controllerName="keepcool.sensormanager.controller.SensorStatus" displayBlock="true" 135 | xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> 136 | ```` 137 | 138 | ## Exercise 8.6 - Implement the Back-Navigation to Sensors.view.xml 139 | 140 | Next you need to implement the navigation logic. 141 | 142 | 1. Open `sensormanager/webapp/controller/SensorStatus.controller.js`. 143 | 144 | 2. Add a `navToSensors` function, which uses the `navTo` method to navigate the `RouteSensors` route, which points to the `Sensors.view.xml` view. 145 | 146 | ***sensormanager/webapp/controller/SensorStatus.controller.js*** 147 | 148 | ````js 149 | return Controller.extend("keepcool.sensormanager.controller.SensorStatus", { 150 | navToSensors: function () { 151 | this.getOwnerComponent().getRouter().navTo("RouteSensors"); 152 | } 153 | }); 154 | 155 | ```` 156 | 157 | 3. Open `sensormanager/webapp/view/SensorStatus.view.xml`. 158 | 159 | 4. Add the `navButtonPress` event to the `sap.m.Page` control and assign the newly created `navToSensors` function to it. 160 | 161 | ***sensormanager/webapp/view/SensorStatus.view.xml*** 162 | 163 | ````xml 164 | <Page id="SensorStatusPage" title="{i18n>titleSensorStatus}" showNavButton="true" navButtonPress=".navToSensors"> 165 | </Page> 166 | ```` 167 | 168 | 5. Let's see if the navigation logic works. Switch to the browser tab with the opened application preview. In the URL, remove any content after `index.html`. Reload the page. 169 | <br><br>![](images/08_06_0010.png)<br><br> 170 | 171 | 6. Click any sensor. The navigation takes place, and you see the newly created view. 172 | <br><br>![](images/08_06_0020.png)<br><br> 173 | 174 | 7. Click the "<" button to navigate back to the sensor list. Thanks to how the Router works, you can also use the "Back" button of the browser or your mobile device instead. 175 | <br><br>![](images/08_06_0030.png)<br><br> 176 | 177 | ## Summary 178 | 179 | Congratulations, you completed [Exercise 8 - Second View with Navigation](#exercise-8---second-view-with-navigation)! 180 | 181 | Continue to [Exercise 9 - Card with NumericHeader](../ex9/README.md). 182 | 183 | 184 | ## Further Information 185 | 186 | * Routing in UI5: https://ui5.sap.com/#/topic/902313063d6f45aeaa3388cc4c13c34e) 187 | -------------------------------------------------------------------------------- /exercises/ex8/images/08_01_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_01_0010.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_01_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_01_0020.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_02_0010.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_04_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_04_0010.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_05_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_05_0010.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_05_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_05_0020.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_06_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_06_0010.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_06_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_06_0020.png -------------------------------------------------------------------------------- /exercises/ex8/images/08_06_0030.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex8/images/08_06_0030.png -------------------------------------------------------------------------------- /exercises/ex9/README.md: -------------------------------------------------------------------------------- 1 | [![solution](https://flat.badgen.net/badge/solution/available/green?icon=github)](../../../../tree/code/ex9) 2 | [![demo](https://flat.badgen.net/badge/demo/deployed/blue?icon=chrome)](https://SAP-samples.github.io/teched2021-DEV160/ex9/sensormanager/webapp/) 3 | 4 | # Exercise 9 - Card with NumericHeader 5 | 6 | In this exercise you'll enhance the sensor status page with an `sap.f.Card` to show some more data about the sensor's status. You'll add some layouting with box controls and add an `sap.f.cards.NumericHeader` to properly display the temperature. 7 | 8 | ## Exercise 9.1 - Add a Card to SensorStatus.view.xml 9 | 10 | Now you'll dress up the `SensorStatus.view.xml` view. 11 | 12 | 1. Open `sensormanager/webapp/view/SensorStatus.view.xml`. 13 | 14 | 2. Add the `sap.f` and `sap.f.cards` libraries to `SensorStatus.view.xml`. 15 | 16 | ***sensormanager/webapp/view/SensorStatus.view.xml*** 17 | 18 | ````xml 19 | <mvc:View displayBlock="true" 20 | controllerName="keepcool.sensormanager.controller.SensorStatus" 21 | xmlns:mvc="sap.ui.core.mvc" 22 | xmlns="sap.m" 23 | xmlns:f="sap.f" 24 | xmlns:card="sap.f.cards"> 25 | ```` 26 | 27 | 3. Add an `sap.f.Card` with a card header to `SensorStatus.view.xml`. Enter the customer name as the header title via data binding. 28 | 29 | ***sensormanager/webapp/view/SensorStatus.view.xml*** 30 | 31 | ````xml 32 | <Page id="SensorStatusPage" title="{i18n>titleSensorStatus}" showNavButton="true" navButtonPress=".navToSensors"> 33 | <content> 34 | <VBox class="sapUiContentPadding"> 35 | <f:Card> 36 | <f:header> 37 | <card:Header title="{parts: ['i18n>cardTitle', 'sensorModel>customer'], formatter: '.formatMessage'}"/> 38 | </f:header> 39 | <f:content> 40 | 41 | </f:content> 42 | </f:Card> 43 | </VBox> 44 | </content> 45 | </Page> 46 | ```` 47 | 48 | ## Exercise 9.2 - Enhance SensorStatus.controller.js 49 | 50 | To be able to show the data in your card, you need to assign the correct binding context using the information provided by the navigation step. 51 | 52 | 1. Open `sensormanager/webapp/controller/SensorStatus.controller.js`. 53 | 54 | 2. Attach a callback function to the `routeMatched` event to retrieve the selected index and bind it to the current view. Also add the module `sap/base/strings/formatMessage`, which formats your localized text nicely. 55 | 56 | ***sensormanager/webapp/controller/SensorStatus.controller.js*** 57 | 58 | ````js 59 | sap.ui.define([ 60 | "sap/ui/core/mvc/Controller", 61 | "sap/base/strings/formatMessage" 62 | ], function (Controller, formatMessage) { 63 | "use strict"; 64 | 65 | return Controller.extend("keepcool.sensormanager.controller.SensorStatus", { 66 | 67 | formatMessage: formatMessage, 68 | 69 | onInit: function () { 70 | this.getOwnerComponent().getRouter().getRoute("RouteSensorStatus").attachMatched(this.onRouteMatched, this); 71 | }, 72 | 73 | onRouteMatched: function (oEvent) { 74 | this.getView().bindElement({ 75 | path: "/sensors/" + oEvent.getParameter("arguments").index, 76 | model: "sensorModel" 77 | }); 78 | }, 79 | 80 | navToSensors: function () { 81 | this.getOwnerComponent().getRouter().navTo("RouteSensors"); 82 | } 83 | 84 | }); 85 | }); 86 | ```` 87 | 88 | 3. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a card with the customer name. 89 | <br><br>![](images/09_02_0010.png)<br><br> 90 | 91 | ## Exercise 9.3 - Add a NumericHeader to the Card 92 | 93 | To improve the visualization further, you will replace the `sap.f.card.Header` by the `sap.f.cards.NumericHeader` in your newly created card. 94 | 95 | 1. Open `sensormanager/webapp/view/SensorStatus.view.xml` and add the following content: 96 | 97 | ***sensormanager/webapp/view/SensorStatus.view.xml*** 98 | 99 | ````xml 100 | <f:header> 101 | <card:NumericHeader 102 | title="{parts: ['i18n>cardTitle','sensorModel>customer'], formatter: '.formatMessage'}" 103 | subtitle="{parts: [ 104 | 'i18n>cardSubTitle', 105 | 'i18n>locationLabel', 106 | 'sensorModel>location', 107 | 'i18n>distanceLabel', 108 | 'sensorModel>distance', 109 | 'i18n>distanceUnit'], 110 | formatter: '.formatMessage'}" 111 | number="{sensorModel>temperature/value}" 112 | scale="{i18n>temperatureUnit}"/> 113 | </f:header> 114 | ```` 115 | 116 | 2. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a card which includes temperature information. 117 | <br><br>![](images/09_03_0010.png)<br><br> 118 | 119 | 3. Add a formatter to provide semantic coloring for the card header. 120 | The formatter fetches both the threshold and the current temperature from the model. On the basis of these values it then returns the `sap.m.ValueColor`. 121 | Open `sensormanager/webapp/controller/SensorStatus.controller.js` and add the formatter function given below. Don't forget to import the `sap.m.ValueColor` module, which provides nice color support! 122 | 123 | ***sensormanager/webapp/controller/SensorStatus.controller.js*** 124 | 125 | ````js 126 | sap.ui.define([ 127 | "sap/ui/core/mvc/Controller", 128 | "sap/base/strings/formatMessage", 129 | "sap/m/ValueColor" 130 | ], function (Controller, formatMessage, ValueColor) { 131 | ```` 132 | 133 | and 134 | 135 | ````js 136 | formatValueColor: function (oThreshold, iTemperature) { 137 | oThreshold = oThreshold || {}; 138 | if (iTemperature < oThreshold.warm) { 139 | return ValueColor.Neutral; 140 | } else if (iTemperature >= oThreshold.warm && iTemperature < oThreshold.hot) { 141 | return ValueColor.Critical; 142 | } else { 143 | return ValueColor.Error; 144 | } 145 | } 146 | ```` 147 | 148 | 4. The `sap.f.cards.NumericHeader` control provides a `state` property, which allows you to render the state of your control in a fancy way. Open `sensormanager/webapp/view/SensorStatus.view.xml`. 149 | 150 | 5. Add the `state` property to your numeric header and enter data binding information pointing to your newly created formatter function. 151 | 152 | ***sensormanager/webapp/view/SensorStatus.view.xml*** 153 | 154 | ````xml 155 | <f:header> 156 | <card:NumericHeader 157 | title="{parts: ['i18n>cardTitle','sensorModel>customer'], formatter: '.formatMessage'}" 158 | subtitle="{parts: [ 159 | 'i18n>cardSubTitle', 160 | 'i18n>locationLabel', 161 | 'sensorModel>location', 162 | 'i18n>distanceLabel', 163 | 'sensorModel>distance', 164 | 'i18n>distanceUnit'], 165 | formatter: '.formatMessage'}" 166 | number="{sensorModel>temperature/value}" 167 | scale="{i18n>temperatureUnit}" 168 | state="{parts: [ 169 | 'sensorModel>/threshold', 170 | 'sensorModel>temperature/value'], 171 | formatter: '.formatValueColor'}"/> 172 | </f:header> 173 | ```` 174 | 175 | 6. Switch to the browser tab where the application preview is opened. Click any sensor. Now the sensor status page contains a card with colored temperature information depending on the value of the temperature. 176 | <br><br>![](images/09_03_0020.png)<br><br> 177 | 178 | ## Summary 179 | 180 | Yay! You've successfully completed [Exercise 9 - Card with NumericHeader](#exercise-9---card-with-numericheader). Stay tuned! 181 | 182 | Continue to [Exercise 10 - Chart with Data Binding](../ex10/README.md). 183 | 184 | ## Further Information 185 | * Cards: https://ui5.sap.com/#/topic/5b46b03f024542ba802d99d67bc1a3f4 186 | * `sap.f.Card`: https://ui5.sap.com/#/api/sap.f.Card 187 | * `sap.f.cards.NumericHeader`: https://ui5.sap.com/#/api/sap.f.cards.NumericHeader 188 | * Methods and Events for Navigation 189 | : https://ui5.sap.com/#/topic/516e477e7e0b4e188b19a406e7528c1e 190 | -------------------------------------------------------------------------------- /exercises/ex9/images/09_02_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex9/images/09_02_0010.png -------------------------------------------------------------------------------- /exercises/ex9/images/09_03_0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex9/images/09_03_0010.png -------------------------------------------------------------------------------- /exercises/ex9/images/09_03_0020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAP-archive/teched2021-DEV160/a18baf04cc0fcf48a836437de27258392c5b2dd3/exercises/ex9/images/09_03_0020.png --------------------------------------------------------------------------------