https://raw.githubusercontent.com/ajmaradiaga/feeds/main/scmt/topics/SAPUI5-blog-posts.xml SAP Community - SAPUI5 2024-07-27T14:01:56.304002+00:00 python-feedgen SAPUI5 blog posts in SAP Community https://community.sap.com/t5/technology-blogs-by-members/ui5-spreadsheet-importer-release-v1-0-0/ba-p/13719141 UI5 Spreadsheet Importer Release v1.0.0 2024-06-02T20:15:39.827000+02:00 Marian_Zeis https://community.sap.com/t5/user/viewprofilepage/user-id/61 <P class="">I can finally announce the Version 1.0 release of the UI5 Spreadsheet Importer&nbsp;<span class="lia-unicode-emoji" title=":rocket:">🚀</span></P><P class="">I would like to start by thanking everyone who has helped me get to this level. Many things were not only new to me, but also to UI5 and how UI5 components are used. That's why&nbsp;<a href="https://community.sap.com/t5/user/viewprofilepage/user-id/42075">@pmuessig</a>&nbsp;&nbsp;is definitely the first person I have to thank here. But also everyone who has contributed with pull requests, creating issues, writing an e-mail or contacting me directly.</P><P class="">Only with their great help could we manage the complexity of supporting the different UI5 versions, platforms and OData services.</P><P class="">The high traffic on our documentation and numerous <A class="" href="https://www.npmjs.com/package/ui5-cc-spreadsheetimporter" target="_self" rel="nofollow noopener noreferrer">npm package downloads</A> suggest that many find our tool reliable for their needs. If you're interested in showcasing your logo on our homepage, please contact me at <A class="" href="mailto:marian@marianzeis.de" target="_self" rel="nofollow noopener noreferrer">marian@marianzeis.de</A>. We’d love to feature our valued users!</P><P class=""><STRONG>Landing Page</STRONG><SPAN>:</SPAN> <A class="" href="https://spreadsheet-importer.com/" target="_self" rel="nofollow noopener noreferrer">https://spreadsheet-importer.com/</A><BR /><STRONG>GitHub Repo:</STRONG> <A href="https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter" target="_blank" rel="nofollow noopener noreferrer">https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter</A>&nbsp;</P><DIV><DIV><DIV class=""><H3 id="toc-hId-1144901968">Key Features:</H3><P class="">For those who do not yet know the component, here are the main features:</P><UL><LI><STRONG>Use everywhere:</STRONG> BTP, S/4 On-Premise, S/4 Public Cloud, S/4 Private Cloud, ECC</LI><LI><STRONG>With any OData Service</STRONG>: Use with V2 and V4, no change in backend necessary</LI><LI><STRONG>With any UI5 version</STRONG>: Use any UI5 Version currently in Long-term Maintenance</LI><LI><STRONG>Plug and Play</STRONG>: Simple Integration with zero config</LI><LI><STRONG>Custom Configuration</STRONG>: Many settings and extension points</LI></UL><H3 id="toc-hId-948388463">Live Demo</H3><P class="">I'm offering a live demo so that you can try it out straight away. The demo is automatically up to date with the github repo.</P><P class="">Visit the Live Demo Page here: <A class="" href="https://livedemo.spreadsheet-importer.com/launchpad.html#Shell-home" target="_self" rel="nofollow noopener noreferrer">https://livedemo.spreadsheet-importer.com/launchpad.html#Shell-home</A></P><H3 id="toc-hId-751874958">The last major changes</H3><P class="">These are the latest changes in the last three months:</P><UL><LI><STRONG>Drag&amp;Drop support has been added</STRONG>: You can now simply drag a file onto the upload dialog</LI><LI>Overwrite i18n texts: All translated texts can now simply be overwritten with your own i18n model (see <A class="" href="https://docs.spreadsheet-importer.com/pages/Configuration/#i18nmodel" target="_self" rel="nofollow noopener noreferrer">documentation</A>).</LI><LI>Breaking Change: Two essential configuration parameters have been changed (see <A class="" href="https://docs.spreadsheet-importer.com/pages/CHANGELOGSPREADSHEETIMPORTER/#0340-2024-05-08" target="_self" rel="nofollow noopener noreferrer">documentation</A>)</LI><LI>Only centralized deployment recommended: it became more and more clear that packaged deployment creates errors, especially in the ABAP stack. Central deployment is now recommended. A new concept has been developed for better deployment (see <A class="" href="https://docs.spreadsheet-importer.com/pages/CentralDeployment/" target="_self" rel="nofollow noopener noreferrer">documentation</A>)</LI></UL><P class="">For all changes have a look at the <A class="" href="https://docs.spreadsheet-importer.com/pages/CHANGELOGSPREADSHEETIMPORTER/" target="_self" rel="nofollow noopener noreferrer">changelog</A>.</P><P class="">You can also follow the dedicated <A href="https://www.linkedin.com/company/spreadsheet-importer" target="_self" rel="nofollow noopener noreferrer">LinkedIn Page</A></P><P class=""><STRONG>The journey is not over yet: it is still being developed further and more features are on the way.</STRONG></P></DIV></DIV></DIV> 2024-06-02T20:15:39.827000+02:00 https://community.sap.com/t5/technology-blogs-by-members/abap2ui5-host-your-apps-on-sap-fiori-launchpad/ba-p/13720864 abap2UI5 - Host your Apps on SAP Fiori Launchpad 2024-06-04T14:34:47.695000+02:00 oblomov https://community.sap.com/t5/user/viewprofilepage/user-id/44240 <P><SPAN>Running abap2UI5 in an on-premise system and want to host your apps on the SAP Fiori Launchpad? This post briefly shows how to set up your ABAP system and launchpad for this scenario.</SPAN></P><H2 id="toc-hId-1016481443">Connector for SAP Fiori Launchpad</H2><P class="">Besides abap2UI5, which should already be on your system, we will install the project <A class="" href="https://github.com/abap2UI5/abap2UI5-connector_sap_fiori_launchpad?tab=readme-ov-file" target="_self" rel="nofollow noopener noreferrer">abap2UI5 - Connector SAP Fiori Launchpad (On-Stack)</A> with <A class="" href="https://abapgit.org/" target="_self" rel="nofollow noopener noreferrer">abapGit</A> and configure launchpad tiles for abap2UI5 apps:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="1717451631163.jpeg" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/119238i22F320C91467B010/image-size/large?v=v2&amp;px=999" role="button" title="1717451631163.jpeg" alt="1717451631163.jpeg" /></span></P><P style=" text-align: center; "><EM>abap2UI5 Apps hosted on SAP Fiori Launchpad</EM></P><P><SPAN>The connector works as follows:</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="1717451631735.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/119240i16276B000A4A1D9A/image-size/large?v=v2&amp;px=999" role="button" title="1717451631735.png" alt="1717451631735.png" /></span></P><P style=" text-align: center; ">&nbsp;<EM><FONT size="3">abap2UI5 running with the Connector for SAP Fiori Launchpad (On-Stack)</FONT></EM></P><P style=" text-align : left; "><FONT size="3"><SPAN>For more details, check out the following&nbsp;<STRONG><A title="test" href="https://www.linkedin.com/pulse/copy-abap2ui5-host-your-apps-sap-fiori-launchpad-abap2ui5-ocn2e" target="_self" rel="nofollow noopener noreferrer">blog post.</A></STRONG></SPAN></FONT></P> 2024-06-04T14:34:47.695000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-may-2024-release-adds-closer-integration-with-abap/ba-p/13720761 SAP Fiori tools May 2024 release adds closer integration with ABAP Development Tools 2024-06-04T17:54:57.191000+02:00 IanQuigley https://community.sap.com/t5/user/viewprofilepage/user-id/687161 <P><STRONG>SAP Fiori tools May 2024 release adds closer integration with ABAP Development Tools&nbsp;</STRONG></P><P><SPAN>With the </SPAN><A href="https://help.sap.com/docs/abap-cloud/abap-cds-tools-user-guide/creating-fiori-project" target="_blank" rel="noopener noreferrer"><SPAN>2405 client release of ABAP Development Tools (ADT),</SPAN></A><SPAN> combined with the latest SAP Fiori tools release, users can now have a more integrated experience when working between ADT at the backend and SAP Fiori tools for front-end development.&nbsp;&nbsp;&nbsp; No longer does the developer need to manually switch between the tooling environments and remember which system and entity they wish to use.&nbsp;&nbsp; Instead, with one button click in ADT, users can seamlessly switch from ABAP to SAP Fiori development.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>As mentioned in our</SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2403-introduces-gen-ai-capability-and-more/ba-p/13650594" target="_blank"><SPAN> SAP Fiori tools March update</SPAN></A><SPAN>, SAP Fiori tools now enables users to launch the Application Generator directly from ADT and skip having to select a data source and entity in the generator if they already have the SAP system and entity chosen in ADT.&nbsp;&nbsp;&nbsp; With the 2405 client release of ADT, the development work has been completed and the feature is available to our cloud customers.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Setting up ADT integration with SAP Fiori tools</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>You can choose to either launch the Application Generator from SAP Fiori tools in SAP Business Application Studio (BAS) in your browser or directly launch Visual Studio Code locally if that is your preferred integrated development environment (IDE).&nbsp;&nbsp;</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>The first step is to configure the integration between ADT and SAP Fiori tools.&nbsp; This is a one-time setup within ADT for each system you want to integrate.</SPAN><SPAN>&nbsp;</SPAN></P><UL><LI><SPAN>Choose the system you want to integrate, right-click on it and select ‘Properties’.&nbsp; From here, choose ‘ABAP Development -&gt; IDE Configuration’.&nbsp;&nbsp;</SPAN><SPAN>&nbsp;</SPAN></LI><LI><SPAN>Enable the `Configure the target IDE` checkbox and decide whether you wish to launch SAP Business Application Studio or Visual Studio Code.&nbsp;&nbsp;</SPAN><SPAN>&nbsp;</SPAN></LI></UL><P><SPAN>Below I’ll detail how you can get started in either scenario.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Integrating with SAP Business Application Studio </SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>When working with SAP Business Application Studio, you will need the following items:</SPAN><SPAN>&nbsp;</SPAN></P><UL><LI><STRONG><SPAN>URL:</SPAN></STRONG><SPAN> The URL of your Business Application Studio landscape.</SPAN><SPAN>&nbsp;</SPAN></LI><LI><STRONG><SPAN>Development Space ID:</SPAN></STRONG><SPAN> The ID development space in Business Application Studio that you have already created.&nbsp; The development space must include SAP Fiori tools as an installed SAP extension.</SPAN><SPAN>&nbsp;</SPAN></LI></UL><P><SPAN>The following development spaces will have SAP Fiori tools pre-installed:</SPAN><SPAN>&nbsp;</SPAN></P><UL><LI><SPAN>SAP Fiori</SPAN><SPAN>&nbsp;</SPAN></LI><LI><SPAN>Full-Stack Application Using Productivity Tools</SPAN><SPAN>&nbsp;</SPAN></LI><LI><SPAN>Full Stack Cloud Application</SPAN><SPAN>&nbsp;</SPAN></LI></UL><P><SPAN>&nbsp;</SPAN></P><UL><LI><STRONG><SPAN>Destination Name:</SPAN></STRONG><SPAN> In order for the ABAP system to be available in SAP Business Application Studio, it must be configured as a destination in your SAP BTP cockpit.&nbsp; Once the destination has been created, enter the destination name in this box.</SPAN><SPAN>&nbsp;</SPAN></LI></UL><P><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="IanQuigley_0-1717498745683.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/119191i5937C6FFC571004D/image-size/medium?v=v2&amp;px=400" role="button" title="IanQuigley_0-1717498745683.png" alt="IanQuigley_0-1717498745683.png" /></span></P><P style=" text-align: center; "><I><SPAN>The system settings for SAP Fiori tools integration in ADT</SPAN></I><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Integrating with Visual Studio Code</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>If you wish to work with Visual Studio Code, you only need to check the relevant checkbox in system settings.&nbsp; However, you will then need to ensure the following are installed:</SPAN><SPAN>&nbsp;</SPAN></P><UL><LI><STRONG><SPAN>Visual Studio Code:</SPAN></STRONG><SPAN> You will need the Visual Studio Code editor installed locally.&nbsp; If not available, you will see an error message when attempting to launch SAP Fiori tools from ADT.</SPAN><SPAN>&nbsp;</SPAN></LI><LI><STRONG><SPAN>SAP Fiori tools:&nbsp; </SPAN></STRONG><SPAN>SAP Fiori tools should be installed from the Visual Studio Code marketplace.&nbsp; If the tools are not installed, then Visual Studio Code will ask you if you want to install them when you try and launch from ADT.</SPAN><SPAN>&nbsp;</SPAN></LI><LI><STRONG><SPAN>Saved SAP System:</SPAN></STRONG><SPAN> You must have an SAP Saved System stored in Visual Studio Code that refers to your ABAP system.&nbsp; This will ensure that the Application Generator can automatically launch and connect to the system within Visual Studio Code.&nbsp; For more details on SAP Saved Systems, please see </SPAN><A href="https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/78a82b6852ce4061ba0825afdb79cda6.html?locale=en-US" target="_blank" rel="noopener noreferrer"><SPAN>here.</SPAN></A><SPAN>&nbsp;</SPAN></LI></UL><P>&nbsp;</P><P><STRONG><SPAN>Creating your SAP Fiori project</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>Once configured, you will see a new button alongside the service details in ADT.&nbsp; “Create Fiori Project” will launch your IDE environment and automatically start the SAP Fiori generator with these system details.&nbsp;&nbsp;</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="IanQuigley_1-1717498745684.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/119192i1A514ACCAD026F3D/image-size/medium?v=v2&amp;px=400" role="button" title="IanQuigley_1-1717498745684.png" alt="IanQuigley_1-1717498745684.png" /></span></P><P style=" text-align: center; "><SPAN>&nbsp;</SPAN><I><SPAN>“Create Fiori Project” button to launch the SAP Fiori Generator</SPAN></I><SPAN>&nbsp;</SPAN></P><P><SPAN>Once the SAP Fiori generator launches, the data source selection step will be skipped (you’ve already selected your data source in ADT), and the main entity for your template will be pre-selected with the entity chosen in ADT.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>More integrations with ADT coming soon</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>There are other enhancements planned between the development environments to make life easier for developers when working between ADT and SAP Fiori tools.&nbsp; Standby for more information in the coming months.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><SPAN>Let me finish by summarizing the power of both tools and why integrating between them is something we are focused on.&nbsp; ADT provides a dedicated ABAP development perspective within the Eclipse IDE which makes it easier for developers to navigate and work with ABAP code.&nbsp; Developers can efficiently build and maintain backend logic, business logic, and data models using ADT's comprehensive suite of tools.&nbsp; On the other hand, SAP Fiori tools offer a rich set of UI controls, templates, and design principles for creating modern and intuitive user interfaces.&nbsp;&nbsp;</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>This integration empowers developers to effortlessly navigate from ADT to SAP Fiori tools, </SPAN><SPAN>streamlining their workflow, enhancing productivity, and ultimately enabling developers to deliver high-quality applications more rapidly and effectively.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P> 2024-06-04T17:54:57.191000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/sapui5-tables-maximizing-efficiency-through-advanced-copy-amp-paste/ba-p/13723158 SAPUI5 Tables: Maximizing efficiency through advanced Copy & Paste 2024-06-06T14:37:45.850000+02:00 OliverGraeff https://community.sap.com/t5/user/viewprofilepage/user-id/4124 <P>SAP Fiori provides a modern, intelligent, and consistent user experience for SAP solutions. The technologies &amp; tools of SAP Fiori, such as <A href="https://pages.community.sap.com/topics/ui5" target="_self" rel="noopener noreferrer">SAPUI5</A> and <A href="https://pages.community.sap.com/topics/fiori-elements" target="_self" rel="noopener noreferrer">SAP Fiori elements</A>, offer extensive capabilities for building, extending and running SAP's business applications.&nbsp;When using SAP Fiori, you'll tap into a whole world of generic features of SAP's technologies, that make your life easier. From <A href="https://www.sap.com/products/artificial-intelligence/ai-assistant.html" target="_self" rel="noopener noreferrer">Joule</A>, SAP’s AI Copilot down to clever copy &amp; paste capabilities, you'll be amazed at how you survived without them.</P><H3 id="toc-hId-1145646781">Advanced Copy &amp; Paste and cell selection</H3><P>SAPUI5 1.124 improves copy &amp; paste operations in tables, letting business users work even more in a natural way with improved productivity. See these common scenarios:</P><P><STRONG>1. Copy data from a table<BR /></STRONG>Copy data from a table by selecting rows or a group of cells ('lasso select') and paste to a MS Excel sheet or other application<SPAN>s</SPAN>. Play with the <SPAN><A href="https://ui5.sap.com/1.124.0/#/entity/sap.m.Table/sample/sap.m.sample.TableSelectCopy" target="_blank" rel="noopener noreferrer">sample application Table - CellSelector, CopyProvider</A></SPAN>.</P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Row selection.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120309i75BF212D683DDFF2/image-size/medium?v=v2&amp;px=400" role="button" title="Row selection.png" alt="Row selection.png" /></span><BR />Picture 1: Row selection</P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Cell selection.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120310i2EDCA42F455E082D/image-size/medium?v=v2&amp;px=400" role="button" title="Cell selection.png" alt="Cell selection.png" /></span>Picture 2: Cell selection</P><P><STRONG>2. Paste data to a table<BR /></STRONG>Paste tabular data from some source to a table in a<SPAN>n</SPAN> SAPUI5 application. This typically initiates a handling of new entries, depending on the application. Use the <A href="https://ui5.sap.com/#/entity/sap.ui.table.Table/sample/sap.ui.table.sample.SelectCopyPaste" target="_blank" rel="noopener noreferrer">sample application Cell Selection, Copy &amp; Paste</A> to test. In this context see&nbsp;<A class="" href="https://community.sap.com/t5/application-development-blog-posts/streamlining-data-entry-exploring-the-new-paste-feature-in-fiori-elements/ba-p/13710973" target="_blank">Streamlining data entry: Exploring the new 'Paste' feature in Fiori Elements V4 tables</A>.</P><P><STRONG>3. Copy a set of values from a table to another field such as a filter field<BR /></STRONG>Use <SPAN><A href="https://ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.smartMTableWithCriticality" target="_blank" rel="noopener noreferrer">sample app Smart (Responsive) Table with Criticality</A></SPAN><SPAN> to try this.</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="TokensCOPY copy 2.png" style="width: 278px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120314iB9EF5B162D25BD3D/image-size/medium?v=v2&amp;px=400" role="button" title="TokensCOPY copy 2.png" alt="TokensCOPY copy 2.png" /></span><SPAN>&nbsp;</SPAN>Picture 3: Copy from a cell selection</P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="TokensPASTE copy 2.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120315iD2ACB47DAE541F39/image-size/medium?v=v2&amp;px=400" role="button" title="TokensPASTE copy 2.png" alt="TokensPASTE copy 2.png" /></span><SPAN>Picture 4: Paste copied cells</SPAN></P><P style=" text-align : left; "><STRONG>4. Handling split cells with multiple values</STRONG><BR />In the pictures above you see a column with combined product name and its ID. To handle this, the MS Excel export offers a 'Split cells with multiple values' option. You can achieve a similar behavior for copying data by using 'Paste Special… -&gt; As Unicode Text' when pasting into MS Excel. <SPAN>(</SPAN>See details in <SPAN><A href="https://ui5.sap.com/#/topic/f6a8fd2812d9442a9bba2f6fb296c42e" target="_blank" rel="noopener noreferrer">Copying and Pasting from External Applications to Tables</A></SPAN> and <SPAN><A href="https://ui5.sap.com/#/api/sap.m.plugins.CopyProvider.extractDataHandler" target="_blank" rel="noopener noreferrer">CopyProvider.extractDataHandler</A></SPAN>.<SPAN>)</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Paste Special.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120316i0E2730D18625AB96/image-size/medium?v=v2&amp;px=400" role="button" title="Paste Special.png" alt="Paste Special.png" /></span><SPAN>Picture 5: Paste Special in MS Excel</SPAN></P><H3 id="toc-hId-949133276"><SPAN>For application developers</SPAN></H3><P>To enable the Copy and Cell Selection features for a table in your custom application, see the details in:</P><UL><LI><SPAN><A href="https://ui5.sap.com/#/api/sap.m.plugins.CopyProvider" target="_blank" rel="noopener noreferrer">API Reference: CopyProvider</A></SPAN></LI><LI><SPAN><A href="https://ui5.sap.com/#/api/sap.m.plugins.CellSelector" target="_blank" rel="noopener noreferrer">API Reference: CellSelector</A></SPAN></LI><LI><SPAN><A href="https://ui5.sap.com/#/entity/sap.m.Table/sample/sap.m.sample.TableSelectCopy" target="_blank" rel="noopener noreferrer">Samples: Table - CellSelector, CopyProvider</A></SPAN></LI></UL><P>Please note: While these features are built into the <SPAN><A href="https://ui5.sap.com/#/entity/sap.ui.comp.smarttable.SmartTable" target="_blank" rel="noopener noreferrer">Smart Table</A></SPAN> as well as the <SPAN><A href="https://ui5.sap.com/#/entity/sap.m.Table" target="_blank" rel="noopener noreferrer">Responsive Table</A></SPAN> and <SPAN><A href="https://ui5.sap.com/#/entity/sap.ui.table.Table" target="_blank" rel="noopener noreferrer">Grid Table</A></SPAN> control, the availability in individual applications might depend on whether the application enabled the feature. This is the case for applications based on SAP Fiori elements and many other SAPUI5 apps.</P><P data-unlink="true">In this context, please see details on the <SPAN><A href="https://ui5.sap.com/#/topic/2691788a08fc43f7bf269ea7c6336caf" target="_blank" rel="noopener noreferrer">Spreadsheet Export</A></SPAN>. Also note that the <SPAN>Responsive Table</SPAN>&nbsp;received a comprehensive update of its keyboard handling.</P> 2024-06-06T14:37:45.850000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/designing-ui5-apps-for-sap-launchpad-service-part-4/ba-p/13724339 Designing UI5 Apps for SAP Launchpad Service – Part 4 2024-06-07T16:42:42.017000+02:00 matthias_schmalz https://community.sap.com/t5/user/viewprofilepage/user-id/196501 <H1 id="toc-hId-887512995">Content Navigation</H1><P><STRONG><SPAN>Part 1: </SPAN></STRONG><A href="https://blogs.sap.com/2022/01/14/designing-ui5-apps-for-sap-launchpad-service-part-1/" target="_blank" rel="noopener noreferrer">A simple UI5 app that runs in the </A>SAP Launchpad Service&nbsp;</P><P><STRONG><SPAN>Part 2: </SPAN></STRONG><A href="https://community.sap.com/t5/technology-blogs-by-sap/designing-ui5-apps-for-sap-launchpad-service-part-2/ba-p/13513283" target="_blank">Multiple Apps with a Shared Reuse Library</A>&nbsp;&nbsp;</P><P><STRONG><SPAN>Part 3: </SPAN></STRONG><A href="https://blogs.sap.com/2022/02/17/designing-ui5-apps-for-sap-launchpad-service-part-3/" target="_blank" rel="noopener noreferrer">Splitting bigger projects</A>&nbsp;</P><P><STRONG><SPAN>Part 4:&nbsp;</SPAN></STRONG>Splitting the Destination Service instance (Current page)&nbsp;</P><H1 id="toc-hId-690999490">Splitting the Destination Service instance&nbsp;</H1><H2 id="toc-hId-623568704">Current State</H2><P><SPAN>In the last posts you have learned how to split multiple apps into multiple app-hosts and xsuaa instances which are deployed by multiple MTAs. This setup allows app developers to work independently and even define their own authorization models.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>However, they still share the same instance of the destination service, and all destinations are created there.&nbsp;</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>This instance still acts as a common context for all apps. For example, the URLs to access these apps contain the instance GUID</SPAN><SPAN>,</SPAN><SPAN> which is the same for all (this has been explained in </SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/designing-ui5-apps-for-sap-launchpad-service-part-2/ba-p/13513283" target="_blank"><SPAN>part 2</SPAN></A><SPAN> of this blog).</SPAN><SPAN>&nbsp;</SPAN></P><H2 id="toc-hId-427055199">Reasons for the split&nbsp;</H2><P><SPAN>In most cases, this setup works just fine. But there's a potential for conflicts, and that's when you need to split into multiple destination service instances.&nbsp;<BR /><SPAN>One such conflict can arise from multiple instances of the same business services:</SPAN><SPAN>&nbsp;</SPAN><BR /></SPAN></P><P><SPAN><SPAN>Let us assume there is a service with an OData endpoint that allows us to store documents.</SPAN><SPAN>&nbsp;<BR /><SPAN>Every instance of this service has its own isolated area where the documents are stored and only provides access to them. These documents are protected by the credentials in the service key of the instance. </SPAN><SPAN>&nbsp;</SPAN><BR /></SPAN></SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="matthias_schmalz_0-1717769606524.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120681i43F7D327858FCD2C/image-size/large?v=v2&amp;px=999" role="button" title="matthias_schmalz_0-1717769606524.png" alt="matthias_schmalz_0-1717769606524.png" /></span></P><P><SPAN>The <EM>clientId</EM> and <EM>clientsecret</EM> are specific for this instance and are used by the service to separate the stored data.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>Here is an excerpt of how the service key could look like:</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>{&nbsp;<BR />&nbsp;&nbsp;&nbsp; "endpoints": {&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "api": "https://&lt;URL&gt;/api"&nbsp;<BR />&nbsp;&nbsp;&nbsp; },&nbsp;<BR />&nbsp;&nbsp;&nbsp; "grant_type": "user_token",&nbsp;<BR />&nbsp;&nbsp;&nbsp; "sap.cloud.service": "btp.samples.consumed.service",&nbsp;<BR />&nbsp;&nbsp;&nbsp; "uaa": {&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "clientid": "&lt;...&gt;",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "clientsecret": "&lt;...&gt;",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "url": "&lt;...&gt;",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "serviceInstanceId": "&lt;...&gt;"&nbsp;<BR />&nbsp;&nbsp;&nbsp; }&nbsp;<BR />}<BR /></SPAN></P><P><SPAN>This key will then be converted into a destination on the destination service instance to make it available to the </SPAN><A href="https://help.sap.com/docs/btp/sap-business-technology-platform/managed-application-router" target="_blank" rel="noopener noreferrer"><SPAN>managed </SPAN></A><SPAN>app router</SPAN><SPAN>.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>To connect to the OData endpoint of the service, the app adds a </SPAN><A href="https://www.npmjs.com/package/@sap/approuter#routes" target="_blank" rel="noopener nofollow noreferrer"><SPAN>routing configuration</SPAN></A><SPAN> to its </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/app1/xs-app.json#L24" target="_blank" rel="noopener nofollow noreferrer"><SPAN>xs-app.json</SPAN></A><SPAN>:</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>{&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "source": "^/api/documents/info$",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "target": "info",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "authenticationType": "xsuaa",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "service": "btp.samples.consumed.service",&nbsp;<BR />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "endpoint": "api"&nbsp;<BR />},&nbsp;<BR /></SPAN></P><P><SPAN>As you can see</SPAN><SPAN>,</SPAN><SPAN> the routing refers to the service key by specifying the </SPAN><SPAN>service name</SPAN><SPAN> that appears in the service credentials as </SPAN><I><SPAN>sap.cloud.service</SPAN></I><SPAN> and then chooses a </SPAN><SPAN>service endpoint</SPAN><SPAN>.</SPAN><SPAN>&nbsp;<BR /><SPAN>The contained credentials are then used to get an access token and call the service.</SPAN><SPAN>&nbsp;</SPAN><BR /></SPAN></P><P><SPAN>Now let us further assume that app1 and app2 both have their own instance of the document service.&nbsp;</SPAN><SPAN>&nbsp;<BR /><SPAN>You must ensure that both apps access their dedicated content by using the credentials of their instance, i.e., </SPAN><STRONG><SPAN>they must access the services within their context</SPAN></STRONG><SPAN>.</SPAN><SPAN>&nbsp;<BR /><SPAN>Without splitting the destination service instance</SPAN><SPAN>,</SPAN><SPAN> both destinations for the document service would be created on the shared instance.</SPAN><SPAN>&nbsp;</SPAN><BR /></SPAN></SPAN></P><P><SPAN>Unfortunately, this is now causing conflicts because both destinations have the same <EM>sap.cloud.service</EM> specified and the resolution of the service keys to use is ambiguous. I.e., the destination service instance defines only one context under which the service can be accessed.</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="matthias_schmalz_1-1717769606525.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120682i21D5921BFA19984C/image-size/large?v=v2&amp;px=999" role="button" title="matthias_schmalz_1-1717769606525.png" alt="matthias_schmalz_1-1717769606525.png" /></span></P><P><SPAN>This is the </SPAN><STRONG><SPAN>moment where you must split the destination service instance to get multiple contexts to access the service </SPAN></STRONG><SPAN>(one for app1 and one for app2)</SPAN><SPAN>.</SPAN><SPAN>&nbsp;</SPAN></P><H2 id="toc-hId-230541694">How to split&nbsp;</H2><P><SPAN>After the split, you no longer have a shared destination service instance. Instead, each context gets its own. The destinations related to the apps are moved to these instances and the destinations for the shared library are now duplicated and appear on both instances. Additionally, there are destinations for the consumed service instances.</SPAN><SPAN>&nbsp;</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="matthias_schmalz_2-1717769606526.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120683iACBEE26103D00AFE/image-size/large?v=v2&amp;px=999" role="button" title="matthias_schmalz_2-1717769606526.png" alt="matthias_schmalz_2-1717769606526.png" /></span></P><P><SPAN>Let us see how the MTAs have changed [</SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/main/btp-samples-split-destination/mta-shared/mta.yaml" target="_blank" rel="noopener nofollow noreferrer"><SPAN>Shared</SPAN></A><SPAN>, </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/main/btp-samples-split-destination/mta-app1/mta.yaml" target="_blank" rel="noopener nofollow noreferrer"><SPAN>App1</SPAN></A><SPAN>, </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/main/btp-samples-split-destination/mta-app2/mta.yaml" target="_blank" rel="noopener nofollow noreferrer"><SPAN>App2</SPAN></A><SPAN>].</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="matthias_schmalz_3-1717769606528.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120685iA1584931EE7D5E9E/image-size/large?v=v2&amp;px=999" role="button" title="matthias_schmalz_3-1717769606528.png" alt="matthias_schmalz_3-1717769606528.png" /></span></P><P><SPAN>Here the resource for the destination instance has been removed from the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-shared/mta.yaml#L30" target="_blank" rel="noopener nofollow noreferrer"><SPAN>library MTA</SPAN></A><SPAN> and switched to </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/mta.yaml#L86" target="_blank" rel="noopener nofollow noreferrer"><SPAN>managed instances</SPAN></A><SPAN> in the app MTAs. Additionally, the app MTAs now refer to the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-shared/mta.yaml#L30" target="_blank" rel="noopener nofollow noreferrer"><SPAN>library app-host and xsuaa as existing service</SPAN></A><SPAN>.&nbsp;</SPAN><SPAN>&nbsp;<BR /><SPAN>Each of them contains the destinations of their </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/main/btp-samples-split-destination/mta-app1/mta.yaml" target="_blank" rel="noopener nofollow noreferrer"><SPAN>app-host</SPAN></A><SPAN> and </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/b43a0c0486ece70eacde2be8b558cfd58d8f634c/btp-samples-split-destination/mta-app1/mta.yaml#L40" target="_blank" rel="noopener nofollow noreferrer"><SPAN>xsuaa</SPAN></A><SPAN> instances as well as for the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/b43a0c0486ece70eacde2be8b558cfd58d8f634c/btp-samples-split-destination/mta-app1/mta.yaml#L45" target="_blank" rel="noopener nofollow noreferrer"><SPAN>shared app-host</SPAN></A><SPAN> and </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/b43a0c0486ece70eacde2be8b558cfd58d8f634c/btp-samples-split-destination/mta-app1/mta.yaml#L49" target="_blank" rel="noopener nofollow noreferrer"><SPAN>xsuaa</SPAN></A><SPAN>.</SPAN><SPAN>&nbsp;<BR /></SPAN></SPAN><SPAN>Also, there are now the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/mta.yaml#L117" target="_blank" rel="noopener nofollow noreferrer"><SPAN>resources for the consumed service</SPAN></A><SPAN> and the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/mta.yaml#L54" target="_blank" rel="noopener nofollow noreferrer"><SPAN>destination definition</SPAN></A><SPAN>.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>In our sample, the consumed service offers a very simple endpoint that just returns information about the access token used.</SPAN><SPAN>&nbsp;<BR /><SPAN>The apps have an additional </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/app1/webapp/manifest.json#L23" target="_blank" rel="noopener nofollow noreferrer"><SPAN>datasource</SPAN></A><SPAN> and </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/app1/webapp/manifest.json#L99" target="_blank" rel="noopener nofollow noreferrer"><SPAN>model</SPAN></A><SPAN> defined in their </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/app1/webapp/manifest.json" target="_blank" rel="noopener nofollow noreferrer"><SPAN>manifest.json</SPAN></A><SPAN> to read this, and the <EM>clientId</EM> is now bound to the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-shared/lib/src/controls/Reuse.js" target="_blank" rel="noopener nofollow noreferrer"><SPAN>custom control</SPAN></A><SPAN> in the </SPAN><A href="https://github.com/SAP-samples/btp-launchpad-ui-samples/blob/077dae8dbef2eb4777ccae838edf41d8c5793176/btp-samples-split-destination/mta-app1/app1/webapp/view/Master.view.xml#L22" target="_blank" rel="noopener nofollow noreferrer"><SPAN>master.view.xml</SPAN></A><SPAN> to be shown on the UI.</SPAN><SPAN>&nbsp;</SPAN><BR /></SPAN></P><H2 id="toc-hId-34028189"><STRONG><SPAN>Access at runtime</SPAN></STRONG><SPAN>&nbsp;</SPAN></H2><P><SPAN>Because you’ve split the destination instance, the runtime access URLs change. Now, each app URL includes the GUID of its destination instance.</SPAN><SPAN>&nbsp;<BR /></SPAN><SPAN>This way the resolution of </SPAN><I><SPAN>sap.cloud.service</SPAN></I><SPAN> names is uniquely resolved via the correct destination to use the correct credentials.</SPAN><SPAN>&nbsp;<BR /></SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="matthias_schmalz_4-1717769606530.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120684i51CCCB8654AED0E4/image-size/large?v=v2&amp;px=999" role="button" title="matthias_schmalz_4-1717769606530.png" alt="matthias_schmalz_4-1717769606530.png" /></span></P><P><SPAN>When running the apps they display the used clientid. You can verify that both apps show a different one</SPAN><SPAN>,</SPAN><SPAN> which reflect</SPAN><SPAN>s</SPAN><SPAN> the instance GUID of the consumed service.</SPAN><SPAN>&nbsp;</SPAN></P><P>Well done, now we have achieved a complete separation of the two apps.</P><P><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P> 2024-06-07T16:42:42.017000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/adapt-your-app-to-sapui5-2-x-make-an-impact-by-joining-our-cei-project/ba-p/13722775 Adapt your app to SAPUI5 2.x - Make an impact by joining our CEI project 2024-06-10T08:00:49.636000+02:00 OliverGraeff https://community.sap.com/t5/user/viewprofilepage/user-id/4124 <P>SAP Customer Engagement Initiatives (CEI) on <A href="https://influence.sap.com" target="_self" rel="noopener noreferrer">https://influence.sap.com</A> allow you, as an SAP customer or partner, to gain early insights into SAP's product developments and work directly with SAP teams to shape future product directions. This project presents a unique opportunity to work with SAPUI5 product owners and engineering teams, leveraging your expertise to directly address real-world challenges from your custom development projects.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="300082_GettyImages-1313066015_medium_jpg.jpg" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120634iB7F1AF71FBFB6FB7/image-size/medium?v=v2&amp;px=400" role="button" title="300082_GettyImages-1313066015_medium_jpg.jpg" alt="300082_GettyImages-1313066015_medium_jpg.jpg" /></span></P><H3 id="toc-hId-1145622815"><SPAN>Join the upcoming CEI project to make an impact on how applications are adapted to SAPUI5 2.x</SPAN></H3><P>SAPUI5 is SAP’s JavaScript framework and UI library for building cross-platform, enterprise-grade Web applications. <A href="https://pages.community.sap.com/topics/ui5" target="_self" rel="noopener noreferrer">SAPUI5</A> has been a solid foundation for enterprise apps for more than a decade and is still in its first major version. Despite its continuous evolution and the dedicated SAPUI5 modularization project from a few years ago, SAPUI5 has remained backward compatible. However, with new requirements, such as the demand for strict Content Security Policy, as well as the evolution of major browsers (e.g. the introduction of new technologies), SAPUI5 needs to adapt. SAPUI5 is preparing for the future by leaving behind outdated concepts like synchronous network requests.</P><P>You now have the chance to understand the impact of SAPUI5 2.x on SAP’s applications, on your own applications, and on the system landscape. In this CEI project you will receive guidance, best practices, and tool support to adapt your own custom apps to SAPUI5 2.x. (If you like you can already have a look at similar details for OpenUI5 in <A href="https://community.sap.com/t5/open-source-blogs/introducing-openui5-2-x/ba-p/13580633" target="_self">Introducing OpenUI5 2.x</A>.)</P><H3 id="toc-hId-949109310">Project Goals and Activities</H3><UL><LI>Validate concepts for moving existing SAPUI5 1.x apps to SAPUI5 2.x such as the necessary code changes and tool support &amp; documentation on the code adaptation</LI><LI>Identify existing pain points</LI><LI>Gather prioritized requirements for the SAPUI5 road map with regards to new major versions</LI></UL><H3 id="toc-hId-752595805">Format of Activities, Estimated Effort</H3><P>Participants need to be available in the August/September 2024 timeframe for virtual sessions. Estimated effort: approx. 10h for own development activities + 6h for virtual calls:</P><UL><LI>Initial call (1h) in mid-August 2024 to outline the project and explain the transition to SAPUI5 2.x</LI><LI>3 weekly calls (1h) for Q&amp;A and feedback in August / early September</LI><LI>A final feedback call (1h) mid September to collect &amp; prioritize feedback</LI><LI>Closing call (1h) in September</LI></UL><H3 id="toc-hId-556082300"><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="300854_GettyImages-1471614837_medium_jpg.jpg" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/120636i67316EC5D237BC15/image-size/medium?v=v2&amp;px=400" role="button" title="300854_GettyImages-1471614837_medium_jpg.jpg" alt="300854_GettyImages-1471614837_medium_jpg.jpg" /></span><SPAN><BR />Prerequisites</SPAN></H3><P><SPAN>This is your chance to give feedback on all aspects of moving to SAPUI5 2.x and influence the direction of the SAPUI5 road map. Join this project if</SPAN></P><UL><LI>you are working in development projects and are <STRONG>familiar with SAPUI5 code</STRONG></LI><LI>you have custom SAPUI5 1.x apps with <STRONG>freestyle SAPUI5 code</STRONG>, which you can adapt to SAPUI5 2.x. (This can be freestyle SAPUI5 apps or SAP Fiori elements apps with extensions / custom page.)</LI><LI>you are using <STRONG>your SAP Business Application Studio / VS Code environment</STRONG> with SAP Fiori tools.</LI></UL><TABLE border="1" width="100%"><TBODY><TR><TD width="100%"><STRONG>Register for the <A href="https://influence.sap.com/sap/ino/#campaign/3711" target="_self" rel="noopener noreferrer">CEI project 'SAPUI5 2.x'</A> from June 10 - July 11, 2024.</STRONG></TD></TR></TBODY></TABLE><P>Once the registration process is finalized, the project team invites participants for the initial call to go through the project scope and timelines.</P> 2024-06-10T08:00:49.636000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/my-code-connect-2024-experience/ba-p/13725287 My Code Connect 2024 Experience 2024-06-11T02:15:40.162000+02:00 mauriciolauffer https://community.sap.com/t5/user/viewprofilepage/user-id/11418 <P><SPAN>Here I am, on a plane flying back from <A href="https://code-connect.dev/" target="_self" rel="nofollow noopener noreferrer">Code Connect</A> at the SAP headquarters in Germany. I'm still processing everything, mentally replaying some of the sessions I had attended, eager to watch the ones I couldn't. Stuck on a plane isn't fun, so I decided to write about my experience at the event. I won't talk about the content presented because anybody can watch it online once available. I want to talk a little bit about how it felt being there.</SPAN></P><P><SPAN>If you don't know what Code Connect is, here's a brief intro. It's the merge of 3 different conferences (<A href="https://recap-conf.dev/" target="_self" rel="nofollow noopener noreferrer">reCAP</A> + <A href="https://openui5.org/ui5con/" target="_self" rel="nofollow noopener noreferrer">UI5con</A> + <A href="https://abapconf.org/" target="_self" rel="nofollow noopener noreferrer">ABAPconf</A>) with a whole day dedicated to a single technology. It was dabbed as the "new TechEd" by the attendees. I've heard it sooooo many times!</SPAN></P><P><SPAN>Short comments on the days and a brain dump on everything in between...</SPAN></P><P><SPAN>Day 0, <STRONG>CodeJam</STRONG>, started with a hands-on workshop on CAP conducted by the legend DJ Adams. Man, he's a walking geek encyclopedia and master of the random geek fun facts.</SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="SAP CodeJam" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121199iC0EF95766FDA1BAD/image-size/large?v=v2&amp;px=999" role="button" title="IMG_1888.jpg" alt="SAP CodeJam" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">SAP CodeJam</span></span></SPAN></P><P><SPAN>Day 1, <STRONG>reCAP</STRONG>, was all about how CAP is so f* powerful and simple at the same time (sorry, I couldn't find any better word). In my humble opinion, it cemented the idea of CAP becoming the framework people will use to build most of the custom things SAP-related.</SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Welcome to reCAP 2024" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121200iED0A02005F239ED6/image-size/large?v=v2&amp;px=999" role="button" title="_DSC0174.JPG" alt="Welcome to reCAP 2024" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Welcome to reCAP 2024</span></span></SPAN></P><P><SPAN>Day 2, <STRONG>UI5con</STRONG>, showed that UI5 can do much more than Fiori Elements apps. It's modern, solid and can render fast!</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Full house to watch Peter Muessig" style="width: 938px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121208iCFDCEF6AEA276948/image-size/large?v=v2&amp;px=999" role="button" title="PXL_20240605_101308232-min.jpg" alt="Full house to watch Peter Muessig" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Full house to watch Peter Muessig</span></span></P><P><SPAN>Day 3, <STRONG>ABAPconf</STRONG>, I can summarize with: ABAP is not dead! It's not going anywhere. Actually, it's going to the cloud. So many new tools and techniques to make RAP better and easier to work with.</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="ABAP Clean Core" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121204i21909B8238123C27/image-size/large?v=v2&amp;px=999" role="button" title="20240606_144201-min.jpg" alt="ABAP Clean Core" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">ABAP Clean Core</span></span></P><P><SPAN>For 4 days I soaked up knowledge shared on the stages, and most importantly, the invaluable experiences and real-life challenges shared in conversations throughout the day.</SPAN></P><P><SPAN>I met old friends, I made new friends, I met people that I’ve known for ages, but have never seen in person. Some were not as tall as I was expecting (sorry man <span class="lia-unicode-emoji" title=":winking_face_with_tongue:">😜</span>). I saw great ideas, I saw captivating speakers, and I saw smart code, which makes me even more nervous when presenting because they're far ahead of my limited capabilities.</SPAN></P><P><SPAN>The common feeling is that we were part of a large community, full of people from all backgrounds and skill levels, but with one thing in common: the love for SAP technology. We all belonged there. It was the Woodstock of SAP! Without the LSD, but full of talented people, good music and LOTS of fun! A unique moment that may spark a renaissance of the SAP community itself because I do believe people will contact each other to collaborate on new projects.</SPAN></P><P><SPAN>Code Connect was a beast packed with actionable insights and lessons from the sessions. Each day was focused on one technology only. There was no "this feature will be available next Christmas". Everything shared in those 3 days was possible to play with straight away. For instance, after my session, people told me they would test that out once they got to their homes. On the following day, somebody said they had implemented some of the suggestions. Bloody hell!!!</SPAN></P><P><SPAN>The same happened to others. All sessions shared this one little thing: no vaporware, just real code. Even the sessions touching genAI, the biggest buzzword ever, showed real applications that anybody could test today.</SPAN></P><P>You could see people chatting around, sharing what they are doing, the projects they are working on. Some of the things that I heard: what they like in CAP (easy to learn, higher productivity), how they are adopting ABAP Cloud (more on BTP than the embedded one), hackathons are still the best way to learn new tech in house. These conversations would get even better in the evening as we sat outdoors listening to good music, playing some games and having some drinks. Every night I'd leave the premises around 10pm and people were still there... If they kept the place open and the music playing in a 24h old LAN party style, people wouldn't leave.&nbsp;</P><P><SPAN>Whoever had the idea to combine forces and bundle these 3 conferences in a blockbuster event deserves all the accolades from the SAP community at large. The people behind the event are definitely onto something special. Keep up the awesome work!!!&nbsp;</SPAN><SPAN>And please, please, please... Keep SAP marketing and sales at bay. They already have their events, let us have ours. As the ABAPconf sign stated: “by developers for developers”.</SPAN></P><P><SPAN>I just want to say thank you to the organisation, and to everyone behind this magnificent event. Thank you to all the speakers who invested time in preparing the sessions, for sharing your knowledge and experience. Thank you to all the attendees because without you the event would be nothing. And thank you to the sponsors for funding such a large, complex and beautiful idea.</SPAN></P><P><SPAN>It might be unfair to the others, but I must mention some people, not from the organisation, but from the community...</SPAN></P><P><SPAN>Svea and her team for being there listening to the community. They could hide themselves in a room and avoid the negative feedback for the infamous new platform they knew they'd get, but they didn't. It requires courage and I respect it. We all hope to see the changes being implemented sooner rather than later.</SPAN></P><P><SPAN>The crew from Portugal which I believe was the biggest group representing a customer there! They even had their own CAPs 🧢</SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Portugal represented" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121214iFB6B268E14AECF89/image-size/large?v=v2&amp;px=999" role="button" title="IMG_6499.JPG" alt="Portugal represented" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Portugal represented</span></span></SPAN></P><P><SPAN>The Ned Kelly Gang from Down Under! +20 hours on a plane to attend an event because they want to, not because they were told to speaks volumes. You (we?) guys rock!</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="The Ned Kelly Gang missing some members" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121206i4A2DF7AC13198CDB/image-size/large?v=v2&amp;px=999" role="button" title="DSCF3445.jpg" alt="The Ned Kelly Gang missing some members" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">The Ned Kelly Gang missing some members</span></span><BR /><BR /><SPAN>PS: hear me out now... Add an extra day for SAP BTP in the Code Connect (BTPconf?) and we definitely have something better than TechEd&nbsp;&nbsp;<span class="lia-unicode-emoji" title=":winking_face_with_tongue:">😜</span></SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="3 developers" style="width: 724px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121209iDB382F08D2F53197/image-size/large?v=v2&amp;px=999" role="button" title="20240605_173711-min.jpg" alt="3 developers" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">3 developers</span></span></SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="About to start my session and have some fun" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121211i676A4D751DB67E82/image-size/large?v=v2&amp;px=999" role="button" title="GPPVHgzXcAAAtiT.jpg" alt="About to start my session and have some fun" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">About to start my session and have some fun</span></span></SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="LEGO Fender I won in a raffle, thanks dox42 \o/" style="width: 729px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/121602i28B02F5C7C36F0E9/image-size/large?v=v2&amp;px=999" role="button" title="20240610_111953.jpg" alt="LEGO Fender I won in a raffle, thanks dox42 \o/" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">LEGO Fender I won in a raffle, thanks dox42 \o/</span></span></SPAN></P> 2024-06-11T02:15:40.162000+02:00 https://community.sap.com/t5/technology-blogs-by-members/thoughts-on-sap-codeconnect-2024/ba-p/13727524 Thoughts on SAP CodeConnect 2024 2024-06-14T09:25:27.970000+02:00 BenPatterson https://community.sap.com/t5/user/viewprofilepage/user-id/136196 <P>It was such a privilege to attend&nbsp;<A href="https://code-connect.dev/" target="_self" rel="nofollow noopener noreferrer">Code Connect</A>&nbsp; (un)conference this year in Germany. And I was proud to represent <A href="https://rev-trac.com/" target="_self" rel="nofollow noopener noreferrer">rev-trac</A>&nbsp;with the honour of providing some sponsorship of this developer led and focused initiative. Being a SAP partner that develops solutions both on, and for SAP technologies, it was a great fit for us. Our team on the ground included our lead Java (Srinath) and ABAP (Adam) engineers and also one of our key CAP engineers (Nick).&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Nick, Srinath, Adam and myself excited for the first day" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/122142i1CBA0AEED40748A6/image-size/medium?v=v2&amp;px=400" role="button" title="BenPatterson_0-1718147019748.png" alt="Nick, Srinath, Adam and myself excited for the first day" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Nick, Srinath, Adam and myself excited for the first day</span></span></P><P>&nbsp;</P><P>In this blog, I wanted to share the feeling of being there and some of my thoughts and reflections. I encourage you to check out the session themselves which are available to view from the respective sites (below).</P><H2 id="toc-hId-1016686973">Overview</H2><P>The conference is a convergence of three individual events, <A href="https://recap-conf.dev/" target="_self" rel="nofollow noopener noreferrer">re</A><A href="https://recap-conf.dev/" target="_self" rel="nofollow noopener noreferrer">≼</A><A href="https://recap-conf.dev/" target="_self" rel="nofollow noopener noreferrer">CAP</A>,&nbsp;<A href="https://openui5.org/ui5con/germany2024/" target="_self" rel="nofollow noreferrer noopener">UI5con</A>&nbsp;&amp;&nbsp;<A href="https://abapconf.org/" target="_self" rel="nofollow noopener noreferrer">ABAPconf</A>. And it was interesting how they were combined, but each one had its own individual flavour and style. I think in future some of the logistical aspects would do well to align (e.g. ticketing, conference app, etc), but that individuality did create a sense of authenticity for each one.</P><P>The location was at the SAP campus at St Leon-Rot, near SAP's headquarters. And although this was somewhat remote, there was sense of being invited to SAP's home and experiencing some real heart-felt hospitality.</P><P>The first day started with a CAP code jam hosted by, none other than the CAP advocate extraordinaire DJ Adams himself. Unfortunately I was not able to attend that session, but all reports were expectedly praiseworthy. This was a fitting way to kick things off, followed by a meal at a community based Italian restaurant, which I did manage to get to. This was a pleasant evening and set the tone of welcoming and relaxed interaction.</P><P>Being an on-site event, the most important factor are the people. The attendees represented a great variety of backgrounds and experiences, as well as a good representation from the SAP technical product teams. Above all was the general attitude of curiosity, adventure and sense of passion for the technologies of their respective crafts. Another trait that stood out was a sense of honesty and openness regarding the challenges and concerns that exist out there on each of these frontiers.</P><P>The first conference day started with&nbsp;<FONT face="arial,helvetica,sans-serif"><SPAN>re</SPAN><SPAN>≼</SPAN><SPAN>CAP</SPAN></FONT>, setting the pace with a barrage of new ideas and features. Some of the high level takeaways:</P><UL><LI><FONT face="arial,helvetica,sans-serif"><SPAN>The plugin framework, leading to a more standardised way to provide or receive additional CAP functionality</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Embedded analytics</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Logging and telemetry and overall improvements in Ops support</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Advancements in draft handing, as well as some challenges poignantly raised by Sergei Haller</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Documentation - it was great to see the CAPire team there actively listening and taking feedback from users </SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Approaches to robust Node.js lifecycles presented by Mauricio Lauffer</SPAN></FONT>&nbsp;</LI></UL><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="we love CAP" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/122172i6958DEE2D750711A/image-size/medium?v=v2&amp;px=400" role="button" title="BenPatterson_3-1718159521274.png" alt="we love CAP" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">we love CAP</span></span></P><P>&nbsp;</P><P>UI5con was the next day following closely in reCAPs footsteps. <FONT face="arial, helvetica, sans-serif">Some big topics that I came across were:</FONT></P><UL><UL><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Web Components, Web Components, Web Components. This was a big focus, and for good reason, its great tech and I am keen to see how it works its way into the entire UI5 solution going forward</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>New advancements with analytics and hierarchy views</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>Testing! Such an important (and often under-appreciated) topic. The overview provided by Simon Coen on this was exceptional, providing a solid framework for providing full coverage for you UI5 stack.</SPAN></FONT></LI></UL></UL><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="UI5con!" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/122171iB50BB170E4C6796D/image-size/medium?v=v2&amp;px=400" role="button" title="BenPatterson_2-1718159374600.png" alt="UI5con!" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">UI5con!</span></span></P><P>&nbsp;</P><P>And last but definitely not least was ABAPconf, bringing the series to a close.&nbsp;<SPAN>Here we also saw large amount of excitement and new ideas. As is tradition, there is a German speaking component, which I appreciated in the introduction, but for the four sessions held in German only (with some English slides) I felt that this somewhat detracted from the inclusiveness compared to the other two days. Some highlights were:</SPAN></P><UL><UL><LI><FONT face="arial,helvetica,sans-serif"><SPAN>More detail on implementing clean core on stack, essentially moving items from tier 3 'Classic', or 'Dirty' ABAP and separating out items that can't be implemented with the currently exposed ABAP API objects into a separate tagged package. This provides a staging ground for migration that gives a clear scope of the overlap or exposure to non released items, perhaps in a sense an anti-corruption layer.</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>ABAP package manager - an inspirational call to innovate towards open source with ABAP</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>More detailed approaches to testing was also a welcome aspect here</SPAN></FONT></LI><LI><FONT face="arial,helvetica,sans-serif"><SPAN>One thing I missed at this one was interaction with the experts via the meet the expert booth</SPAN></FONT></LI></UL></UL><P>&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Willkommen - abap conf!" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/122169i52C2A60E345C6739/image-size/medium?v=v2&amp;px=400" role="button" title="BenPatterson_1-1718159277291.png" alt="Willkommen - abap conf!" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Willkommen - abap conf!</span></span></P><P>&nbsp;</P><P>Each of the three conference days concluded with a dinner on the delightful campus grounds with almost a carnival like atmosphere, and steady flow of excellent craft beer. Not to mention that we were blessed with some fantastic weather. This aspect really stitched the conference together with that sense of hospitality and provided ample time to connect and reflect on the days experiences.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Enjoying the food, beer and conversations at CodeConnect" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/122173i1512480B359074DC/image-size/medium?v=v2&amp;px=400" role="button" title="BenPatterson_4-1718159953636.png" alt="Enjoying the food, beer and conversations at CodeConnect" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Enjoying the food, beer and conversations at CodeConnect</span></span></P><H2 id="toc-hId-820173468">General reflections</H2><P>Overall I would have to say the key positive would be the passion and energy on the floor. This was of course varied throughout, but in some cases this was truly inspirational.</P><P>The other aspect was the format (esp. reCAP and UI5con). The sessions were short (about 20min) and were often in series or themes, and this allowed a very flexible way to interact, by just going to one presentation and then chat to the experts at the booth or dive deep and go to three talks in a related series.</P><P>The SAP community representation lead by Svea was also a real plus.</P><P>I would suggest that perhaps&nbsp;<FONT face="arial,helvetica,sans-serif"><SPAN>re</SPAN><SPAN>≼</SPAN><SPAN>CAP&nbsp;</SPAN></FONT>could be spread over more than one day as there was just so much to dive into. But I can appreciate that organising such events is huge undertaking, so it’s a big ask. Perhaps some sessions could sneak into the code jam day.</P><P>Overall, it was a fantastic experience and thanks to all those who organised it, your hard work was much appreciated.</P><P>Best regards,</P><P>Ben.</P><P>PS, for more thoughts on this by a fellow Antipodean, head on over to blog by <a href="https://community.sap.com/t5/user/viewprofilepage/user-id/11418">@mauriciolauffer</a>&nbsp;'s <A href="https://community.sap.com/t5/technology-blogs-by-sap/my-code-connect-2024-experience/ba-p/13725287#comment-on-this" target="_self">reflections on the event</A> as well.</P><P>&nbsp;</P><P>&nbsp;</P> 2024-06-14T09:25:27.970000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579 Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept 2024-06-20T14:33:50.187000+02:00 merbinjanselm https://community.sap.com/t5/user/viewprofilepage/user-id/166309 <H6 id="toc-hId-1533852157">Blog Series</H6><TABLE border="1" width="100%"><TBODY><TR><TD width="100%" height="30px">Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept</TD></TR><TR><TD width="100%" height="30px"><A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-2-building-a-text-summarizer/ba-p/13736465" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer</A></TD></TR><TR><TD width="100%" height="30px"><A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-3-building-an-ai-chatbot/ba-p/13736501" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant</A></TD></TR></TBODY></TABLE><P>With the announcement of <A class="" href="https://community.sap.com/t5/technology-blogs-by-sap/generative-ai-hub-out-now/ba-p/13580462" target="_blank">SAP Generative AI Hub</A>, there has been an explosion of interest in exploring how artificial intelligence can change how enterprise applications are developed and consumed at SAP. The <A class="" href="https://discovery-center.cloud.sap/refArchDetail/ref-arch-open-ai" target="_blank" rel="noopener noreferrer nofollow">official BTP Reference Architecture for GenAI and RAG</A> provides general guidance on how to build full-stack apps integrating with LLMs via SAP AI Core. But many times, all you need is to integrate your frontend webapp - SAPUI5 freestyle or Fiori Elements apps quickly with LLMs for use cases, where you need GenAI - LLM integration only on the web client side and don't require complicated backend setup.</P><P>Some of the use cases where a client-side LLM integration within SAPUI5 apps is needed include, but are not limited to:</P><OL><LI>Product Description Generator</LI><LI>Job Description Generator</LI><LI>Customer Query Summarizer</LI><LI>Campaign Idea/Title Generator</LI><LI>AI Assistant Chatbot (without RAG—to answer based on a limited set of instructions)</LI></OL><P>I'm beginning this blog in this series by outlining an approach using SAP BTP Destinations to achieve LLM integration easily and securely, for <EM>deployment</EM> and <EM>development</EM>. The techniques outlined can be used right away in a productive setting. In the subsequent blogs, I'll walk you through an overview of how to build a simple Text Summarizer and a slightly advanced AI Chatbot Assistant.</P><P>Below is the solution to how this works. Please note that <EM>Standalone Approuter</EM> is optional for consumption via <EM>SAP Workzone</EM> or directly via <EM>SAP HTML5 Repository</EM> since both have <EM>SAP Managed Approuter</EM> running behind the scenes and would respect the <FONT face="courier new,courier"><SPAN>xs-app.json</SPAN></FONT> configuration.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="SAPUI5-AI Integration - Solution.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/125340i7284DA53BACF7377/image-size/large?v=v2&amp;px=999" role="button" title="SAPUI5-AI Integration - Solution.png" alt="SAPUI5-AI Integration - Solution.png" /></span></P><P>With this context set, let's get started to make your SAPUI5 apps AI-enabled <span class="lia-unicode-emoji" title=":sparkles:">✨</span>!</P><H2 id="toc-hId-821007776">1. Create an SAPUI5 app</H2><P>If you don't already have a SAPUI5 app (Freestyle or Fiori Elements), you can create a new app via <A href="https://community.sap.com/t5/technology-blogs-by-sap/sapui5-development-with-sap-build-code/ba-p/13575723" target="_self">SAP Build Code</A>&nbsp;(Create &gt; Build an Application &gt; SAP Build Code &gt; SAP Fiori Application) or in VS Code using&nbsp;<A href="https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack" target="_self" rel="nofollow noopener noreferrer">SAP Fiori Tools Extensions.</A></P><H2 id="toc-hId-624494271">2. Create a Destination for LLM deployment in SAP AI Core</H2><P>Create a Destination in SAP BTP Cockpit with a name such as&nbsp;<FONT face="courier new,courier">GENERATIVE_AI_HUB</FONT> and the following info:</P><P>&nbsp;</P><pre class="lia-code-sample language-yaml"><code># Destination Name: URL: &lt;AI_API_URL&gt;/v2 # Eg. https://api.ai....ml.hana.ondemand.com/v2 &lt;- Note the suffix /v2 Authentication: OAuth2ClientCredentials Client ID: &lt;CLIENT_ID&gt; Client Secret: &lt;CLIENT_SECRET&gt; Token Service Url: &lt;TOKEN_URL&gt;/oauth/token ## Additional Properties HTML5.DynamicDestination: true URL.headers.AI-Resource-Group: default URL.headers.Content-Type: application/json</code></pre><P>&nbsp;</P><P>Please note that the URL is suffixed with<FONT face="courier new,courier"> /v2</FONT> in order <A href="https://github.com/SAP-samples/cap-llm-plugin-samples/tree/main/samples/hr-approval-rag-usecase#pre-requisites:~:text=URL%3A%20%3CAI%2DAPI%2DOF%2DAI%2DCORE%2DSERVICE%2DKEY%3E/v2%20%23%20make%20sure%20to%20add%20/v2!" target="_self" rel="nofollow noopener noreferrer">to align with cap-llm-plugin usage</A>.</P><H2 id="toc-hId-427980766">3. Prepare for Deployment</H2><P>To generate the necessary files needed for deployment such as <FONT face="courier new,courier">xs-app.json</FONT> and <FONT face="courier new,courier">mta.yaml</FONT>, execute the below command.</P><P>&nbsp;</P><pre class="lia-code-sample language-bash"><code>npm run deploy-config</code></pre><P>&nbsp;</P><H2 id="toc-hId-231467261">4. Add a route to Destination for LLM API</H2><P>Now, add an API route to proxy API calls for LLM via the Destination created in the <FONT face="courier new,courier">xs-app.json</FONT> file.</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>{ "authenticationMethod": "route", "routes": [ { "source": "^/api/(.*)$", "target": "/inference/deployments/&lt;DEPLOYMENT_ID&gt;/$1", "authenticationType": "xsuaa", "destination": "GENERATIVE_AI_HUB", "csrfProtection": true }, ... ] }</code></pre><P>&nbsp;</P><H2 id="toc-hId-34953756">5. Call the LLM API</H2><P>Now, you can call the LLM API from your code. To demonstrate, I'm using the modern Browser <A href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_self" rel="nofollow noopener noreferrer"><FONT face="courier new,courier">fetch</FONT></A> to make a REST API call.</P><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// first get relative module path const sModulePrefix = this.getOwnerComponent().getManifestEntry("/sap.app/id"); // make an API call to an LLM const res = await fetch( `${sModulePrefix}/api/chat/completions?api-version=2024-02-01`, { method: "POST", headers: { "X-CSRF-Token": "&lt;X-CSRF-Token&gt;", // recommended for security. You can disable this for testing by setting `csrfProtection: false` in `xs-app.json` for `/api` route "Content-Type": "application/json", "AI-Resource-Group": "default", // mandatory }, credentials: "same-origin", body: JSON.stringify({ messages: [ { role: "system", content: "Write a TL;DR/summary of the user content in a paragraph.", }, { role: "user", content: sTxtInput, }, ], }), } )</code></pre><P>&nbsp;</P><H2 id="toc-hId--161559749">6. Deploy the SAPUI5 app</H2><P>Now, you can build the MTA app and deploy it by executing the following commands:</P><P>&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-bash"><code># Build an MTAR archive mbt build # Deploy the MTAR archive to logged in space npm run deploy</code></pre><P>&nbsp;</P><H2 id="toc-hId--358073254">6. Bonus: How to configure during development</H2><P>The above steps outlined the steps to deploy an SAPUI5 integrated with LLM capabilities. Every time you make a change, the app needs to get built and deployed again which is not a good developer experience. Here in the subsequent steps, you can follow to connect your dev/local setup with BTP Destination and XSUAA services to work seamlessly during development whether in SAP Business Application Studio or in VS Code.</P><H3 id="toc-hId--425504040">6a. Deploy the SAPUI5 app once</H3><P>You must deploy your SAPUI5 app at least once, if not done already to consume Destinations with <FONT face="courier new,courier">OAuth2ClientCredentials</FONT> work locally. This setup requires the credentials to BTP Destinations and XSUAA services locally to work properly.</P><P>&nbsp;</P><pre class="lia-code-sample language-bash"><code># Build an MTAR archive mbt build # Deploy the MTAR archive to logged in space npm run deploy</code></pre><P>&nbsp;</P><H3 id="toc-hId--622017545">6b. Create a default-env.json</H3><P>Now, create a default-env.json file with the following content and replace the placeholders with actual credentials.</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>{ "VCAP_SERVICES": { "destination": [ { "credentials": { "clientid": "&lt;CLIENT_ID&gt;", "clientsecret": "&lt;CLIENT_SECRET&gt;", "url": "&lt;AUTH_URL&gt;", "uri": "&lt;DESTINATION_URI&gt;" }, "label": "destination", "name": "&lt;INSTANCE_NAME&gt;", "tags": ["destination", "conn", "connsvc"] } ], "xsuaa": [ { "credentials": { "clientid": "&lt;CLIENT_ID&gt;", "clientsecret": "&lt;CLIENT_SECRET&gt;", "url": "&lt;AUTH_URL&gt;" }, "label": "xsuaa", "tags": ["xsuaa"] } ] } }</code></pre><P>&nbsp;</P><H3 id="toc-hId--893762419">6c. Install UI5 Middleware Plugin for Approuter</H3><P>Now, install the <A href="https://www.npmjs.com/package/ui5-middleware-approuter" target="_self" rel="nofollow noopener noreferrer"><FONT face="courier new,courier">ui5-middleware-approuter</FONT></A> plugin, which wraps the actual&nbsp;<A href="https://www.npmjs.com/package/@sap/approuter" target="_self" rel="nofollow noopener noreferrer"><FONT face="courier new,courier">@sap/approuter</FONT></A> package to make the destination and routing work locally.</P><P>&nbsp;</P><pre class="lia-code-sample language-bash"><code>npm install -D ui5-middleware-approuter</code></pre><P>&nbsp;</P><H3 id="toc-hId--1090275924">6d. Update UI5 configuration to use the middleware</H3><P>Now, update the <FONT face="courier new,courier">ui5.yaml</FONT> and <FONT face="courier new,courier">ui5-local.yaml</FONT> to add <FONT face="courier new,courier">ui5-middleware-approuter</FONT> as a custom middleware</P><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>... server: customerMiddleware: ... - name: ui5-middleware-approuter afterMiddleware: compression configuration: authenticationMethod: "route" xsappJson: "./xs-app.json" appendAuthRoute: true # trigger auth, inorder to connect to destination service</code></pre><P>&nbsp;</P><P>Now, start running your UI5 app server locally and calls to <FONT face="courier new,courier">/api</FONT> endpoint now would get proxied over to LLMs running in SAP AI Core&nbsp;<span class="lia-unicode-emoji" title=":grinning_face:">😀</span>.</P><P>&nbsp;</P><pre class="lia-code-sample language-bash"><code>npm start</code></pre><P>&nbsp;</P><P>This concludes the step-by-step approach to integrating LLMs with your SAPUI5 apps. In the subsequent blogs, I'll walk you through practical use-case implementations - A text Summarizer and an AI Chatbot Assistant in SAP Freestyle UI. Please note, that the techniques mentioned above work for SAP Fiori Elements apps too.</P><P>If you have specific questions on the approach or other interesting Generative AI topics to know, please feel free to comment below. I'm all ears! <span class="lia-unicode-emoji" title=":ear:">👂</span></P> 2024-06-20T14:33:50.187000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-2-building-a-text-summarizer/ba-p/13736465 Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer 2024-06-21T09:56:16.980000+02:00 merbinjanselm https://community.sap.com/t5/user/viewprofilepage/user-id/166309 <H6 id="toc-hId-1533910743">Blog Series</H6><TABLE border="1" width="100%"><TBODY><TR><TD width="100%" height="30px"><A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept</A></TD></TR><TR><TD width="100%" height="30px">Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer</TD></TR><TR><TD width="100%" height="30px"><A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-3-building-an-ai-chatbot/ba-p/13736501" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant</A></TD></TR></TBODY></TABLE><P>In the previous blog in the series -&nbsp;<A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept</A>, I outlined the steps and the approach to integrate SAPUI5 Freestyle &amp; Fiori Elements app with LLMs via SAP AI Core.</P><P>I'm structuring this blog as a short walkthrough to demonstrate building a simple AI-based Text Summarizer using the approach defined in <A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579" target="_self">the previous blog</A>.</P><P>You can find the <STRONG>reference implementation</STRONG> here - <A href="https://github.com/anselm94/blog-sap-fiori-genaihub-llm-integration" target="_self" rel="nofollow noopener noreferrer">GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration</A>&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="AI Text Summarizer - Screengrab" style="width: 960px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/125352iB4309A3C5D271FB2/image-size/large?v=v2&amp;px=999" role="button" title="ai-text-summariser.gif" alt="AI Text Summarizer - Screengrab" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">AI Text Summarizer - Screengrab</span></span></P><P>You can reuse the implementation to build similar use cases on the client side within SAPUI5 apps such as Product Description Generator, Job Description Generator, Customer Query Summariser, Campaign Idea/Title Generator etc.</P><P>The SAPUI5 application was generated in the SAP Build Code using a freestyle 'Basic' template. All the changes outlined in <A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579" target="_self">the previous blog</A> to integrate the LLM with the app, by exposing an <FONT face="courier new,courier">/api</FONT> route which proxies the responses to LLM. The LLM chosen here is GPT-3.5-Turbo for demonstration purposes. Please note, the recommendation from SAP is to try out <A href="https://help.sap.com/docs/sap-ai-core/sap-ai-core-service-guide/models-and-scenarios-in-generative-ai-hub?locale=en-US" target="_self" rel="noopener noreferrer">Opensource LLMs available from the SAP Generative AI Hub</A>&nbsp;such as LlaMa 3, Mixtral 8x7b etc., before going in for Partner provided LLMs such as Azure OpenAI GPT-4, Google Gemini etc. for&nbsp;</P><P>Building an AI-based Text Summarizer is straightforward, it takes in a long text as an input and creates a succinct summary as an output. Once a user clicks on the 'Summarize' button, a <FONT face="courier new,courier">POST</FONT> API call is fired against the LLM endpoint via <FONT face="courier new,courier">/api</FONT> endpoint and gets the summarised content back.</P><P>At the time of writing, I could not make token streaming work by setting stream: true, except that I received the entire response as a chunk. I haven't spent enough effort testing if&nbsp;<A href="https://www.npmjs.com/package/@sap/approuter" target="_self" rel="nofollow noopener noreferrer"><FONT face="courier new,courier">@sap/approuter</FONT></A> supports <A href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" target="_self" rel="nofollow noopener noreferrer">Server-Sent Events (SSE)</A>&nbsp;protocol, through which you get ChatGPT-styled token streaming implemented.</P><P>Also note that I've enabled <FONT face="courier new,courier">csrfProtection: true</FONT> for the <FONT face="courier new,courier">/api</FONT> endpoint to secure against CSRF attacks. This implies, that every <FONT face="courier new,courier">POST</FONT> call needs an <FONT face="courier new,courier">X-CSRF-Token</FONT> header, for which the token can be fetched at the beginning of the session and cached within the web app.</P><P>Building the Text Summarizer, though a simple use case provided me with a solid understanding of how to build a quick SAPUI5 app without writing code in the backend.</P><P><SPAN>The code is available under the open-source Apache license here -&nbsp;</SPAN><A href="https://github.com/anselm94/blog-sap-fiori-genaihub-llm-integration" target="_self" rel="nofollow noopener noreferrer">GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration</A><SPAN>&nbsp;. Please feel free to modify it according to your needs.</SPAN></P><P>If you have other interesting use cases, queries or feedback,&nbsp;please feel free to add a comment below. I'm all ears! <span class="lia-unicode-emoji" title=":ear:">👂</span></P> 2024-06-21T09:56:16.980000+02:00 https://community.sap.com/t5/blogs-about-sap-websites/applying-clean-code-principles-in-sap-ui5-development-reality-check/ba-p/13739199 Applying Clean Code Principles in SAP UI5 Development - Reality check 2024-06-21T17:10:05.346000+02:00 Marwah_Shwaiki https://community.sap.com/t5/user/viewprofilepage/user-id/7391 <P>Recently I came across the "<STRONG>Clean SAP UI5</STRONG>" book, which focuses on adopting clean code principles that focus on maintaining code that is easy to read, understand, and maintain. This is where the concept of "Clean Code" comes into play.</P><P>In this blog, I would like to highlight the principles of clean code in SAP UI5 along with illustrative examples, and at the end, I will share some thoughts based on practical experience in projects<span class="lia-unicode-emoji" title=":winking_face:">😉</span>.</P><P>&nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Marwah_Shwaiki_0-1718981352501.png" style="width: 538px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/127099i5D5E404FDB778402/image-dimensions/538x269?v=v2" width="538" height="269" role="button" title="Marwah_Shwaiki_0-1718981352501.png" alt="Marwah_Shwaiki_0-1718981352501.png" /></span></P><P>&nbsp;</P><H3 id="toc-hId-1146749173">So what is Clean Code?</H3><P>Clean Code is a set of practices that aim to produce code that is easy to read, simple to understand, and effortless to maintain. <STRONG>Robert C. Martin&nbsp;</STRONG>&nbsp;introduced these principles in his book "<STRONG>Clean Code: A Handbook of Agile Software Craftsmanship</STRONG>." These principles are universal and can be applied to any programming language or framework, including SAP UI5.</P><H3 id="toc-hId-950235668">Why Clean Code in UI5?</H3><P>SAP UI5 is a robust framework for building responsive, enterprise-level applications. Given its complexity and the collaborative nature of enterprise projects, following clean code principles becomes even more critical. Clean code in UI5 development can lead to:</P><UL><LI><STRONG>Better Collaboration:</STRONG>&nbsp;Easy-to-read code facilitates better collaboration among team members.</LI><LI><STRONG>Faster Onboarding:</STRONG>&nbsp;New developers can quickly understand and contribute to the codebase.</LI><LI><STRONG>Reduced Bugs:</STRONG>&nbsp;Clear and well-structured code reduces the likelihood of errors.</LI><LI><STRONG>Enhanced Maintainability:</STRONG>&nbsp;Easier to refactor and extend applications as requirements evolve.</LI></UL><H3 id="toc-hId-753722163">Key Principles of Clean Code in UI5</H3><OL><LI><P><STRONG>Meaningful Names</STRONG></P><UL><LI><STRONG>Be Descriptive:</STRONG>&nbsp;Use meaningful and descriptive names for variables, functions, and classes. Avoid abbreviations that are not universally understood.</LI><LI><STRONG>Consistent Naming Conventions:</STRONG>&nbsp;Follow consistent naming conventions throughout your codebase. For instance, use camelCase for variables and functions, and PascalCase for classes.</LI></UL></LI></OL><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// Bad Example var p; // what does p stand for? // Good Example var productPrice;</code></pre><P>&nbsp;</P><UL><LI><P><STRONG>Single Responsibility Principle</STRONG></P><UL><LI><STRONG>Function Focus:</STRONG>&nbsp;Each function should have a single responsibility or perform a specific task. This makes the code easier to understand and maintain.</LI></UL></LI><LI><P><STRONG>Avoid Magic Numbers and Strings</STRONG></P><UL><LI><STRONG>Use Constants:</STRONG>&nbsp;Replace magic numbers and strings with named constants to provide context and make the code self-explanatory.</LI></UL></LI></UL><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// Bad Example if (user.age &gt; 18) { /* logic for adults */ } // Good Example const LEGAL_ADULT_AGE = 18; if (user.age &gt; LEGAL_ADULT_AGE) { /* logic for adults */ } ​</code></pre><P>&nbsp;</P><UL><LI><P><STRONG>Comment Judiciously</STRONG></P><UL><LI><STRONG>Useful Comments:</STRONG>&nbsp;Write comments that explain why the code exists, not what it does. Well-written code should be self-explanatory, reducing the need for excessive comments.</LI></UL></LI></UL><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// Bad Example // This function adds two numbers function add(a, b) { return a + b; } // Good Example // Adjusts the user balance after a transaction function adjustUserBalance(user, amount) { user.balance += amount; } ​</code></pre><P>&nbsp;</P><UL><LI><P><STRONG>DRY Principle (Don't Repeat Yourself)</STRONG></P><UL><LI><STRONG>Reusability:</STRONG>&nbsp;Avoid duplicating code by creating reusable functions and components. This not only reduces redundancy but also centralizes logic for easier maintenance.</LI></UL></LI></UL><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// Bad Example function getUserFirstName(user) { return user.firstName; } function getUserLastName(user) { return user.lastName; } // Good Example function getUserProperty(user, property) { return user[property]; } ​</code></pre><P>&nbsp;</P><UL><LI><P><STRONG>Proper Error Handling</STRONG></P><UL><LI><STRONG>Graceful Degradation:</STRONG>&nbsp;Ensure that your code handles errors gracefully. Use try-catch blocks and provide meaningful error messages to help with debugging.</LI></UL></LI></UL><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// Bad Example var data = JSON.parse(input); // Good Example try { var data = JSON.parse(input); } catch (error) { console.error("Invalid JSON input: ", error.message); } ​</code></pre><P>&nbsp;</P><H3 id="toc-hId-557208658">Clean Code in Action: A UI5 Example</H3><P>Let's look at a simple SAP UI5 example to illustrate some of these principles. Assume we are building a function to retrieve and display product details.&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>// Bad Example function getProductDetails(id) { var oModel = new sap.ui.model.json.JSONModel(); oModel.loadData("/api/products/" + id, {}, false); if (oModel.getData().price &gt; 100) { alert("Price is over 100"); } var oView = sap.ui.getCore().byId("myView"); oView.setModel(oModel); } // Good Example const API_ENDPOINT = "/api/products/"; const HIGH_PRICE_THRESHOLD = 100; function getProductDetails(productId) { const oModel = new sap.ui.model.json.JSONModel(); const productUrl = `${API_ENDPOINT}${productId}`; oModel.loadData(productUrl, {}, false); displayHighPriceAlert(oModel.getData().price); setViewModel("myView", oModel); } function displayHighPriceAlert(price) { if (price &gt; HIGH_PRICE_THRESHOLD) { alert("Price is over " + HIGH_PRICE_THRESHOLD); } } function setViewModel(viewId, model) { const oView = sap.ui.getCore().byId(viewId); oView.setModel(model); }</code></pre><P>&nbsp;</P><H3 id="toc-hId-360695153">Reality Check Based on My Experience <span class="lia-unicode-emoji" title=":thinking_face:">🤔</span></H3><P>While the principles of clean code are ideal for creating maintainable and robust code, the reality of software development can often make it challenging to adhere strictly to these guidelines. Here are some common obstacles developers might face:</P><OL><LI><STRONG>Time Pressure:</STRONG>&nbsp;Tight deadlines and the need for quick delivery can force developers to prioritize speed over code quality. In such cases, writing clean code might take a back seat to deliver functional code quickly.</LI><LI><STRONG>Changing Requirements:</STRONG>&nbsp;Frequent changes in project requirements can lead to rushed updates and patches, resulting in code that is less clean and harder to maintain. This can cause technical debt that accumulate over time.</LI><LI><STRONG>Lack of Experience:</STRONG>&nbsp;Junior developers or those new to a specific framework like SAP UI5 might struggle to apply best practices and clean code principles consistently. Limited knowledge and experience can make it difficult to write clean, maintainable code.</LI></OL><P>From my perspective, it's essential to find a balance between ideal practices and practical constraints. and do so Here are a few tips:</P><UL><LI><STRONG>Incremental Improvement:</STRONG>&nbsp;Aim to improve the codebase incrementally. Start with the most critical areas and gradually apply clean code principles.</LI><LI><STRONG>Code Reviews:</STRONG>&nbsp;Conduct regular code reviews to share knowledge and identify areas for improvement. This helps maintain a high standard of code quality and provides learning opportunities.</LI><LI><STRONG>Peer Programming:</STRONG>&nbsp;Take the chance to learn from other perspectives by getting involved in peer programming with other developers&nbsp;</LI><LI><STRONG>Automated Tools:</STRONG>&nbsp;Use automated tools for code analysis and linting to enforce coding standards and catch common issues early some IDE's like VScode are offering this possibility by adding the relevant extensions.</LI><LI><STRONG>Documentation:</STRONG>&nbsp;Maintain good documentation to support code understanding and maintenance, especially when clean code practices cannot be fully adhered to due to external pressures.</LI></UL><H3 id="toc-hId-164181648">Final Word</H3><P>Applying clean code principles to SAP UI5 development is essential for building maintainable, scalable, and robust applications. However, it's important to recognize that real world constraints can make it challenging to follow these principles perfectly. By understanding these constraints and striving for continuous improvement, developers can still achieve a high standard of code quality that benefits both the team and the end product.</P><P>Happy coding!&nbsp; <span class="lia-unicode-emoji" title=":hugging_face:">🤗</span></P><P><!-- notionvc: 6e967c22-cc1c-4b90-8a9d-a80ddf681eeb --></P> 2024-06-21T17:10:05.346000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-3-building-an-ai-chatbot/ba-p/13736501 Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant 2024-06-24T16:15:29.392000+02:00 merbinjanselm https://community.sap.com/t5/user/viewprofilepage/user-id/166309 <H6 id="toc-hId-1533911514">Blog Series</H6><TABLE border="1" width="100%"><TBODY><TR><TD width="100%" height="30px"><A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 1 - Concept</A></TD></TR><TR><TD width="100%" height="30px"><A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-2-building-a-text-summarizer/ba-p/13736465" target="_self">Integrating AI with SAPUI5 Fiori Apps: Part 2 - Building a Text Summarizer</A></TD></TR><TR><TD width="100%" height="30px">Integrating AI with SAPUI5 Fiori Apps: Part 3 - Building an AI Chatbot Assistant</TD></TR></TBODY></TABLE><P>In the previous blogs in the series, I explained <A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-1-concept/ba-p/13734579" target="_self">the steps to integrate SAPUI5 Fiori Apps with LLM</A> via Destinations and discussed a case of <A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-2-building-a-text-summarizer/ba-p/13736465" target="_self">implementing a simple application - Text Summarizer</A>.</P><P>Like the previous blog, I'm structuring this as a short walkthrough of building a slightly advanced use case of building an AI Chatbot Assistant with a conversational UI. The implementation is lean, implemented only on the client side with the entire conversation history retained within the web client, and gets reset once reloaded.</P><P><SPAN>You can find the&nbsp;</SPAN><STRONG>reference implementation</STRONG><SPAN>&nbsp;here -&nbsp;</SPAN><A href="https://github.com/anselm94/blog-sap-fiori-genaihub-llm-integration" target="_self" rel="nofollow noopener noreferrer">GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration</A><SPAN>&nbsp;</SPAN></P><P><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Screengrab of AI Chatbot Assistant built in SAPUI5" style="width: 960px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/125712i67A4F17F66ADC92F/image-size/large?v=v2&amp;px=999" role="button" title="ai-assistant-chatbot.gif" alt="Screengrab of AI Chatbot Assistant built in SAPUI5" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Screengrab of AI Chatbot Assistant built in SAPUI5</span></span></SPAN></P><P>To build this, I reused the same implementation from <A href="https://community.sap.com/t5/technology-blogs-by-sap/integrating-ai-with-sapui5-fiori-apps-part-2-building-a-text-summarizer/ba-p/13736465" target="_self">the Text Summarizer blog</A> and added a new tab to switch between the two sections, hence reusing the logic for the most part.&nbsp;</P><P><SPAN>There are two major differences between the Chatbot Assistant compared to the Text Summarizer implementation:</SPAN></P><OL><LI><SPAN><SPAN>Since LLMs don't remember your previous conversations, all the messages through the entire conversation history should be sent with every LLM request, to maintain the context.</SPAN></SPAN></LI><LI>The Conversational UI is not available as an SAPUI5 control, I built this layout - containing altering User and AI messages with an Input control to enter your messages, using SAPUI5's <A href="https://ui5.sap.com/#/api/sap.m.FlexBox" target="_self" rel="noopener noreferrer"><FONT face="courier new,courier">FlexBox</FONT></A> control with a bit of CSS styling.</LI></OL><P><SPAN><SPAN>The code is available under the open-source Apache license here -<A href="https://github.com/anselm94/blog-sap-fiori-genaihub-llm-integration" target="_self" rel="nofollow noopener noreferrer">GitHub - anselm94/blog-sap-fiori-genaihub-llm-integration</A>&nbsp;. Please feel free to modify it according to your needs.</SPAN></SPAN></P><P><SPAN><SPAN><SPAN>If you have questions or feedback, please feel free to add a comment below. I'm all ears! <span class="lia-unicode-emoji" title=":ear:">👂</span></SPAN></SPAN></SPAN></P> 2024-06-24T16:15:29.392000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2406-update-includes-added-support-for-sap-s-4hana-cloud/ba-p/13743708 SAP Fiori tools 2406 update includes added support for SAP S/4HANA Cloud and more 2024-06-26T21:45:41.758000+02:00 tashley https://community.sap.com/t5/user/viewprofilepage/user-id/316392 <P>We are excited to announce expanded support for SAP S/4HANA Cloud within SAP Fiori tools. Developers can now seamlessly create and deploy applications to SAP S/4HANA Cloud directly from Visual Studio Code. While this was already possible using SAP Business Application Studio where SAML authentication is supported, I am happy that we can now offer an alternative to those who have a requirement to work in Visual Studio Code. &nbsp;</P><P>While a comprehensive OAuth solution is still in development, a provisional solution based on reentrance tickets is available to meet immediate development needs for SAP S/4HANA Cloud applications. You will need to manually enter the username and password to the system. To make it easier for you, we have enhanced the feature to also support adding a new connection via reentrance ticket. Your username and password are saved in your laptop (Keychain for Mac users and Credential Manager for Windows users), and you can simply select the system as the <A href="https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/99061814ead548808d539861fb27bafb.html" target="_blank" rel="noopener noreferrer">OData source during project generation</A>.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Adding connection info as an SAP System" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/129151iEE9695180787BEEA/image-size/medium?v=v2&amp;px=400" role="button" title="tashley_5-1719428964607.png" alt="Adding connection info as an SAP System" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Adding connection info as an SAP System</span></span></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Choose the SAP System when selecting the OData Source" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/129152iE8D056CA14C89748/image-size/large?v=v2&amp;px=999" role="button" title="tashley_6-1719428964616.png" alt="Choose the SAP System when selecting the OData Source" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Choose the SAP System when selecting the OData Source</span></span></P><P><STRONG>More Integrated Development Experience</STRONG></P><P>The integration between SAP Fiori tools and ABAP Development Tools (ADT) has been significantly enhanced, enabling developers to transition seamlessly from ABAP to SAP Fiori development environments as described in <A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-may-2024-release-adds-closer-integration-with-abap/ba-p/13720761" target="_blank">Ian’s blog</A>. This collaboration facilitates smoother development and brings all the SAP Fiori development tooling closer together. Future updates promise further innovations, including the upcoming ability to create UI services directly from SAP Fiori tools, reinforcing the commitment to a unified development experience across SAP ecosystems.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Launching SAP Fiori tools Application Generator from ADT" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/129150iC1CB09DBA369A0BC/image-size/medium?v=v2&amp;px=400" role="button" title="tashley_7-1719428964618.png" alt="Launching SAP Fiori tools Application Generator from ADT" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Launching SAP Fiori tools Application Generator from ADT</span></span></P><P><STRONG>Simplification and Continuous Enhancements</STRONG></P><P>In the realm of app development, the UI5 Language Assistant now streamlines navigation by offering direct links to controller files from XML views and fragments. Furthermore, the ability to automate the update of manifest schema on demand enhances agility in development workflows. We have also added UI5 linter integration enabling you to check compatibility of your project with <A href="https://community.sap.com/t5/technology-blogs-by-sap/adapt-your-app-to-sapui5-2-x-make-an-impact-by-joining-our-cei-project/ba-p/13722775" target="_blank">SAPUI5 version 2</A> so you can proactively check your app for upgrade. To start the UI5 linter check, click on the “Run UI5 Linter” tile in the Application Info page, or execute command “Fiori: Run UI5 Linter” from the command palette.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="“Run UI5 Linter” tile in the Application Info page" style="width: 262px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/129153iB75ABE21E129C4D4/image-size/medium?v=v2&amp;px=400" role="button" title="tashley_8-1719428964618.png" alt="“Run UI5 Linter” tile in the Application Info page" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">“Run UI5 Linter” tile in the Application Info page</span></span></P><P>On the user experience front, we introduced a toggle in the page editor so you can decide whether you prefer the more Visual Studio Code native experience where all properties are scrollable within a page (the default), or you prefer to see only the relevant properties for the selected element (disable the “Scrolling Properties” in Page Editor. We would love to hear your thoughts so we can further improve. &nbsp;</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Disable “Scrolling Properties” to see only the properties relevant to the selected element" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/129154i4690D5F9135063C3/image-size/large?v=v2&amp;px=999" role="button" title="tashley_9-1719428964632.png" alt="Disable “Scrolling Properties” to see only the properties relevant to the selected element" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Disable “Scrolling Properties” to see only the properties relevant to the selected element</span></span></P><P><STRONG>Open Source Journey Continues</STRONG></P><P>Since the start of our open source journey, we have published <A href="https://www.npmjs.com/search?q=%40sap-ux" target="_blank" rel="noopener nofollow noreferrer">60 packages</A> to <A href="https://github.com/SAP/open-ux-tools" target="_blank" rel="noopener nofollow noreferrer">open-ux-tools repo</A>. Most recently, SAP Fiori tools completed the open sourcing of key modules, such as the preview middleware, the OData client modules and some annotation-related APIs. I am especially excited about the preview middleware which paves the way to virtualize most of the files required for local testing which in turn will reduce and simplify the future project structure of the SAP Fiori apps. The open source initiative not only fosters transparency but also encourages collaboration and innovation within the SAP developer community. As an example, we are working to consolidate and simplify the tooling for Adaptation Project with the open source modules. Looking ahead, plans are underway to open source the SAP Fiori generator and the complete annotation API, further empowering developers and enhancing interoperability with other development tools.</P><P><STRONG>Outlook: Towards Future Innovations</STRONG></P><P>Looking towards the future, SAP Fiori tools remains dedicated to advancing developer productivity and creativity. The introduction of Gen AI capabilities through SAP Build Code marks a significant milestone, enabling developers to generate projects directly from business requirement documents. Building upon this foundation, upcoming enhancements will extend these capabilities to include project generation from screenshots and the ability to generate RAP (ABAP RESTful Application Programming Model) services, promising even greater automation and efficiency in application development.</P><P>In conclusion, the latest updates to SAP Fiori tools underscore SAP's commitment to empowering developers with robust tools and integrations, fostering innovation and efficiency in the development of SAP Fiori . As these capabilities continue to evolve, developers can expect further enhancements aimed at simplifying development workflows, enhancing integration, and driving forward the future of SAP Fiori app development. Stay tuned for more updates and join us in shaping the future of enterprise application development with SAP Fiori tools. Send us an email at <A href="mailto:sapfiorielements@sap.com" target="_blank" rel="noopener nofollow noreferrer">sapfiorielements@sap.com</A> or join us in the next monthly <A href="https://tinyurl.com/elementsroundtable" target="_blank" rel="noopener nofollow noreferrer">SAP Fiori roundtable</A>!</P><P>To see these innovations in person, I encourage you to join us in <A href="https://events.sap.com/noam/sap-fiori-innovation-day-chicago-2024/en/home" target="_blank" rel="noopener noreferrer">Chicago for our next SAP Fiori Innovation Day</A> on August 13, 2024.</P><P>&nbsp;</P><P>&nbsp;</P><P>&nbsp;</P> 2024-06-26T21:45:41.758000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/blast-off-ui5-web-components-2-0-is-now-live/ba-p/13744227 Blast Off! UI5 Web Components 2.0 is Now Live! 2024-07-04T12:15:37.669000+02:00 petya_begovska https://community.sap.com/t5/user/viewprofilepage/user-id/355562 <P><STRONG><SPAN>A Journey of Innovation and Growth</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>Since the release of UI5 Web Components 1.0 in 2021, our journey has been marked by unwavering innovation and a commitment to excellence. Over the past three years, we have listened to our community, refined our technologies, and expanded our capabilities. Today, we stand at a pivotal moment in our evolution with the launch of UI5 Web Components 2.0.</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="petya_begovska_0-1719475701963.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/129396i725BA1FBB55639AA/image-size/large?v=v2&amp;px=999" role="button" title="petya_begovska_0-1719475701963.png" alt="petya_begovska_0-1719475701963.png" /></span></P><P style=" text-align: center; "><EM>Picture 1: UI5 Web Components timeline</EM></P><P><STRONG><SPAN>The Evolution of UI5 Web Components</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN><SPAN>Our project has continuously evolved, embracing new web standards, eliminating legacy code, and integrating invaluable user feedback </SPAN><SPAN>from our community </SPAN><SPAN>to enhance our APIs. This journey culminated in April with the unveiling of the first Release Candidate for UI5 Web Components 2.0. </SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN><STRONG><SPAN>Announcing UI5 Web Components 2.0! </SPAN></STRONG><STRONG><SPAN><span class="lia-unicode-emoji" title=":party_popper:">🎉</span></SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>Today, we are thrilled to officially launch UI5 Web Components 2.0. This major release signifies our commitment to providing cutting-edge tools for web development. Version 2.0 not only enhances performance and reliability but also sets the stage for future innovations. </SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Key Benefits of UI5 Web Components 2.0</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>UI5 Web Components 2.0 introduces several </SPAN><SPAN>substantial </SPAN><SPAN>improvements:</SPAN><SPAN>&nbsp;</SPAN></P><UL><LI><STRONG><SPAN>Embracing New Standards:</SPAN></STRONG><SPAN> Future-proofing UI5 Web Components.</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><STRONG><SPAN>Consistent APIs:</SPAN></STRONG><SPAN> Streamlined and more intuitive, albeit with some breaking changes.</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><STRONG><SPAN>Elimination of Legacy Code:</SPAN></STRONG><SPAN> Reducing footprint and enhancing quality by minimizing bugs. </SPAN><SPAN>&nbsp;</SPAN></LI></UL><P><SPAN>Looking ahead, we will adhere to Semantic Versioning and release major updates more frequently to keep pace with technological advancements.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>What's New in UI5 Web Components 2.0?</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Revolutionary Popover API:</SPAN></STRONG><SPAN> Experience a standardized, consistent, and flexible mechanism for displaying popover content across all relevant components.&nbsp;</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>This API allows popups to display correctly above all other content, eliminating the need for the "static area" used in version 1.x. Previously, popups were placed in a static area within the body to ensure correct positioning despite various CSS rules. In version 2.x, the </SPAN><A href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover" target="_blank" rel="noopener nofollow noreferrer"><SPAN>popover API</SPAN></A><SPAN> simplifies the DOM structure by incorporating the popover directly within the component. This results in easier development, maintenance, and enhanced styling capabilities. It also allows components with popups to have physical children, supporting custom content and simplifying testing. The popover API is fully supported by all major browsers.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Form-Associated Custom Elements:</SPAN></STRONG><SPAN> Harness the power of native input behavior within HTML forms. This enhancement makes the </SPAN><I><SPAN>features/InputElementsFormSupport.js</SPAN></I><SPAN> feature redundant, simplifying form handling and enhancing the developer experience. Refer to the </SPAN><A href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals" target="_blank" rel="noopener nofollow noreferrer"><SPAN>ElementInternals API documentation</SPAN></A> <SPAN>for more details.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Seamless Time Zone Support:</SPAN></STRONG> <SPAN>Seamlessly manage time zones within your applications for a more personalized user experience. </SPAN><SPAN>The date and time components are adapted to the time zone feature, allowing the components to present dates in different time zones. The time zone identifiers format is the one used in the IANA time zone database.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>New Components:</SPAN></STRONG><SPAN> Expand your UI toolkit with new components such as <A href="https://sap.github.io/ui5-webcomponents/nightly/components/fiori/DynamicPage/" target="_self" rel="nofollow noopener noreferrer">Dynamic Page</A>, <A href="https://sap.github.io/ui5-webcomponents/nightly/components/Form/" target="_self" rel="nofollow noopener noreferrer">Form</A>, <A href="https://sap.github.io/ui5-webcomponents/nightly/components/Table/" target="_self" rel="nofollow noopener noreferrer">Table</A>, <A href="https://sap.github.io/ui5-webcomponents/nightly/components/Text/" target="_self" rel="nofollow noopener noreferrer">Text</A>, <A href="https://sap.github.io/ui5-webcomponents/nightly/components/Tokenizer/" target="_self" rel="nofollow noopener noreferrer">Tokenizer</A>,</SPAN><SPAN>&nbsp;</SPAN><SPAN><A href="https://sap.github.io/ui5-webcomponents/nightly/components/ai/Button/" target="_self" rel="nofollow noopener noreferrer">AI Button</A>,&nbsp;<A href="https://sap.github.io/ui5-webcomponents/nightly/components/ai/PromptInput/" target="_self" rel="nofollow noopener noreferrer">AI Prompt Input</A>, <A href="https://sap.github.io/ui5-webcomponents/nightly/components/OptionCustom/" target="_self" rel="nofollow noopener noreferrer">Custom Option</A> and <A href="https://sap.github.io/ui5-webcomponents/nightly/components/SuggestionItemCustom/" target="_self" rel="nofollow noopener noreferrer">Custom Suggestion Item</A>.</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="petya_begovska_0-1719784577000.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/130528i60C8EF9EC7090D35/image-size/large?v=v2&amp;px=999" role="button" title="petya_begovska_0-1719784577000.png" alt="petya_begovska_0-1719784577000.png" /></span></P><P style=" text-align: center; "><EM>Picture 2: Preview of UI5 Web Components 2.0 new components</EM></P><P><STRONG><SPAN>Enhanced Existing Components:</SPAN></STRONG><SPAN> Benefit from improvements in List Drag and Drop, Tree Drag and Drop, Tab Container Drag and Drop, and a revamped Notifications Experience.</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="petya_begovska_1-1719784798665.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/130532i14935EC60B48AF15/image-size/large?v=v2&amp;px=999" role="button" title="petya_begovska_1-1719784798665.png" alt="petya_begovska_1-1719784798665.png" /></span></P><P style=" text-align: center; "><EM>Picture 3: Preview of UI5 Web Components 2.0 new features</EM></P><P><STRONG><SPAN>Revamped Documentation Site:</SPAN></STRONG><SPAN> Explore our <A href="https://sap.github.io/ui5-webcomponents/" target="_self" rel="nofollow noopener noreferrer">new documentation site </A>featuring a live editor, playground, dark mode, and an intuitive icons view.</SPAN><SPAN>&nbsp;</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="petya_begovska_0-1719782642639.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/130521iA371456690659D94/image-size/large?v=v2&amp;px=999" role="button" title="petya_begovska_0-1719782642639.png" alt="petya_begovska_0-1719782642639.png" /></span></P><P style=" text-align: center; "><EM>Picture 4: UI5 Web Components 2.0 new website</EM></P><P><STRONG><SPAN>New logo:</SPAN></STRONG><SPAN> W</SPAN><SPAN>e are excited to introduce our new logo and branding, reflecting the modern and dynamic nature of our project. Our new design incorporates defining elements of the feather and the flame. The feather symbolizes being lightweight, while the flame forms a connection to the phoenix, embodying the spirit of rebirth and continuous improvement.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Explore the Full-Screen Playground:</SPAN></STRONG><SPAN>&nbsp;</SPAN><SPAN>Our new full-screen playground offers a range of features designed to enhance your development experience:</SPAN><SPAN>&nbsp;</SPAN></P><UL><LI><SPAN>Live code editing</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><SPAN>TypeScript support</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><SPAN>Code completion for components in HTML</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><SPAN>Sample download</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><SPAN>Easy sharing</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><SPAN>Theming options</SPAN><SPAN>&nbsp;</SPAN></LI></UL><UL><LI><SPAN>Predefined examples</SPAN><SPAN>&nbsp;</SPAN></LI></UL><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="petya_begovska_1-1719782921843.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/130522i33F4ED7B28823DB0/image-size/large?v=v2&amp;px=999" role="button" title="petya_begovska_1-1719782921843.png" alt="petya_begovska_1-1719782921843.png" /></span></P><P style=" text-align: center; "><EM>Picture 5: UI5 Web Components 2.0 full-screen playground</EM></P><P><STRONG><SPAN>Adoption and Breaking Changes</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>UI5 Web Components 2.0 is a major version and introduces breaking changes that may require updates to your code. Our comprehensive </SPAN><A href="https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2/" target="_blank" rel="noopener nofollow noreferrer"><SPAN>Migration Guide</SPAN></A> <SPAN>will assist you in making a smooth transition from UI5 Web Components v1.x to v2.0. Note: The majority of the breaking changes can be achieved with find and replace.</SPAN></P><P><STRONG>Notable Breaking Changes</STRONG>:</P><UL><LI><P>The Belize theme has been removed and is no longer available.</P></LI><LI><P>CSP (Content Security Policy) will be ensured via the<SPAN>&nbsp;</SPAN><A href="https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets" target="_blank" rel="noopener noreferrer nofollow">adoptedStyleSheets</A><SPAN>&nbsp;</SPAN>only, which are CSP-compliant by design.</P></LI><LI><P>The static area has been removed since the browser now ensures the correct positioning of popups thanks to the popover API that is fully adopted by the UI5 Web Components.</P></LI><LI><P>The Badge component (ui5-badge) has been renamed to Tag (ui5-tag).</P></LI><LI><P>The old Table (ui5-table) has been moved to<SPAN>&nbsp;</SPAN>@ui5/webcomponents-compat; new Table is available with better API and accessibility.</P></LI><LI><P>Public methods for opening popovers are replaced with the<SPAN>&nbsp;</SPAN>open<SPAN>&nbsp;</SPAN>property for declarative APIs.</P></LI><LI><P>Components like Label, Text, Link, and Title now wrap by default (wrappingType="Normal" by default, wrappingType="None" optionally).</P></LI><LI><P>SelectMenu and SelectMenuOption components have been removed; standard options with the popover API make them obsolete.</P></LI><LI><P>Renaming of properties, events, and enumeration values.</P></LI><LI><P>Removed APIs without alternatives:</P><UL><LI><P>Progress Indicator (ui5-progress-indicator):<SPAN>&nbsp;</SPAN>Disabled<SPAN>&nbsp;</SPAN>property removed.</P></LI><LI><P>Select Option (ui5-option):<SPAN>&nbsp;</SPAN>Disabled<SPAN>&nbsp;</SPAN>property removed for UX and accessibility alignment.</P></LI><LI><P>Token (ui5-token):<SPAN>&nbsp;</SPAN>Readonly<SPAN>&nbsp;</SPAN>property removed; logic now within the Tokenizer.</P></LI><LI><P>The<SPAN>&nbsp;</SPAN>Device#isIE<SPAN>&nbsp;</SPAN>method has been removed and is no longer available - the IE browser is not supported anymore.</P></LI><LI><P>Notification List Group (ui5-li-notification-group): The properties<SPAN>&nbsp;</SPAN>showClose,<SPAN>&nbsp;</SPAN>showCounter,<SPAN>&nbsp;</SPAN>priority, the event<SPAN>&nbsp;</SPAN>close<SPAN>&nbsp;</SPAN>and the slot<SPAN>&nbsp;</SPAN>actions<SPAN>&nbsp;</SPAN>are removed due to the new better notification list design concept.</P></LI></UL></LI></UL><P><STRONG><SPAN>Ongoing Support for Version 1.x</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>We will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Get Help and Engage with the Community</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>Encountering issues? Reach out for support or report bugs on our GitHub project: </SPAN><A href="https://github.com/SAP/ui5-webcomponents/issues/new/choose" target="_blank" rel="noopener nofollow noreferrer"><SPAN>Submit a bug or ask a question here</SPAN></A><SPAN>.</SPAN><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Call to Action</SPAN></STRONG><SPAN>&nbsp;</SPAN></P><P><SPAN>UI5 Web Components 2.0 is a testament to our dedication to innovation, quality, and community engagement. We are particularly excited about the groundbreaking features such as the Popover API, Form-Associated Custom Elements, and seamless time zone support.</SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>We invite you to preview the new version and migrate to UI5 Web Components 2.0 to fully leverage these advancements.&nbsp;Together, we are entering a new era of web development, and the possibilities are endless. Thank you for being part of this exciting journey with us! <span class="lia-unicode-emoji" title=":raising_hands:">🙌</span></SPAN><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><SPAN>&nbsp;</SPAN></P> 2024-07-04T12:15:37.669000+02:00 https://community.sap.com/t5/application-development-blog-posts/sap-developer-news-july-4th-2024/ba-p/13751598 SAP Developer News, July 4th, 2024 2024-07-04T21:10:00.117000+02:00 thomas_jung https://community.sap.com/t5/user/viewprofilepage/user-id/139 <P><div class="video-embed-center video-embed"><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fr5Uwk5_jnQg%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dr5Uwk5_jnQg&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fr5Uwk5_jnQg%2Fhqdefault.jpg&amp;key=b0d40caa4f094c68be7c29880b16f56e&amp;type=text%2Fhtml&amp;schema=youtube" width="400" height="225" scrolling="no" title="BTP Resource Consumption Monitor, CEIs, July Dev Challenge, Build Governance | SAP Developer News" frameborder="0" allow="autoplay; fullscreen; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div></P><P><STRONG>Podcast Version: <A href="https://podcast.opensap.info/sap-developers/2024/07/04/sap-developer-news-july-4th-2024/" target="_blank" rel="nofollow noopener noreferrer">https://podcast.opensap.info/sap-developers/2024/07/04/sap-developer-news-july-4th-2024/</A></STRONG></P><P><STRONG>SAP Samples on GitHub and the BTP Resource Consumption Monitor repo</STRONG></P><UL><LI>SAP Samples organization on GitHub: <A href="https://github.com/SAP-samples" target="_blank" rel="nofollow noopener noreferrer">https://github.com/SAP-samples</A></LI><LI>BTP FinOps: Keeping Track of your Credits: <A href="https://community.sap.com/t5/technology-blogs-by-sap/btp-finops-keeping-track-of-your-credits/ba-p/13737793" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/btp-finops-keeping-track-of-your-credits/ba-p/13737793</A></LI><LI>BTP Resource Consumption Monitor repository: <A href="https://github.com/SAP-samples/btp-resource-consumption-monitor" target="_blank" rel="nofollow noopener noreferrer">https://github.com/SAP-samples/btp-resource-consumption-monitor</A></LI></UL><P><STRONG>Current Customer Engagement Initiatives</STRONG></P><UL><LI>SAPUI5 2.x: <A href="https://community.sap.com/t5/technology-blogs-by-sap/adapt-your-app-to-sapui5-2-x-make-an-impact-by-joining-our-cei-project/ba-p/13722775" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/adapt-your-app-to-sapui5-2-x-make-an-impact-by-joining-our-cei-project/ba-p/13722775</A></LI><LI>SAP BTP: <A href="https://influence.sap.com/sap/ino/#campaign/3724" target="_blank" rel="noopener noreferrer">https://influence.sap.com/sap/ino/#campaign/3724</A></LI></UL><P><STRONG>July Developer Challenge “Reverse APIs”</STRONG></P><UL><LI>Main July challenge blog post <A href="https://community.sap.com/t5/application-development-blog-posts/2024-07-quot-reverse-apis-quot-sap-developer-challenge/ba-p/13749653" target="_blank">https://community.sap.com/t5/application-development-blog-posts/2024-07-quot-reverse-apis-quot-sap-developer-challenge/ba-p/13749653</A></LI><LI>Task 0 Server and service provisioning <A href="https://community.sap.com/t5/application-development-discussions/2024-07-developer-challenge-task-0-server-and-service-provisioning/m-p/13749996" target="_blank">https://community.sap.com/t5/application-development-discussions/2024-07-developer-challenge-task-0-server-and-service-provisioning/m-p/13749996</A></LI><LI>Previous (June) challenge final week discussion <A href="https://community.sap.com/t5/application-development-discussions/submissions-for-quot-sap-hana-cloud-multi-model-quot-developer-challenge/m-p/13744012" target="_blank">https://community.sap.com/t5/application-development-discussions/submissions-for-quot-sap-hana-cloud-multi-model-quot-developer-challenge/m-p/13744012</A></LI></UL><P><STRONG>SAP Build Governance How-To Guides Published</STRONG></P><UL><LI>SAP Build Governance Resource Center: <A href="https://forms.office.com/Pages/ResponsePage.aspx?id=bGf3QlX0PEKC9twtmXka9wZKKG5THS9PkxADEwX46a9UQUk5N0dKVjNGWU5FTlFPVDRTRDBLTEMwWC4u" target="_blank" rel="nofollow noopener noreferrer">https://forms.office.com/Pages/ResponsePage.aspx?id=bGf3QlX0PEKC9twtmXka9wZKKG5THS9PkxADEwX46a9UQUk5N0dKVjNGWU5FTlFPVDRTRDBLTEMwWC4u</A></LI><LI><A href="https://community.sap.com/t5/sap-builders-blog-posts/don-t-want-to-start-from-scratch-with-it-governance-try-the-sap-build/ba-p/13729865" target="_blank">Try the SAP Build Governance Resource Center</A> <A href="https://community.sap.com/t5/sap-builders-blog-posts/don-t-want-to-start-from-scratch-with-it-governance-try-the-sap-build/ba-p/13729865?source=social-Global-BTP-spr-13843592490-LINKEDIN&amp;campaigncode=CRM-YA23-SMS-1941773&amp;PostID=13843592490&amp;CommunityuserID=62e8dc35b68c8c76b75d2e14&amp;ConsumerpostID=6671aab70601bb5c4468b9af&amp;ParentAssetID=ADVOCACY_205_667175d836a1d73761df15f8&amp;Region=NA,EMEA,Greater%20China,APJ,LAC" target="_blank">https://community.sap.com/t5/sap-builders-blog-posts/don-t-want-to-start-from-scratch-with-it-governance-try-the-sap-build/ba-p/13729865</A></LI></UL><P><STRONG>The Open Documentation Initiative &amp; the revamped SAP Help Portal comments feature</STRONG></P><UL><LI>The Grand Prix of Developer Feedback&nbsp; (blog post) <A href="https://community.sap.com/t5/open-documentation-initiative-blog-posts/the-grand-prix-of-developer-feedback/ba-p/13734863" target="_blank">https://community.sap.com/t5/open-documentation-initiative-blog-posts/the-grand-prix-of-developer-feedback/ba-p/13734863</A></LI></UL><P>==============================================================</P><H3 id="toc-hId-1148361730">CHAPTER TITLES</H3><P>0:00 Intro</P><P>0:10 SAP Samples on GitHub and the BTP Resource Consumption Monitor repo</P><P>1:11 Current Customer Engagement Initiatives</P><P>2:14 July Developer Challenge “Reverse APIs”</P><P>3:43 SAP Build Governance How-To Guides Published</P><P>5:11 The Open Documentation Initiative &amp; the revamped SAP Help Portal comments feature</P><H3 id="toc-hId-951848225">TRANSCRIPT</H3><P><STRONG>[Antonio]</STRONG> Hola SAP developers. I don't know about you, but I've learned a lot from the sample code that's available in the SAP Samples organization on GitHub. Whatever you're interested in, be it CAP, RAP, AI, connectivity with event brokers, it is likely that you will find a good sample in the reports available there. For example, the latest cool report that I've popped into is the BTP Resource Consumption Monitor by my colleague Willem, who recently also publish a blog post about what the tool can do for you. In essence, keep track of your CPEA, BTPEA credits. The tool has a bunch of things, billing verification, cost breakdown, credit expenditure, monetary analytics, even suggestions for account optimization and cost reduction strategies. And all the code and details to get it running are there for you to explore. Make sure to check it out. I'm including the links in the description below.</P><P><STRONG>[Nico]</STRONG> Hi everyone and welcome to the SAP Developer News. I'm on an early morning walk with the little one, who for some reason seems to be sleeping better outdoors, and I thought I would use the time wisely and record the developer news. So, we would like to point your attention to two customer engagement initiatives that are currently running. The first one is about SAPUI5 2.0. So, the team is looking for feedback and is willing to provide some more insights and help on how to migrate from SAPUI5 version 1 to 2. The second initiative is about SAP BTP and is specifically for SAP BTP admins and solution architects. Again, the team is looking for feedback and is willing to provide some more insights and help with the overall goal of improving the user experience on the platform. These initiatives are really your chance to shape the future of those two products and I very much invite you to participate. and I see you soon, bye.</P><P><STRONG>[DJ]</STRONG> The June Developer Challenge run by my good friend and colleague Vitaly is coming to a close. It's not too late to finish off the tasks though, but July is here and that means we have a new Developer Challenge for you. We're calling it Reverse APIs because essentially It's a reflection on last August's developer challenge on APIs. But this time, it's you that have to create the APIs. API endpoints in services that will be tested by an orthophysic testing mech. Sounds scary? Not at all, because you'll have the power and magic of CAP at your disposal. The whole idea is to learn, to explore, to discover all the features that CAP has to offer when building services and API endpoints. There are ten tasks in this challenge, reflecting ten different API endpoints that you're going to create over three different services over the course of this month, plus a little warm-up task, Task Zero, that is an easy way to start off, and that Task Zero has already been published. head over to the blog post which explains everything and links you to this first task to get going. See you, all right.</P><P><STRONG>[Rekha]</STRONG> Hello, everybody. I hope you're all having a good time. Are you an IT administrator or IT professional looking to streamline and scale your SAP build fusion development efforts? Then it is crucial to have a robust governance framework in place. Effective governance ensures that your organization's software projects are delivered quickly, securely, efficiently, and in alignment with your organizational goals and compliance requirements. SAP has now launched SAP Build Governance Resource Center website. Inside this web page, you will find a package of valuable assets like digital center of excellence toolkit, use case body tool, how to guide for use cases ideation, and fusion development project lifecycle management, guided experience step-by-step tutorial, FAQs, presentation on SAP Build Governance, essential quick links, and SAP Help documentation links for best practices. By consolidating all the resources I just mentioned into a single and easy to navigate platform, SAP Build Governance Resource Center empowers you to operate and scale your Fusion development programs with confidence. I hope you found this update exciting. Thank you.</P><P><STRONG>[DJ]</STRONG> A couple of years ago, we launched the Open Documentation Initiative to allow, to encourage you to collaborate with us on documentation, either by providing feedback or contributing fixes and improvements to the documentation via the universal global content collaboration mechanism and platform that is GitHub. Recently, you might have noticed that there's also been some revamping of an existing feature directly on the SAP Help Portal. That's the comments feature which some may find more straightforward to use to contribute comments while perusing the documentation. We want to know what you prefer. Jens Hailey has written a blog post all about this new revamp and also describing what we want to achieve by asking you to help us find out the difference between the two approaches. Read all about it in Jens's blog post. The link is in the description.</P> 2024-07-04T21:10:00.117000+02:00 https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-fiori-development-newsletter-july-2024-issue-29/ba-p/13762548 SAP Fiori development newsletter July 2024 (issue #29) 2024-07-16T22:16:32.946000+02:00 PeterSpielvogel https://community.sap.com/t5/user/viewprofilepage/user-id/543 <P>This is our first issue since SAP Sapphire, so we’ll feature some of the innovations announced at that event. AI was everywhere, with the goal of making users more productive in solutions across SAP’s portfolio. SAP Build Code is great example of a product that integrates AI to make application development faster and easier.<BR /><BR />We are hosting our second <A href="https://events.sap.com/noam/sap-fiori-innovation-day-chicago-2024/en/home" target="_blank" rel="noopener noreferrer">SAP Fiori Innovation Day in Chicago</A> on August 13. Please join us to see the latest innovations in our portfolio, including how AI makes building SAP Fiori apps easier and a sneak preview of some planned functionality to make business users more efficient when using SAP Fiori apps.<BR /><BR />If you want to meet with fellow developers and the SAP engineers who build our professional development tools, I encourage you to join our monthly SAP Fiori elements and SAP Fiori tools roundtable group.<BR />Our next meeting is August 14, 2024.<BR />Learn about the group at&nbsp;<A href="https://blogs.sap.com/2021/07/31/peer-to-peer-learning-at-the-sap-fiori-elements-and-sap-fiori-tools-roundtable/" target="_blank" rel="noopener noreferrer">https://blogs.sap.com/2021/07/31/peer-to-peer-learning-at-the-sap-fiori-elements-and-sap-fiori-tools-roundtable/</A><BR />You can also&nbsp;email me if you would like an invitation.<BR /><BR /><SPAN>If you prefer to receive this in your inbox, please</SPAN><SPAN>&nbsp;</SPAN><A href="https://smc-link.s4hana.ondemand.com/eu/data-buffer/sap/public/cuan/link/100/61CD12409C521912E4D433F469F6484FC168B35A?_V_=2&amp;_K11_=36DD87CF4363E704D7AB90D1113275E1D8361F50&amp;_L54AD1F204_=c2NlbmFyaW89TUxDUEcmdGVuYW50PW15MzAwNzIzLnM0aGFuYS5vbmRlbWFuZC5jb20mdGFyZ2V0PWh0dHBzOi8vd3d3LnNhcC5jb20vY21wL25sL3NhcC1maW9yaS1kZXZlbG9wbWVudC1uZXdzbGV0dGVyL2luZGV4Lmh0bWw%2Fc2FwLW91dGJvdW5kLWlkPTYxQ0QxMjQwOUM1MjE5MTJFNEQ0MzNGNDY5RjY0ODRGQzE2OEIzNUEmc21jX2NhbXBhaWduX2lkPTAwMDAwMzk5OTEmc291cmNlPWVtYWlsLXNtYw&amp;_K13_=558&amp;_K14_=ee33bb3cf9d084c97c92ed4c387b9cd510678e34db39e05b4e6d9fbb884f20fe" target="_blank" rel="noopener nofollow noreferrer">subscribe to the SAP Fiori development newsletter.</A></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="SAP_Fiori_Dev_Newsletter_29.png" style="width: 624px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/137336iFF0AFE979389EE87/image-size/large?v=v2&amp;px=999" role="button" title="SAP_Fiori_Dev_Newsletter_29.png" alt="SAP_Fiori_Dev_Newsletter_29.png" /></span></P><H2 id="toc-hId-1020232168">Development News</H2><P><STRONG>Sapphire 2024 summary from a user experience perspective </STRONG></P><P>Every session I attended included some discussion on how artificial intelligence will make the product experience better. This summary focuses on how to implement the SAP Fiori user experience as customers transition to SAP S/4HANA Cloud.</P><P><A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-sapphire-2024-highlights-on-ux-application-development-and-ai/ba-p/13723602" target="_blank">https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-sapphire-2024-highlights-on-ux-application-development-and-ai/ba-p/13723602</A></P><P>&nbsp;</P><P><STRONG>What’s new for application development, automation and integration on SAP BTP</STRONG></P><P>SAP Build Code and BTP were everywhere at Sapphire, especially in the context of building applications that follow clean core principles.</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-sapphire-2024-what-s-new-for-application-development-automation-and/ba-p/13736396" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/sap-sapphire-2024-what-s-new-for-application-development-automation-and/ba-p/13736396</A></P><P>&nbsp;</P><P><STRONG>Streamlining data entry: exploring the new 'paste' feature in SAP Fiori elements V4 tables </STRONG></P><P>The recent release of SAP Fiori elements for OData V4 introduces the ability to paste data into tables, much like you would in Microsoft Excel. This enhancement significantly elevates the user experience for Fiori elements V4 application users.</P><P><A href="https://community.sap.com/t5/application-development-blog-posts/streamlining-data-entry-exploring-the-new-paste-feature-in-fiori-elements/ba-p/13710973" target="_blank">https://community.sap.com/t5/application-development-blog-posts/streamlining-data-entry-exploring-the-new-paste-feature-in-fiori-elements/ba-p/13710973</A></P><P>&nbsp;</P><P><STRONG>SAP Fiori tools adds tighter integration with ABAP Development Tools </STRONG></P><P>Developers can now have a more integrated experience when working with ADT at the backend and SAP Fiori tools for front-end development You don’t need to manually switch between the tooling environments and remember which system and entity they wish to use. Now, with one click in ADT, you can seamlessly switch from ABAP to SAP Fiori development.</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-may-2024-release-adds-closer-integration-with-abap/ba-p/13720761" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-may-2024-release-adds-closer-integration-with-abap/ba-p/13720761</A></P><P>&nbsp;</P><P><STRONG>SAP Fiori tools 2406 includes added support for SAP S/4HANA Cloud and more </STRONG></P><P>Developers can now seamlessly create and deploy applications to SAP S/4HANA Cloud directly from Visual Studio Code.</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2406-update-includes-added-support-for-sap-s-4hana-cloud/ba-p/13743708" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2406-update-includes-added-support-for-sap-s-4hana-cloud/ba-p/13743708</A></P><P>&nbsp;</P><P><STRONG>Copy and paste like a pro with SAPUI5 tables </STRONG></P><P>Maximizing the efficiency of business users through advanced Copy &amp; Paste: SAPUI5 1.124 improves copy/paste operations in tables, letting business users work in a more natural way with improved productivity.</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/sapui5-tables-maximizing-efficiency-through-advanced-copy-amp-paste/ba-p/13723158" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/sapui5-tables-maximizing-efficiency-through-advanced-copy-amp-paste/ba-p/13723158</A></P><P>&nbsp;</P><P><STRONG>Create an app variant to introduce functionality without changing the original app</STRONG></P><P>You can extend SAPUI5 applications in SAP S/4HANA Cloud Public Edition and SAP BTP, ABAP Environment with an application variant, without changing the original application.</P><P><A href="https://help.sap.com/docs/bas/developing-sap-fiori-app-in-sap-business-application-studio/extending-sap-fiori-application-for-s-4hana-cloud" target="_blank" rel="noopener noreferrer">https://help.sap.com/docs/bas/developing-sap-fiori-app-in-sap-business-application-studio/extending-sap-fiori-application-for-s-4hana-cloud</A></P><P>&nbsp;</P><P><STRONG>Announcing UI5 Web Components 2.0</STRONG></P><P>UI5 Web Components 2.0 enhances performance, reliability, and sets the stage for future innovations for web development.</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/blast-off-ui5-web-components-2-0-is-now-live/ba-p/13744227" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/blast-off-ui5-web-components-2-0-is-now-live/ba-p/13744227</A></P><P>&nbsp;</P><P><STRONG>Reality check on applying clean code principles in SAPUI5 development</STRONG></P><P>Applying clean code principles to SAPUI5 development is essential for building maintainable, scalable, and robust applications. Real-world constraints can make it challenging to follow these principles perfectly. By understanding the constraints and striving for continuous improvement, developers can still achieve a high standard of code quality.</P><P><A href="https://community.sap.com/t5/blogs-about-sap-websites/applying-clean-code-principles-in-sap-ui5-development-reality-check/ba-p/13739199" target="_blank">https://community.sap.com/t5/blogs-about-sap-websites/applying-clean-code-principles-in-sap-ui5-development-reality-check/ba-p/13739199</A></P><P>&nbsp;</P><P><STRONG>Product updates for SAP Business Application Studio – June edition </STRONG></P><P>As we cross the halfway mark of the year, it’s the perfect time to reflect on our progress and introduce the exciting new features we've added to BAS over the past few months.</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-business-application-studio-june-edition/ba-p/13721825" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-business-application-studio-june-edition/ba-p/13721825</A></P><H2 id="toc-hId-823718663">Events</H2><P><STRONG>SAP Fiori Innovation Day in Chicago – August 13</STRONG></P><P>After our successful event in Dublin. Ireland, we are hosting another SAP Fiori Innovation Day in Chicago. By attending this event, you will learn:</P><UL><LI>SAP’s UX strategy and how it is evolving</LI><LI>Recent UX innovations that fulfill the promise of the intelligent, collaborative enterprise</LI><LI>Making SAP Fiori work for you – finding the apps you need and adapting them to your business requirements</LI><LI>Building apps using the latest tools and technologies – the same ones SAP uses to build apps for SAP S/4HANA (including optional hands-on workshop)</LI><LI>How to move your organization forward, including how to take advantage of AI for developing applications</LI></UL><P>To bring you this content at no charge, this event is sponsored by Mindset Consulting, Convergent IS, and Sovanta.<BR /><BR />Register today:&nbsp;<A href="%20https:/events.sap.com/noam/sap-fiori-innovation-day-chicago-2024/en/home" target="_blank" rel="noopener nofollow noreferrer">https://events.sap.com/noam/sap-fiori-innovation-day-chicago-2024/en/home</A></P><P><STRONG>Watch the recordings from re&gt;≡CAP 2024 and UI5con 2024</STRONG></P><P>Missed our community conferences around our programming frameworks CAP and SAPUI5? No worries! All sessions were recorded and are now available online.<BR /><A href="https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Frecap-conf.dev%2F&amp;data=05%7C02%7Cpeter.spielvogel%40sap.com%7Cb9536d7982b2422bd92f08dca12085aa%7C42f7676cf455423c82f6dc2d99791af7%7C0%7C0%7C638562408300071351%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&amp;sdata=zwoseHl87%2FmJ%2BcI3py%2B0dnriNVxzF1ncFURXOqhIMMs%3D&amp;reserved=0" target="_blank" rel="noopener nofollow noreferrer">Go to re&gt;≡CAP event page to access recordings</A><BR /><A href="https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fopenui5.org%2Fui5con%2Fgermany2024%2F&amp;data=05%7C02%7Cpeter.spielvogel%40sap.com%7Cb9536d7982b2422bd92f08dca12085aa%7C42f7676cf455423c82f6dc2d99791af7%7C0%7C0%7C638562408300089933%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&amp;sdata=jjRnasoLdc2BbVvLy%2FhLy%2Fw07%2FPQm%2FFAKwlVDJX19i8%3D&amp;reserved=0" target="_blank" rel="noopener nofollow noreferrer">Go to UI5con event page to access recordings</A></P><H2 id="toc-hId-627205158">Tutorials</H2><H3 id="toc-hId-559774372"><STRONG>openSAP content has moved to the learning.sap.com platform </STRONG></H3><P><STRONG>Developing and Extending SAP Fiori Elements Apps </STRONG></P><P><A href="https://learning.sap.com/courses/developing-and-extending-sap-fiori-elements-apps" target="_blank" rel="noopener noreferrer">https://learning.sap.com/courses/developing-and-extending-sap-fiori-elements-apps</A></P><P><STRONG>Developing an SAP Fiori Elements App Based on a CAP OData V4 Service </STRONG></P><P><A href="https://learning.sap.com/learning-journeys/developing-an-sap-fiori-elements-app-based-on-a-cap-odata-v4-service" target="_blank" rel="noopener noreferrer">https://learning.sap.com/learning-journeys/developing-an-sap-fiori-elements-app-based-on-a-cap-odata-v4-service</A></P><P><STRONG>Adapting the UI in SAP S/4HANA Cloud Using SAP Screen Personas </STRONG></P><P><A href="https://learning.sap.com/courses/adapting-the-ui-in-sap-s-4hana-cloud-using-sap-screen-personas" target="_blank" rel="noopener noreferrer">https://learning.sap.com/courses/adapting-the-ui-in-sap-s-4hana-cloud-using-sap-screen-personas</A></P><P>&nbsp;</P><P><STRONG>Tutorial: Key User Adaptation for SAPUI5 applications </STRONG></P><P>To extend SAPUI5 applications, SAPUI5 Flexibility offers capabilities not only for developers, but also for key users and end users using simple visual / WYSIWYG tools..</P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/new-tutorial-mission-key-user-adaptation-for-sapui5-applications/ba-p/13639694" target="_blank">https://community.sap.com/t5/technology-blogs-by-sap/new-tutorial-mission-key-user-adaptation-for-sapui5-applications/ba-p/13639694</A></P><P>&nbsp;</P><P><STRONG>Tutorial: SAPUI5 Adaptation Projects for SAP S/4HANA Cloud </STRONG></P><P>SAPUI5 Adaptation Projects in SAP Business Application Studio are not new. What is new, is the support for SAP S/HANA Cloud. This enables developers to enhance SAPUI5 applications in SAP S/4HANA Cloud with features that were previously only for on-premise customers. See this blog post linking to an extensive, end-to-end tutorial:</P><P><A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/extending-sap-s-4hana-cloud-public-edition-using-sapui5-adaptation-projects/ba-p/13607813" target="_blank">https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/extending-sap-s-4hana-cloud-public-edition-using-sapui5-adaptation-projects/ba-p/13607813</A></P><H2 id="toc-hId-234178148">Back issues from the past year</H2><P><A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-fiori-development-newsletter-may-2024-issue-28/ba-p/13702765" target="_self">SAP FIori development newsletter #28 (May 2024)</A></P><P><A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-fiori-development-newsletter-march-2024-issue-27/ba-p/13646140" target="_self">SAP Fiori development newsletter #27 (March 2024)</A></P><P><A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/sap-fiori-development-newsletter-january-2024-issue-26/ba-p/13582916" target="_self">SAP Fiori development newsletter #26 (January 2024)</A></P><P><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-development-newsletter-november-2023-issue-25/ba-p/13573104" target="_self">SAP Fiori development newsletter #25 (November 2023)</A></P><P><A href="https://blogs.sap.com/2023/09/12/sap-fiori-development-newsletter-september-2023-issue-24/" target="_blank" rel="noopener noreferrer">SAP Fiori development newsletter #24 (September 2023)</A></P> 2024-07-16T22:16:32.946000+02:00 https://community.sap.com/t5/technology-blogs-by-members/my-tips-for-migrating-very-old-fiori-apps-to-btp-cloud-foundry/ba-p/13765300 My Tips for Migrating very old Fiori Apps to BTP Cloud Foundry 2024-07-19T01:38:03.582000+02:00 AlessandroSpadoni https://community.sap.com/t5/user/viewprofilepage/user-id/141302 <H2 id="toc-hId-1020319487">Introduction</H2><P>Migrating SAP Fiori applications to the BTP Cloud Foundry environment can be a complex but necessary task, especially given the impending sunset of the SAP NEO environment on December 31, 2028. This blog aims to share my personal tips for migrating older SAP Fiori apps, whether from on-premise systems or from the NEO environment.</P><P>The official SAP docu.mentation, "<A href="https://help.sap.com/docs/html5-applications/migrating-applications-in-sap-btp-from-neo-environment-to-cloud-foundry-environment/overview-of-migration" target="_blank" rel="noopener noreferrer">Migrating Applications in SAP BTP from the Neo Environment to the SAP BTP Cloud Foundry Environment</A>," is a comprehensive resource that covers all aspects of the migration process, starting from project migration using the Business Application Studio (BAS).&nbsp;<!-- notionvc: 2782fea9-301f-4387-8c03-525c1a8184bb --></P><P>While the official guide is exhaustive, my blog provides additional help based on my field experiences. These tips might prove useful for someone in a similar situation, offering practical insights to navigate the migration process more smoothly.</P><H2 id="toc-hId-823805982"><SPAN class="">Your app may not have the manifest.json : Creating a Descriptor File for Existing Apps</SPAN><!-- notionvc: 8df2d716-bfbb-4a9d-b020-47c47dc3142b --></H2><P>You might not find the manifest.json in the app you need to migrate.</P><P>In this case, you have to create it manually (this is also mandatory for the migration of the project with BAS). This link in the SAPUI5 documentation, '<A href="https://sapui5.hana.ondemand.com/sdk/#/topic/3a9babace121497abea8f0ea66e156d9" target="_blank" rel="noopener nofollow noreferrer">Creating a Descriptor File for Existing Apps</A>,' is very useful, and I recommend starting here.</P><P>Some points to watch out for:</P><UL><LI>be careful with the '/' in the uri section of dataSources, remove it to have relative URLs instead of absolute ones</LI><LI>pay close attention to correctly set up the 'models' part under 'sap.ui5,' because the big difference is that the framework creates the models for us, so you need to define them correctly based on the models that were previously created manually in the Component.js, where you should remove the creation of models (this part is also in the UI5 documentation, but it is easy to make mistakes in manual creation)</LI><LI>Remember to also include sap cloud service:</LI></UL><P><SPAN class=""><!-- notionvc: 795254d9-119c-4baf-a951-7109f4412d3b --></SPAN></P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>"sap.cloud": { "service": "yourservice" }</code></pre><P>&nbsp;</P><H2 id="toc-hId-627292477">Workzone</H2><H3 id="toc-hId-559861691"><SPAN class="">Add the inbound intent in your manifest.json</SPAN><!-- notionvc: 83eb4164-08dc-47ae-90a5-0752ad889456 --></H3><P>If you are going to use Workzone, you also need to include in your manifest.json the intent details and description, icon, subtitle, etc., that will be used in the tile. For this, you need to define the crossNavigation Inbound section</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>"crossNavigation": { "inbounds": { "your-inbound": { "signature": { "parameters": {}, "additionalParameters": "allowed" }, "semanticObject": "yourSemanticObject", "action": "Display", "title": "{{appTitle}}", "subTitle": "{{subTitle}}", "icon": "sap-icon://wallet" } } }</code></pre><P>&nbsp;</P><H3 id="toc-hId-363348186"><SPAN class="">If you need multiple intents for the same app</SPAN><!-- notionvc: af0ae322-dc47-47ab-8ed6-fecae5e55cdc --></H3><P>It is very common to want different tiles with different parameters for the same App.</P><P>While it was easier to configure this scenario in the old Neo Cloud Portal Service or on-premise Launchpad, it seems not possible to have multiple Intents for the same app in Cloud Foundry.</P><P>Here is an interesting Question by&nbsp;<a href="https://community.sap.com/t5/user/viewprofilepage/user-id/13892">@MikeDoyle</a>&nbsp;&nbsp; where the only solution seems to be create a “Local Copy” and then defining a new “Tile” with different parameters locally <A href="https://community.sap.com/t5/technology-q-a/how-to-deploy-multiple-intents-of-same-fiori-app-to-work-zone/qaq-p/12795041" target="_blank">https://community.sap.com/t5/technology-q-a/how-to-deploy-multiple-intents-of-same-fiori-app-to-work-zone/qaq-p/12795041</A></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="alespad_0-1721344317715.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138636iB66FCF49438FCBEA/image-size/medium?v=v2&amp;px=400" role="button" title="alespad_0-1721344317715.png" alt="alespad_0-1721344317715.png" /></span></P><H3 id="toc-hId-166834681"><SPAN class="">Order of Tiles</SPAN><!-- notionvc: 57f061cb-2631-4109-b795-ec708b76f62f --></H3><P><SPAN class="">Another common aspect is that you will be asked to replicate the same order of the Tiles that is already present in the old Cloud Portal Neo or the on-premise Launchpad.</SPAN></P><P><SPAN class="">It is very important to maintain a consistent order of Tiles and configuration with the past. For this topic, the great blog by&nbsp;<a href="https://community.sap.com/t5/user/viewprofilepage/user-id/195687">@NabiZamani</a>&nbsp;at this link <A class="" href="https://community.sap.com/t5/technology-blogs-by-members/changing-the-order-of-groups-and-tiles-in-your-sapcf-flp/ba-p/13557990" target="_blank"><SPAN class="">https://community.sap.com/t5/technology-blogs-by-members/changing-the-order-of-groups-and-tiles-in-your-sapcf-flp/ba-p/13557990</SPAN></A> is very useful. </SPAN></P><P><SPAN class="">In my case, replicating the order of Tiles in a group seems simpler than you might think: the order of the Tiles is determined by the order in which the app is saved within the group.<!-- notionvc: 6d7dbba7-9e8f-4f7d-ae61-5e66665096ff --></SPAN></P><H3 id="toc-hId--29678824"><SPAN class="">Stable UI5 Version</SPAN><!-- notionvc: ac52b8ab-c635-4ed0-9837-0e4b8a04ce8e --></H3><P>In some situations, you may need to use a stable SAPUI5 version to run the migrated applications, which might not work correctly with the latest SAPUI5 release.</P><P>This happened to me, for example, with a rather complex custom control. In this case, the quickest way to get the app working is to set a UI5 Stable Version.</P><P>For this, two community links helped me: this Question by&nbsp;<a href="https://community.sap.com/t5/user/viewprofilepage/user-id/8017">@miltonc</a>&nbsp;<A href="https://community.sap.com/t5/technology-q-a/stable-sapui5-version-for-custom-apps-in-sap-build-work-zone-launchpad/qaq-p/12740099" target="_blank">https://community.sap.com/t5/technology-q-a/stable-sapui5-version-for-custom-apps-in-sap-build-work-zone-launchpad/qaq-p/12740099</A>&nbsp;and the answer by&nbsp;<a href="https://community.sap.com/t5/user/viewprofilepage/user-id/744">@Ivan-Mirisola</a>&nbsp;at this question&nbsp;<A href="https://community.sap.com/t5/technology-q-a/how-to-fix-sap-ui5-version-in-sap-btp-launchpad-service/qaq-p/12547095" target="_blank">https://community.sap.com/t5/technology-q-a/how-to-fix-sap-ui5-version-in-sap-btp-launchpad-service/qaq-p/12547095</A></P><P>the main points are:</P><UL><LI>Set your stable version in the manifest.json of your app, taking into account the patches, to avoid hardcoding a specific version. You can specify an "x" to always use the latest patch. For example:</LI></UL><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>"sap.platform.cf": { "ui5VersionNumber": "1.108.x" }​</code></pre><P>&nbsp;</P><P>&nbsp;</P><UL><LI>Use the same stable version for all the apps that will go into the same Workzone Site; otherwise, the most recent release will be used</LI><LI>If you try to execute the command&nbsp;<SPAN class="">sap.ui.version</SPAN> from the console, it will always return the most recent version used by Workzone, making you think the stable version is not being used. See the first comment in the link I posted where you can execute Shift + Ctrl + Alt + P to bring up a Technical Information Dialog and check if your UI5 Stable Version is being used<!-- notionvc: e5ab635e-f2c8-40d2-8845-c6ce22f13555 --></LI></UL><H3 id="toc-hId--226192329"><SPAN class="">ShellUIService</SPAN><!-- notionvc: 765026c3-4620-49dc-93bf-383bd47830f2 --></H3><P><SPAN class="">You might find ugly code like this in the old application:</SPAN></P><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>sap.ui.getCore().byId("shellAppTitle").getModel().getData().application.title = ' ..... '; sap.ui.getCore().byId("shellAppTitle").getModel().updateBindings();</code></pre><P>&nbsp;</P><P>with the purpose of dynamically updating the title of your app within the Launchpad. The correct way to do this in Workzone is described very simply in the overview of the class&nbsp;<A href="https://sapui5.hana.ondemand.com/sdk/#/api/sap.ushell.ui5service.ShellUIService%23methods" target="_blank" rel="noopener nofollow noreferrer"><SPAN class="">sap.ushell.ui5service.ShellUIService</SPAN></A><!-- notionvc: a90b44bb-21c0-42d1-9a18-54facc932af6 --></P><P>Declare the usage of the service in the manifest:</P><P>&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>"sap.ui5": { "services": { "ShellUIService": { "factoryName": "sap.ushell.ui5service.ShellUIService" } } }</code></pre><P>&nbsp;</P><P>&nbsp;</P><P>and in your controller</P><P>&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-javascript"><code>this.getOwnerComponent().getService("ShellUIService").then( function (oService) { oService.setTitle('....'); }, function (oError) { console.log("Cannot get ShellUIService"); } );</code></pre><P>&nbsp;</P><P>&nbsp;</P><H2 id="toc-hId--551788553">User API Service</H2><P>If the app you need to migrate from Neo used the userapi service, you need to adapt it to use the corresponding Cloud Foundry service. Besides the official documentation <A href="https://help.sap.com/docs/cloud-portal-service/sap-cloud-portal-service-on-cloud-foundry/user-api-service#related-information" target="_blank" rel="noopener noreferrer">here</A>, I found the documentation on npmjs <A href="https://www.npmjs.com/package/@sap/approuter#user-api-service" target="_blank" rel="noopener nofollow noreferrer">here</A> very useful.</P><P>Essentially, you need to add the routing to the user API in your xs-app.json</P><P>&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>{ "source": "^/user-api(.*)", "target": "$1", "service": "sap-approuter-userapi" }</code></pre><P>&nbsp;</P><P>This way, you can use <EM><STRONG>/user-api/currentUser</STRONG></EM> or <EM><STRONG>/user-api/attributes </STRONG></EM>to call from your app.</P><P>Attention point: the JSON returned is not identical in the attributes. For example, in the Neo app I migrated, the attribute 'login_name' was used, which in Cloud Foundry becomes simply 'name’</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="alespad_0-1721344881469.png" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138637i0F8D04E73E7752B4/image-size/medium?v=v2&amp;px=400" role="button" title="alespad_0-1721344881469.png" alt="alespad_0-1721344881469.png" /></span></P><H2 id="toc-hId--748302058">Protect HTML5 Apps with XSUAA</H2><P>Another issue that may arise is protecting access to Fiori Apps if they are run via direct link without Workzone.</P><P>While in NEO there was a configuration in the cockpit where you could associate a Role to enable authorization for opening the App, in Cloud Foundry this is a bit different.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="HTML5 Permission in NEO" style="width: 685px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138638iE5D060AA5D0263AC/image-size/large?v=v2&amp;px=999" role="button" title="alespad_1-1721344923832.png" alt="HTML5 Permission in NEO" /><span class="lia-inline-image-caption" onclick="event.preventDefault();">HTML5 Permission in NEO</span></span></P><P>If you use the managed approuter of Workzone, your Apps will be in the HTML5 Repository without being able to define any roles, but you can protect the application using an xsuaa scope within the xs-app.json.</P><P>So, in the xs-security.json you can define a scope (e.g. frontendscope)</P><P>&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>{ "xsappname": "testprotectedapp", "tenant-mode": "dedicated", "description": "Security profile of called application", "scopes": [ { "name": "$XSAPPNAME.frontendscope", "description": "Protected App Admin" } ] }</code></pre><P>&nbsp;</P><P>This scope then needs to be defined in a role template and role collection. To protect the app, you just need to define the scope in the <SPAN class="">xs-app.json</SPAN> in the route for the HTML5 Runtime.<!-- notionvc: 2a440e06-a455-48aa-bcd6-6f0edf4fd005 --></P><P>&nbsp;</P><P>&nbsp;</P><pre class="lia-code-sample language-json"><code>{ "source": "^(.*)$", "target": "$1", "service": "html5-apps-repo-rt", "authenticationType": "xsuaa", "scope": "$XSAPPNAME.frontendscope" }</code></pre><P>&nbsp;</P><P><!-- notionvc: d1350554-977c-451b-aa46-b747c91f624f --></P><P>Users who do not have a role with this scope will receive a 403 Forbidden error when opening the link.</P><H2 id="toc-hId--597561206">sap.ca.scfld</H2><P>Last but not least, the nightmare <A href="https://www.npmjs.com/package/@sapui5/sap.ca.scfld.md" target="_blank" rel="noopener nofollow noreferrer">sap.ca.scfld</A>. If you don't know it, consider yourself lucky. However, if you do know it and need to migrate old apps using it to Cloud Foundry, you might face many problems. As rightly mentioned in this old blog, the only consideration to make is <A href="https://community.sap.com/t5/technology-q-a/sap-ca-scfld-don-t-use-it/qaq-p/11247574" target="_blank">'don't use it!'</A><!-- notionvc: 4c2cdb71-efb4-497c-9f4e-bc0256010d7c --></P><P>These are libraries that SAP used in very old Fiori apps to accelerate the development of applications, especially Master/Detail.</P><P>The particularity is that the routes are configurable and predefined in the Component.js, while the OData services are in the Configuration.js file.</P><P>In simple terms, I tried to be as conservative as possible and used the jQuery.sap.getModulePath function to get the complete endpoint at runtime for the OData because I wasn’t able to define the models in manifest.json</P><P>You might also encounter errors like this when the app is added to Workzone</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="alespad_0-1721345199354.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138639iED3D09DAC131292D/image-size/large?v=v2&amp;px=999" role="button" title="alespad_0-1721345199354.png" alt="alespad_0-1721345199354.png" /></span></P><P>The way I found to resolve this is to disable the 'Asynchronous Module Loading' option in your Workzone Site settings</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="alespad_1-1721345230935.png" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138640i30FEF090E382FB80/image-size/large?v=v2&amp;px=999" role="button" title="alespad_1-1721345230935.png" alt="alespad_1-1721345230935.png" /></span></P><P>In conclusion, you should not migrate Fiori applications that use the sap.ca.scfld library but instead recreate them from scratch. However, I understand that in some situations, you might have to take the 'mandatory migration of the old app' approach because Neo is being retired, there is no time, the client's IT department demands it, or for many other reasons beyond our control. In this case, with these adjustments, the app can be opened, but this can only be a temporary solution and it's important to emphasize this.</P><P>I will try to update this blog with new insights based on the experience of future similar projects if there are other interesting points.</P><P>Happy migrating!</P><P><!-- notionvc: daaebc11-8cef-4f5d-8e00-57cd9b99c33e --></P><P><!-- notionvc: f8d82494-86d3-4f06-a06f-54bc3324e349 --></P><P>&nbsp;</P><P><SPAN class=""><!-- notionvc: e646e580-594c-4117-a8cc-d9064a2218e2 --></SPAN></P> 2024-07-19T01:38:03.582000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/ui5-tooling-4-0/ba-p/13769578 UI5 Tooling 4.0 2024-07-24T09:30:00.054000+02:00 merlin_beutlberger https://community.sap.com/t5/user/viewprofilepage/user-id/281023 <H1 id="toc-hId-891358079"><SPAN><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="UI5 Tooling 4.0.jpg" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141130iA86719B2CDBE0E89/image-size/large?v=v2&amp;px=999" role="button" title="UI5 Tooling 4.0.jpg" alt="UI5 Tooling 4.0.jpg" /></span></SPAN></H1><H1 id="toc-hId-694844574">&nbsp;</H1><H1 id="toc-hId-498331069"><SPAN>UI5 Tooling 4.0</SPAN></H1><P><SPAN>The UI5 Core team is pleased to announce the release of UI5 Tooling 4.0.</SPAN></P><P><SPAN>This release has a strong focus on enabling <A href="https://community.sap.com/t5/open-source-blogs/introducing-openui5-2-x/ba-p/13580633" target="_blank">UI5 2.x</A>&nbsp;compatibility for projects.&nbsp;</SPAN><SPAN>In addition, along with some important housekeeping, we introduced a new feature for automatically generating locale information in the manifest.json.</SPAN></P><P><SPAN>We are doing our best to minimize upgrade efforts for UI5 developers. Projects currently working with UI5 Tooling 3.x are generally expected to work with UI5 Tooling 4.0. More on this below.</SPAN></P><H2 id="toc-hId-430900283"><SPAN>Node.js and npm Requirements</SPAN></H2><P><STRONG>UI5 Tooling 4.0 requires Node.js&nbsp;v20.11.0, v22.0.0, or higher.</STRONG></P><P><SPAN>This allows us to make use of the latest Node.js features and to upgrade dependencies requiring current Node.js versions.</SPAN></P><H2 id="toc-hId-234386778"><SPAN>Specification Version 4.0</SPAN></H2><P><SPAN>This new major Specification Version comes with breaking changes that might have an impact on projects. Please carefully read the <A href="https://sap.github.io/ui5-tooling/v4/updates/migrate-v4/" target="_blank" rel="noopener nofollow noreferrer">migration guide</A> before applying the new version to your projects.</SPAN></P><P><SPAN>These changes are mostly related to how bundles are created in UI5 Tooling. Even if you do not use custom bundles, this might have an impact on the initial loading behavior of your application or library. These changes pave the road for future improvements on bundling in UI5. Stay tuned for more!</SPAN></P><H2 id="toc-hId-37873273"><SPAN>UI5 2.x</SPAN></H2><P><STRONG>UI5 Tooling 4.0 along with the new Specification Version 4.0 is required for projects to utilize <A href="https://community.sap.com/t5/open-source-blogs/introducing-openui5-2-x/ba-p/13580633" target="_blank">UI5 2.x</A>.</STRONG></P><P><SPAN>When defining Specification Version 4.0 in your project, the code generated by UI5 Tooling will apply all the current best practices, such as consistently loading resources asynchronously and terminating the use of "<A href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval" target="_blank" rel="noopener nofollow noreferrer">eval()</A>" (a common CSP violation). Both of which are prerequisites for projects to be compatible with UI5 2.x.</SPAN></P><H2 id="toc-hId--158640232">New Feature: Automatic Generation of Locale Information</H2><P><SPAN>In your application or library project, UI5 Tooling now analyzes existing manifest.json files. For any "i18n" and "ResourceModel" configuration, this ensures that the "supportedLocales" property is defined. If it is not defined, it is now filled in automatically based on the translation files present in the project.</SPAN></P><P><SPAN>This improves user experience by avoiding unnecessary requests at runtime. Without a defined set of "supported locales", the UI5 runtime has to determine the available translations by requesting individual files, often resulting in "404 Not Found" server responses.</SPAN></P><P><SPAN>Note that you can opt out of this behavior by defining the "supportedLocales" property yourself. The feature is active for both, the build and the server.</SPAN></P><P><SPAN>Learn more about this new feature in the <A href="https://sap.github.io/ui5-tooling/v4/pages/Builder/#generation-of-supported-locales" target="_blank" rel="noopener nofollow noreferrer">builder documentation</A>.</SPAN></P><H2 id="toc-hId--355153737"><SPAN>Upgrade Today</SPAN></H2><P><STRONG>Upgrading to UI5 Tooling 4.0 is a straightforward task for most projects.</STRONG></P><P><SPAN>First, ensure that you meet the minimum required versions of Node.js and npm using the commands "node --version" and "npm --version". Make sure to also check your CI/CD workflows.</SPAN></P><P><SPAN>Then upgrade the UI5 CLI in your project by executing the following command:</SPAN></P><PRE><SPAN>npm i --save-dev @ui5/cli@latest</SPAN></PRE><P><SPAN>Also update your global install using:</SPAN></P><PRE><SPAN>npm i --global @ui5/cli@latest</SPAN></PRE><P><SPAN>You may already stop there, since updating the Specification Version remains optional.</SPAN></P><P><SPAN>However, if you want UI5 Tooling to apply the current best practices when building your project, also update the "specVersion" property in all ui5.yaml files to "4.0":&nbsp;</SPAN></P><P>&nbsp;</P><pre class="lia-code-sample language-yaml"><code>specVersion: "4.0" [...]</code></pre><P>&nbsp;</P><P><SPAN>Afterwards, test your project as usual. In case any problems come up, make sure to check our <A href="https://sap.github.io/ui5-tooling/v4/updates/migrate-v4/" target="_blank" rel="noopener nofollow noreferrer">migration guide</A>. And if you need further assistance, we invite you to raise an&nbsp;<A href="https://github.com/SAP/ui5-tooling/issues/new/choose" target="_blank" rel="noopener nofollow noreferrer">issue on GitHub</A>.</SPAN><SPAN>&nbsp;</SPAN></P><P>&nbsp;</P> 2024-07-24T09:30:00.054000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/product-updates-for-sap-build-code-july-2024-edition/ba-p/13764559 Product Updates for SAP Build Code – July 2024 Edition 2024-07-24T13:07:05.262000+02:00 BirgitS https://community.sap.com/t5/user/viewprofilepage/user-id/41902 <P><SPAN>Dear SAP Community,</SPAN></P><P><SPAN>In our continuous efforts to enhance your application development experience, we're thrilled to introduce several new SAP Build Code features. Let me share with you some highlights of the latest releases.</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Generative AI support for productivity tool</SPAN></STRONG></P><P><SPAN>In SAP Build Code, our <A href="https://help.sap.com/docs/build_code/d0d8f5bfc3d640478854e6f4e7c7584a/337848fc83f24738a9f3a15a88f1fa76.html" target="_blank" rel="noopener noreferrer">generative AI assistant Joule</A> supports you with many developer tasks including generating data models and services, the application logic, and unit testing. We now allow you to use Joule where you need it: inside our productivity tools. You will find the little Joule icon is displayed besides the title of the Data Models and the Services tiles in the Storyboard. Opening Joule, you will see it supports you based on your current context. This means, when you are starting to enhance, for example, the data model Joule opens for exactly this purpose. You get an inline area, in which you can type your prompt. In addition, you will find a list of suggested prompts.</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Joule icon in the data models and services tiles" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138280iC7BBD606ECCCA23E/image-size/large?v=v2&amp;px=999" role="button" title="BirgitS_0-1721295636701.png" alt="BirgitS_0-1721295636701.png" /></span><SPAN>Joule icon in the data models and services tiles</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Use Joule to enhance your already existing data models and services" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138281i75A8ABC2F03C6344/image-size/large?v=v2&amp;px=999" role="button" title="BirgitS_1-1721295636707.png" alt="BirgitS_1-1721295636707.png" /></span><SPAN>Suggested prompts</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><STRONG><SPAN>Use Joule to enhance your already existing data models and services&nbsp;</SPAN></STRONG></P><P><SPAN>We got the request to allow developers to use Joule to modify their already generated SAP Cloud Application Programming Model (CAP) data model or service entities. I’m happy to tell you that it is now possible to modify either the data model (schema.cds) or the service entities (service.cds), or both, using a prompt, and get the enhanced cds content.</SPAN></P><P><SPAN>With this new feature, it is now possible to:</SPAN></P><UL><LI><SPAN>add or remove an entity,</SPAN></LI><LI><SPAN>add, modify, or remove properties of entities,</SPAN></LI><LI><SPAN>create or remove associations between entities,</SPAN></LI><LI><SPAN>get more support on the service projection definition.</SPAN></LI></UL><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Create your data model and services with the help of Joule" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138282iE840FB09F4AF6E38/image-size/large?v=v2&amp;px=999" role="button" title="BirgitS_2-1721295636715.jpeg" alt="BirgitS_2-1721295636715.jpeg" /></span><SPAN>Step 1: Create your data model and services with the help of Joule</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Use Joule to enhance your data model" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138285i3C5C8005B3DA82EE/image-size/large?v=v2&amp;px=999" role="button" title="BirgitS_3-1721295636722.jpeg" alt="BirgitS_3-1721295636722.jpeg" /></span><SPAN>Step 2: Use Joule to enhance your data model</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Enhanced Data Model" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138284iDAB9C031F4211F7D/image-size/large?v=v2&amp;px=999" role="button" title="BirgitS_4-1721295636729.jpeg" alt="BirgitS_4-1721295636729.jpeg" /></span><SPAN>Result: Enhanced data model</SPAN></P><P><SPAN>Please read the documentation for further information about <A href="https://help.sap.com/docs/build_code/d0d8f5bfc3d640478854e6f4e7c7584a/337848fc83f24738a9f3a15a88f1fa76.html" target="_blank" rel="noopener noreferrer">Generative AI-Powered Development</A> in SAP Build Code.</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><STRONG>Guided development for SAP Fiori app development</STRONG></P><P><SPAN>With SAP Fiori elements you can build </SPAN><SPAN>your applications according to your specific requirements. It is one of the options available to <A href="https://help.sap.com/docs/bas/developing-sap-fiori-app-in-sap-business-application-studio/developing-and-extending-sap-fiori-applications?q=flexible%20programming%20model" target="_blank" rel="noopener noreferrer">develop SAP Fiori apps</A> based on SAPUI5. In the guide center panel of your SAP Fiori Application project, you can now find an embedded tutorial for SAP Fiori app development. This tutorial describes step by step how to develop a custom page based on the <A href="https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction" target="_blank" rel="noopener noreferrer">flexible programming model</A>.</SPAN></P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Tutorial: Develop an SAP Fiori app on BTP" style="width: 400px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138283iB0C85EB7606B7DD9/image-size/medium?v=v2&amp;px=400" role="button" title="BirgitS_5-1721295636733.png" alt="BirgitS_5-1721295636733.png" /></span><SPAN>Tutorial: Develop an SAP Fiori app on BTP</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P><STRONG>Graphical editor for hdbgrants files </STRONG></P><P>When working with HDI hdbgrants files are used to define the permissions and access rights for users and roles within an HDI container in the SAP HANA database. In SAP Business Application Studio, the SAP HANA tools offer a graphical editor for <SPAN><A href="https://help.sap.com/docs/hana-cloud-database/sap-hana-cloud-sap-hana-database-developer-guide-for-cloud-foundry-multitarget-applications-sap-business-app-studio/syntax-options-in-hdbgrants-file" target="_blank" rel="noopener noreferrer">hdbgrants</A></SPAN> files providing a convenient way of implementing <SPAN><A href="https://help.sap.com/docs/hana-cloud-database/sap-hana-cloud-sap-hana-database-developer-guide-for-cloud-foundry-multitarget-applications-sap-business-app-studio/using-synonyms-to-access-external-schemas-and-objects" target="_blank" rel="noopener noreferrer">cross-container or cross-schema scenarios</A></SPAN>. The syntax of hdbgrants files can be quite complex, hence this graphical editor can ease the development of such scenarios. Note that it is also possible to use the code editor or to toggle between code and graphical editor, depending on your personal preferences.</P><P style=" text-align: center; "><span class="lia-inline-image-display-wrapper lia-image-align-center" image-alt="Graphical editor for hdbgrants files" style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/138286iE878431C0B4C4371/image-size/large?v=v2&amp;px=999" role="button" title="BirgitS_6-1721295636735.png" alt="BirgitS_6-1721295636735.png" /></span><SPAN>Graphical editor for hdbgrants files</SPAN></P><P>The source of the privileges is a service instance containing information that can be used to grant privileges in the database. The editor lists the available service instances that are bound to the current project. A user can select which service instance should be used for the current file.</P><P>Privileges in hdbgrants files can be specified for two users: the HDI container’s object owner and the application user that is used by the application to connect to the database at runtime. The two tabs at the top of the editor allow selecting either user.</P><P>Individual privileges can be assigned on the available object types: global roles, schema-local roles, system privileges, schema privileges, object privileges, and global object privileges. The privileges can be granted either with grant option or without grant option. Grants with grant option are required for building database objects on top of other database objects. Since database objects in an HDI container should only be created by HDI (by means of the object owner user) the object owner should usually be granted privileges with grant option, while the application user only needs to perform DML operations on database objects and does not need the privileges with grant option.</P><P>For an easy way of keeping the privileges of the object owner and the application user in sync the editor allows copying the current privileges of the object owner to the application user via the “Copy properties to application user” button. When using this convenience feature all privileges that the object owner has with grant option are copied to the application user without grant option in order to set up the recommended permission model.</P><P><SPAN>&nbsp;</SPAN></P><P><STRONG>Further readings</STRONG></P><P>You are still using SAP Business Application Studio and want to know, why you should change to SAP Build Code? Then I recommend reading this blog post written by my colleague Rupa Maity: &nbsp;<SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/why-sap-build-code/ba-p/13755163?emcs_t=S2h8ZW1haWx8ZGlnZXN0X25vdGlmaWNhdGlvbnxMWUdRQjRVWUNRMzc0RXwtMXxPVEhFUlN8aEs" target="_blank">Why SAP Build Code?</A></SPAN> Read <SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/migrate-content-from-sap-business-application-studio-to-sap-build-code/ba-p/13757904" target="_blank">this blog post</A> written by my colleague Marc Huber </SPAN>to find out how to migrate content from SAP Business Application Studio to SAP Build Code.</P><P>In addition, I want to draw you attention to two other great blog posts:</P><P><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/collaborate-on-your-sap-build-code-project-with-your-teammates/ba-p/13720813" target="_blank">Collaborate on your SAP Build Code project with your teammates!</A> written by Rupa Maity</SPAN></P><P><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/how-to-develop-sap-mdk-applications-in-sap-build-code/ba-p/13725637?emcs_t=S2h8ZW1haWx8a3Vkb3N8TFhaM1lET1hYRFBBVTZ8MTM3MjU2Mzd8S1VET1N8aEs" target="_blank">How to Develop SAP MDK Applications in SAP Build Code</A> written by Liat Borenstein</SPAN></P><P><SPAN>&nbsp;</SPAN></P><P>For further information on new features, please check our roadmaps: <SPAN><A href="https://roadmaps.sap.com/board?PRODUCT=73555000100800004515&amp;range=2024Q1-2024Q4#Q3%202024" target="_blank" rel="noopener noreferrer">roadmap for SAP Build Code</A></SPAN>, <SPAN><A href="https://roadmaps.sap.com/board?PRODUCT=73554900100800001361" target="_blank" rel="noopener noreferrer">SAPUI5 Road Map</A></SPAN>. And have a look at <SPAN><A href="https://help.sap.com/whats-new/cf0cb2cb149647329b5d02aa96303f56?Component=Cloud%20Logging%3BCloud%20Transport%20Management%3BContinuous%20Integration%20%26%20Delivery%3BDocument%20Management%20Service%3BMobile%20Services%3BSAP%20Alert%20Notification%20Service%3BSAP%20BTP,%20Cloud%20Foundry%20Runtime%3BSAP%20Build%3BSAP%20Business%20Application%20Studio&amp;locale=en-US&amp;version=Cloud" target="_blank" rel="noopener noreferrer">What's New in SAP Build Code</A></SPAN>, the <SPAN><A href="http://help.sap.com/disclaimer?site=https://help.sap.com/whats-new/67f60363b57f4ac0b23efd17fa192d60" target="_blank" rel="noopener noreferrer">What's New Viewer for SAPUI5</A></SPAN> and the <SPAN><A href="https://cap.cloud.sap/docs/releases/" target="_blank" rel="noopener nofollow noreferrer">SAP Cloud Application Programming Model Release Notes</A></SPAN><STRONG>. </STRONG><STRONG>If you want to stay up-to-date with news, learning resources, and product and strategy updates for SAP Build Code:&nbsp;</STRONG>follow our&nbsp;<SPAN><A href="https://community.sap.com/t5/c-khhcw49343/SAP%2520Build%2520Code/pd-p/73555000100800004372" target="_blank">tag</A></SPAN>.</P><P>We look forward to seeing how you use these new capabilities to create innovative solutions and drive your projects forward. Stay tuned for more updates and happy coding! <span class="lia-unicode-emoji" title=":smiling_face_with_smiling_eyes:">😊</span></P> 2024-07-24T13:07:05.262000+02:00 https://community.sap.com/t5/technology-blogs-by-sap/sap-ux-latest-2024-innovations-in-public-cloud-joule-genai-and-more/ba-p/13770638 SAP UX Latest 2024 Innovations in Public Cloud: Joule, GenAI and More 2024-07-25T12:12:59.234000+02:00 ThomasReiss https://community.sap.com/t5/user/viewprofilepage/user-id/149639 <P><STRONG>We are taking SAP’s user experience to the next level by incorporating new AI design patterns into our products. These last six months our public cloud products have been leading the way, so let us have a look at concrete examples of how users can get their jobs done more easily thanks to these patterns for Joule and Generative AI (GenAI) in SAP SuccessFactors, SAP Analytics Cloud, SAP Ariba, SAP Customer Experience and SAP S/4HANA Cloud Public Edition 2408. In addition to AI patterns, our product teams have also invested in specific user experience improvements. Finally, our technology teams have made it easier to build UIs, leveraging GenAI built into SAP Business AI.</STRONG></P><P>We are accelerating our use of AI in our user experience, to make work easier for users – so much so that you might even feel overwhelmed by all the new announcements and features across our portfolio! However, there are some fundamental patterns which we have identified and which our designers have baked into our SAP Design System. Understanding these patterns will help you understand how we are incorporating AI into our user experience. It will make it easier for you to put the many announcements of new AI-enabled features into context.</P><P>In this post, we’ll look at:</P><UL><LI>The AI design patterns, with concrete examples in our products.</LI><LI>User experience improvements in selected products.</LI><LI>UI technology innovations.</LI></UL><P>These are the AI design patterns we’ll be looking at, each with their own section:</P><UL><LI><STRONG>Joule UX innovations, </STRONG>with a focus on the new informational pattern for customer documents provided by SAP SuccessFactors.</LI><LI><STRONG><STRONG>Triggering GenAI actions, </STRONG></STRONG>such as<UL><LI><STRONG>Providing a summary </STRONG>of a given business object or context.</LI><LI><STRONG>Creating proposals, </STRONG>such as performance goals in SuccessFactors, or for a category segmentation in SAP Ariba.</LI><LI><STRONG>GenAI prompts within application UIs </STRONG>– for using natural language directly within the application.</LI><LI><STRONG><STRONG>Guided AI Prompts </STRONG></STRONG><SPAN>– for example for writing assistants, so that users don’t have to worry about what prompt text to enter to get the desired result.</SPAN></LI></UL></LI></UL><P>We expect these patterns to be used broadly across the SAP portfolio in the future; the examples below are from products which have adopted them first.</P><P>Transformational as AI is for the user experience, it is only a part of the overall interaction a user has with an application. Hence, in addition to introducing AI into our UI, we are continuing to work on ensuring that we provide a good overall user experience, by improving existing applications and by building new ones. In this post, I’ll give you a brief overview of some of the major innovations of the last six months, and provide pointers where you can find out more, in the sections:</P><UL><LI><STRONG><STRONG>User Experience Improvements in Selected Products</STRONG></STRONG><UL><LI><STRONG>SAP SuccessFactors</STRONG></LI><LI><STRONG><STRONG>SAP S/4HANA Cloud Public Edition 2408</STRONG></STRONG></LI></UL></LI></UL><P>The same goes for our UI technology, where we are embedding AI to make it easier to build applications with great UX – I’ll give you a brief overview along with pointers to more details, in the sections:</P><UL><LI><STRONG><STRONG>UI Technology Innovations</STRONG></STRONG><UL><LI><STRONG>AI-enabled UI Development</STRONG></LI><LI><STRONG><STRONG>Further UI Technology Highlights</STRONG></STRONG></LI></UL></LI></UL><H1 id="toc-hId-892014318"><SPAN>Joule User Experience Innovations</SPAN></H1><P>Joule is your AI-enabled copilot for working with SAP, allowing you to use natural language to gain insights and achieve results. Today, it is generally available for SAP SuccessFactors, SAP Customer Experience, SAP Customer Data Platform, SAP Build Code, and SAP Integration Suite. It is also available to early adopters of SAP Start and SAP S/4HANA Cloud Public Edition. The navigational pattern (see below) is already available for SAP S/4HANA Cloud Private Edition.&nbsp;</P><P>First, let me recap the main interaction patterns provided by Joule, before introducing a new capability available today with SAP SuccessFactors.</P><H2 id="toc-hId-824583532"><SPAN>Joule Interaction Patterns</SPAN></H2><P>Joule has these three interaction patterns, examples of which you can see in Figure 1.</P><P><STRONG>Informational Pattern: </STRONG>allows you to query documentation with natural language, typically with a “How do I…” question. Joule provides concise summaries of content from documents, such as SAP documentation in the Help Portal, along with three links to the most relevant sections of the documents.</P><P><STRONG>Navigational Pattern: </STRONG>Joule recommends relevant applications and facilitates seamless navigation to these applications – typically in response to a “Where can I…” question.</P><P><STRONG>Transactional Pattern: J</STRONG>oule offers insightful information about business objects. It also allows you to make updates to business data directly within Joule, eliminating the necessity of opening the corresponding application.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 1: Examples of each of the three interaction patterns for Joule: informational, navigational, and transactional, from SAP S/4HANA Cloud Public Edition (for early adopters). ALT Text: Three images of Joule are shown. On the left, the informational pattern shows that the user has typed “Can I configure a workflow for my purchase requisitions”. Below that, the eight-line written answer is shown, followed by a “Search results” selector and three top search results. In the middle, the navigational pattern, the user has typed “Where can I execute mass changes on my purchase requisition?”, below that, the reply from Joule “Here’s what I’ve found” is followed by a card containing three lines, each with an application name and an “Open” button. On the right the transactional pattern, the user has typed “Show Purchase Requisitions”, Joule responded with “Sure, here is what I found” and a card containing three lines, each with a PR number followed by an “Open” button." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141141iBE238FC295569D4D/image-size/large?v=v2&amp;px=999" role="button" title="01 Joule Patterns.jpg" alt="Figure 1: Examples of each of the three interaction patterns for Joule: informational, navigational, and transactional, from SAP S/4HANA Cloud Public Edition (for early adopters). ALT Text: Three images of Joule are shown. On the left, the informational pattern shows that the user has typed “Can I configure a workflow for my purchase requisitions”. Below that, the eight-line written answer is shown, followed by a “Search results” selector and three top search results. In the middle, the navigational pattern, the user has typed “Where can I execute mass changes on my purchase requisition?”, below that, the reply from Joule “Here’s what I’ve found” is followed by a card containing three lines, each with an application name and an “Open” button. On the right the transactional pattern, the user has typed “Show Purchase Requisitions”, Joule responded with “Sure, here is what I found” and a card containing three lines, each with a PR number followed by an “Open” button." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 1: Examples of each of the three interaction patterns for Joule: informational, navigational, and transactional, from SAP S/4HANA Cloud Public Edition (for early adopters). ALT Text: Three images of Joule are shown. On the left, the informational pattern shows that the user has typed “Can I configure a workflow for my purchase requisitions”. Below that, the eight-line written answer is shown, followed by a “Search results” selector and three top search results. In the middle, the navigational pattern, the user has typed “Where can I execute mass changes on my purchase requisition?”, below that, the reply from Joule “Here’s what I’ve found” is followed by a card containing three lines, each with an application name and an “Open” button. On the right the transactional pattern, the user has typed “Show Purchase Requisitions”, Joule responded with “Sure, here is what I found” and a card containing three lines, each with a PR number followed by an “Open” button.</span></span></P><H2 id="toc-hId-628070027"><SPAN>New: Informational Pattern for Customer Documents</SPAN></H2><P>We have now extended the informational pattern to allow customers of SAP SuccessFactors to upload company policy documents which can be queried via Joule. This means that users can use natural language to ask a question, such as “What’s the expense limit for business meals in Germany?”, and Joule will provide a concise summary from the customer policy document(s). Not only that: Joule will also provide links to the relevant documents. Think about how much time you can save that way! Figure 2 shows an example, and Video 1 shows an example from 0:57 to 1:30.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 2: Example of a user using Joule to query a customer expense policy document. ALT Text: The image shows the top part of the SuccessFactors home page with Joule as an overlay on the right. The user has typed in to the Joule chat “Can I use my private car for my business trip?”. Below that, Joule’s nine-line response is shown, followed by a link to the source document." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141145iB2FBC25D5060B731/image-size/large?v=v2&amp;px=999" role="button" title="02 Joule for custom documents (SuccessFactors - shadow).jpg" alt="Figure 2: Example of a user using Joule to query a customer expense policy document. ALT Text: The image shows the top part of the SuccessFactors home page with Joule as an overlay on the right. The user has typed in to the Joule chat “Can I use my private car for my business trip?”. Below that, Joule’s nine-line response is shown, followed by a link to the source document." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 2: Example of a user using Joule to query a customer expense policy document. ALT Text: The image shows the top part of the SuccessFactors home page with Joule as an overlay on the right. The user has typed in to the Joule chat “Can I use my private car for my business trip?”. Below that, Joule’s nine-line response is shown, followed by a link to the source document.</span></span></P><P data-unlink="true">Technically, the customer documents that have been uploaded are <A href="https://medium.com/@prajeeshprathap/understanding-grounding-llms-and-retrieval-augmented-generation-3a72c74a1d99" target="_self" rel="nofollow noopener noreferrer">grounded</A> into the underlying AI large language model, which means that we can use the power of generative AI to extract information from these documents without the risk of hallucinations.&nbsp;</P><P>You can find out more about this new Joule use case supported by SAP SuccessFactors, along with a large number of new transactional use cases in the What’s New Viewer for 1H2024:</P><UL><LI>SAP SuccessFactors Documentation: <SPAN><SPAN><A href="https://help.sap.com/docs/SAP_SUCCESSFACTORS_RELEASE_INFORMATION/8e0d540f96474717bbf18df51e54e522/3beeccbd1fcc492c87433648520fe7d3.html" target="_blank" rel="noopener noreferrer">New Use Cases Supported in Joule.</A></SPAN></SPAN></LI></UL><H2 id="toc-hId-431556522"><SPAN>Have a Look at How Joule Energizes You at Work</SPAN></H2><P>Joule, your copilot for working with SAP, is intended to give users a natural language based single entry point (in the web or on mobile) for all their applications and business data – complementing the UI-based single entry point in the web provided by SAP Start, and the UI-based mobile entry point provided by SAP Mobile Start.</P><P>As such, Joule will also support many of the AI interaction patterns I listed in the introduction above. Indeed, already today you can see these patterns in action in Video 1 below:</P><UL><LI>Summary of a business object (in this case a customer account summary, combining data from SAP Sales Cloud and SAP S/4HANA Cloud).</LI><LI>Summary of customer requirements from an email message.</LI><LI>Transactional pattern: interacting with SAP Intelligent Product Recommendation, to get a best-fit product for the customer request.</LI></UL><P>Informational pattern for customer documents: a query to the company expense policy about how much employees can spend on dinner for entertaining a customer</P><P><A href="https://www.sap.com/assetdetail/2024/05/946160f3-be7e-0010-bca6-c68f7e60039b.html" target="_self" rel="noopener noreferrer"><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Video 1: Joule in action for SAP Start, SAP Customer Experience and SAP SuccessFactors informational pattern for customer documents." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141146i696F3BD4121423AA/image-size/large?v=v2&amp;px=999" role="button" title="Video 01 - Joule.jpg" alt="Video 1: Joule in action for SAP Start, SAP Customer Experience and SAP SuccessFactors informational pattern for customer documents." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Video 1: Joule in action for SAP Start, SAP Customer Experience and SAP SuccessFactors informational pattern for customer documents.</span></span></A></P><P>Joule also supports developers building new applications and their UIs, you can see an example of this towards the end of the blog post.</P><P>Watch these videos to see more examples of Joule in action for SAP Customer Experience (CX) and SAP S/4HANA Cloud:</P><UL><LI>Video: <SPAN><A href="https://www.sap.com/assetdetail/2023/10/a24dbaed-937e-0010-bca6-c68f7e60039b.html" target="_blank" rel="noopener noreferrer">Generative AI for Intelligent CX Overview (2:37 minutes).</A></SPAN></LI><LI>Video: <A href="https://sapvideo.cfapps.eu10-004.hana.ondemand.com/?entry_id=1_uuimsrtg" target="_blank" rel="noopener nofollow noreferrer">SAP S/4HANA Cloud Public Edition 2408.1: Joule, the AI Copilot (1:05 minutes).</A></LI></UL><H2 id="toc-hId-235043017"><SPAN>Outlook</SPAN></H2><P>Here are some forward-looking statements about what we plan to deliver in the near future. As always, these are subject to change, but of course we hope to deliver as planned.</P><P>Towards the end of Q3/2024, we plan to make Joule generally available in SAP S/4HANA Cloud Public Edition, with the informational pattern available everywhere, and the other two patterns available for selected business areas.</P><P>Later this year, SAP Integrated Business Planning for Supply Chain and SAP Ariba Category Management plan to provide Joule integration.</P><P>Just as we have extended the informational pattern to support customer documents for SAP SuccessFactors, so we plan to provide this capability also for customer documents relevant to other products.</P><P>A major step forward planned for later this year is support for analytics in the transactional pattern, so that users can query analytics and get responses as charts. We also plan to incorporate GenAI into the major workflows of SAP Analytics Cloud – read more about this in:</P><UL><LI><SPAN><SPAN><A href="https://www.sap.com/germany/products/technology-platform/cloud-analytics/features/generative-ai.html" target="_blank" rel="noopener noreferrer">Generative AI for planning and analytics – statement of direction.</A></SPAN></SPAN></LI></UL><P>So far Joule is only available in English. Later this year we plan to support further languages, including French, German, Spanish and Portuguese.</P><P>For more details, have a look at the road map for Joule in the SAP Road Map Explorer:</P><UL><LI><SPAN><SPAN><A href="https://roadmaps.sap.com/board?q=Joule&amp;range=CURRENT-LAST#Q3%202024" target="_blank" rel="noopener noreferrer">Joule Road Map</A></SPAN></SPAN></LI></UL><H1 id="toc-hId--90553207"><SPAN>Triggering Generative AI Actions in the Application UI</SPAN></H1><P>A simple yet powerful way of helping users achieve better outcomes is to embed a generative AI action within an application UI, so that the system can for example generate a proposal based on initial data entered into the UI or already in the system. We can distinguish between the following kinds of actions:</P><UL><LI>Creating a written summary of existing business data, be it from an incoming email or data in the system, such as a customer account, a sales order or financial data.</LI><LI>Creating a proposal for new or updated business data or business objects, such as a performance goal for an employee, or a procurement category segmentation.</LI></UL><H2 id="toc-hId--157983993"><SPAN>Creating a Summary of Business Data</SPAN></H2><P>I’d like to show you an example from SAP Customer Experience (CX) for creating an account summary, and two examples available now for Beta testing with SAP S/4HANA Cloud Public Edition: summarization of object pages, and financial business insights.</P><H3 id="toc-hId--225414779"><SPAN>SAP Customer Experience Example</SPAN></H3><P>SAP Customer Experience offers users various AI capabilities for working more effectively, one of these being summarizing business data, for example summarizing an incoming email for SAP Service Cloud. This capability is also embedded in Joule. You can see examples of this, and more, in this video (the summaries are from 0:25 to 0:50):</P><UL><LI>Video: <SPAN><SPAN><A href="https://www.sap.com/assetdetail/2023/10/a24dbaed-937e-0010-bca6-c68f7e60039b.html" target="_blank" rel="noopener noreferrer">Generative AI for Intelligent CX Overview (2:37 minutes).</A></SPAN></SPAN></LI></UL><H3 id="toc-hId--421928284"><SPAN>SAP S/4HANA Cloud Public Edition Examples</SPAN></H3><P>The following two examples are currently available as a Beta release.</P><H4 id="toc-hId--489359070"><SPAN>Summarizing Object Pages</SPAN></H4><P>For all object pages which have been built with SAP Fiori elements, users can ask the system to summarize the business object. For example, if a manager sends an email asking for a summary of a sales order, the internal sales representative can use this feature to create a written summary, edit it as needed, and send it to their manager, saving a lot of time. Figure 3 shows what this looks like; you can also see it in action with this video:</P><UL><LI>Video<STRONG><STRONG>: </STRONG></STRONG><A href="https://sapvideo.cfapps.eu10-004.hana.ondemand.com/?entry_id=1_qdjjbhv2" target="_blank" rel="noopener nofollow noreferrer">AI-assisted Smart Summarization of a Sales Order (1:10 minutes).</A></LI></UL><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 3: Smart summarization of a sales order in SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a popover above a sales order UI. The popover contains text with a title “Order Summary” and sections “Introduction”, “Date and Location” and “Key Highlights”. The bottom right of the screen has a “Copy All” button." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141365i057218FB64553682/image-size/large?v=v2&amp;px=999" role="button" title="03 S4H Sales Order Summary.jpg" alt="Figure 3: Smart summarization of a sales order in SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a popover above a sales order UI. The popover contains text with a title “Order Summary” and sections “Introduction”, “Date and Location” and “Key Highlights”. The bottom right of the screen has a “Copy All” button." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 3: Smart summarization of a sales order in SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a popover above a sales order UI. The popover contains text with a title “Order Summary” and sections “Introduction”, “Date and Location” and “Key Highlights”. The bottom right of the screen has a “Copy All” button.</span></span></P><H4 id="toc-hId--1183589670"><SPAN>AI-Assisted Financial Business Insights</SPAN></H4><P>Interpreting financial data can be challenging, and explaining them in an easy-to-understand way even more so. Hence, we provide AI-Assisted Financial Business Insights, which make this task much easier. Figure 4 shows an example of how the system will provide a summary report of the financial data. You can see it in action here:</P><UL><LI>Video: <SPAN><SPAN><A href="https://sapvideo.cfapps.eu10-004.hana.ondemand.com/?entry_id=1_93bm2ujt" target="_blank" rel="noopener nofollow noreferrer">SAP S/4HANA Public Cloud Edition AI-Assisted Financial Business Insights (1:20 minutes).</A></SPAN></SPAN></LI></UL><P><EM><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 4: Summarizing financial reporting data in easy-to-understand language as provided by&nbsp; SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a table on the left with 27 lines and 5 columns of cost center information, and on the right a comprehensive summary with a heading and five paragraphs. The screenshot is overlaid top left by an explanation box with the text “Increase financial reporting efficiency with quick actions supported by generative AI”, and at the bottom with an explanation box with the text “the company seems to have increased costs in 2024 compared to 2023”." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141362i945FD07C5FF47303/image-size/large?v=v2&amp;px=999" role="button" title="04 S4H Financial Insights.jpg" alt="Figure 4: Summarizing financial reporting data in easy-to-understand language as provided by&nbsp; SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a table on the left with 27 lines and 5 columns of cost center information, and on the right a comprehensive summary with a heading and five paragraphs. The screenshot is overlaid top left by an explanation box with the text “Increase financial reporting efficiency with quick actions supported by generative AI”, and at the bottom with an explanation box with the text “the company seems to have increased costs in 2024 compared to 2023”." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 4: Summarizing financial reporting data in easy-to-understand language as provided by&nbsp; SAP S/4HANA Cloud Public Edition, available as a Beta release. ALT Text: the image shows a table on the left with 27 lines and 5 columns of cost center information, and on the right a comprehensive summary with a heading and five paragraphs. The screenshot is overlaid top left by an explanation box with the text “Increase financial reporting efficiency with quick actions supported by generative AI”, and at the bottom with an explanation box with the text “the company seems to have increased costs in 2024 compared to 2023”.</span></span></EM></P><H2 id="toc-hId--793297161"><SPAN>Generating proposals for business data</SPAN></H2><P>Let me show two examples for this pattern available today, from SAP Success Factors and from SAP Ariba. Note that SAP Customer Experience also offers GenAI support for creating business data, as already mentioned in the previous section.</P><H3 id="toc-hId--1283213673"><SPAN>SAP SuccessFactors Example</SPAN></H3><P>SAP SuccessFactors now supports managers who need to formulate performance goals, by providing a “Generate” with AI action. Managers can provide a brief description of the goal, and SAP SuccessFactors not only generates a longer description, it also makes proposals for milestones, with a suitable task description along with start and end dates. Of course, goals need to be well thought out by managers; nevertheless, having an initial starting point, especially with a break-down of potential goals on a timeline, can be very helpful, especially for less experienced managers. Figure 5 shows an example which showcases our AI button with the AI icon (to the left of the “Generate” text in the button).</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 5: Example from SAP SuccessFactors of an AI action for triggering generative AI to help managers formulate performance goals, along with suitable milestones. ALT Text: an animation showing how a user can enter the text “AI strategy for our production plant by Q4” and then click on the “Generate” button, which features the AI icon on the left. The result is a form with a goal description and metrics, followed by a table with proposed milestones and their start and end dates." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141366i8D9A81CAD505ABF2/image-size/large?v=v2&amp;px=999" role="button" title="05 SuccessFactors - Create Performance Goal (5fps).gif" alt="Figure 5: Example from SAP SuccessFactors of an AI action for triggering generative AI to help managers formulate performance goals, along with suitable milestones. ALT Text: an animation showing how a user can enter the text “AI strategy for our production plant by Q4” and then click on the “Generate” button, which features the AI icon on the left. The result is a form with a goal description and metrics, followed by a table with proposed milestones and their start and end dates." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 5: Example from SAP SuccessFactors of an AI action for triggering generative AI to help managers formulate performance goals, along with suitable milestones. ALT Text: an animation showing how a user can enter the text “AI strategy for our production plant by Q4” and then click on the “Generate” button, which features the AI icon on the left. The result is a form with a goal description and metrics, followed by a table with proposed milestones and their start and end dates.</span></span></P><H3 id="toc-hId--1479727178"><SPAN>SAP Ariba Example</SPAN></H3><P>SAP Ariba Category Management also provides an additional AI action for creating a procurement category segmentation from scratch. As in the previous example, a <EM>Generate button with the AI icon is used, see Figure 6.</EM></P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 6: Example from SAP Ariba Category Management of an AI action for triggering generative AI to help create a category segmentation. ALT Text: an animation which starts with a screen with an illustration and text “No Segmentation to Display”. The user clicks on a button which features the AI icon before the text “Generate”, and the result is a proposed category segmentation chart on the left with a text summary on the right." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141368iC8761FDAD864FF69/image-size/large?v=v2&amp;px=999" role="button" title="06 Embedded AI Procurement Category Management.gif" alt="Figure 6: Example from SAP Ariba Category Management of an AI action for triggering generative AI to help create a category segmentation. ALT Text: an animation which starts with a screen with an illustration and text “No Segmentation to Display”. The user clicks on a button which features the AI icon before the text “Generate”, and the result is a proposed category segmentation chart on the left with a text summary on the right." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 6: Example from SAP Ariba Category Management of an AI action for triggering generative AI to help create a category segmentation. ALT Text: an animation which starts with a screen with an illustration and text “No Segmentation to Display”. The user clicks on a button which features the AI icon before the text “Generate”, and the result is a proposed category segmentation chart on the left with a text summary on the right.</span></span></P><H1 id="toc-hId--1089434669"><SPAN>Generative AI Prompt within Application UI</SPAN></H1><P>We can go a step further than the simple AI action by letting users use natural language to interact directly with the application UI. We do this by enabling them to enter a prompt directly in the UI.</P><P>Since most users will not be familiar with formulating powerful GenAI prompts (prompt engineering), we use this simple input field in cases where it is obvious to the user what kind of input is expected.</P><P>The first example I’d like to share is the powerful “Just ask” feature now generally available with SAP Analytics Cloud. You can use natural language to create a query, and SAP Analytics Cloud uses AI to interpret the text as well as to decide on the most appropriate chart to use to visualize the result. Figure 7 shows an example.</P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 7: “Just ask” in SAP Analytics Cloud. ALT Text: the user has entered “gross margin product”, and the appropriate chart representation (a horizontal bar chart) has been used to display the gross margin per product on the left. On the right you see that the system gives suggestions for suitable texts in buttons, which when clicked enter the text displayed in the button. The first such proposal shown is “Gross Margin per Category”. There is also a “Save question” section with a button with the text “gross margin product”." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141369iC0EFA835DF7AF6F5/image-size/large?v=v2&amp;px=999" role="button" title="07 Just Ask (Gross Margin Product) cropped.png" alt="Figure 7: “Just ask” in SAP Analytics Cloud. ALT Text: the user has entered “gross margin product”, and the appropriate chart representation (a horizontal bar chart) has been used to display the gross margin per product on the left. On the right you see that the system gives suggestions for suitable texts in buttons, which when clicked enter the text displayed in the button. The first such proposal shown is “Gross Margin per Category”. There is also a “Save question” section with a button with the text “gross margin product”." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 7: “Just ask” in SAP Analytics Cloud. ALT Text: the user has entered “gross margin product”, and the appropriate chart representation (a horizontal bar chart) has been used to display the gross margin per product on the left. On the right you see that the system gives suggestions for suitable texts in buttons, which when clicked enter the text displayed in the button. The first such proposal shown is “Gross Margin per Category”. There is also a “Save question” section with a button with the text “gross margin product”.</span></span><BR /><P>The next example is now available as a Beta in SAP S/4HANA Cloud Public Edition, allowing users to use natural language to filter lists, as an alternative to using the individual filter fields in the filter bar. The AI icon in the “Go” button indicates to users that AI is behind this functionality. Figure 8 shows an example for sales orders.</P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><EM><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 8: Using natural language to filter a list of sales orders in SAP S/4HANA Cloud Public Edition (available as a Beta). The user has entered the text “Show me all open sales orders for December 2023”, the list only shows entries matching this query. ALT Text: the image shows a list report. At the top there is a toggle for the filter mode, with the options “Classic” and “SAP Business AI”. Below that, a disclaimer text, that generated content may not always be accurate. Below that, the text field for the query, to its right a button which features the AI icon before the text “Go”. Below that, the result list with 11 lines and 8 columns." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141371i097EB699E8B7EE22/image-size/large?v=v2&amp;px=999" role="button" title="08 NLP for S4H Sales Order filtering.jpeg" alt="Figure 8: Using natural language to filter a list of sales orders in SAP S/4HANA Cloud Public Edition (available as a Beta). The user has entered the text “Show me all open sales orders for December 2023”, the list only shows entries matching this query. ALT Text: the image shows a list report. At the top there is a toggle for the filter mode, with the options “Classic” and “SAP Business AI”. Below that, a disclaimer text, that generated content may not always be accurate. Below that, the text field for the query, to its right a button which features the AI icon before the text “Go”. Below that, the result list with 11 lines and 8 columns." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 8: Using natural language to filter a list of sales orders in SAP S/4HANA Cloud Public Edition (available as a Beta). The user has entered the text “Show me all open sales orders for December 2023”, the list only shows entries matching this query. ALT Text: the image shows a list report. At the top there is a toggle for the filter mode, with the options “Classic” and “SAP Business AI”. Below that, a disclaimer text, that generated content may not always be accurate. Below that, the text field for the query, to its right a button which features the AI icon before the text “Go”. Below that, the result list with 11 lines and 8 columns.</span></span></EM></DIV><DIV class=""><SPAN>Technically, this feature is provided by applications built with SAP Fiori elements using OData V4. You can watch an example here:</SPAN><UL><LI>Video: <A href="https://sapvideo.cfapps.eu10-004.hana.ondemand.com/?entry_id=1_qzm99ivs" target="_blank" rel="noopener nofollow noreferrer">SAP S/4HANA Cloud Public Edition, AI-Assisted Easy Filter (0:51 minutes).</A></LI></UL><H1 id="toc-hId--1285948174"><SPAN>Guided AI Prompts</SPAN></H1><P>Creating good text proposals with Generative AI requires good prompts – something which most users of business systems have no or little expertise in. Hence, we have come up with guided AI prompts, which give users a UI element that allows them to tweak the kind of outcome they want, so that users don’t have to worry about what prompt text to enter to get the desired result.</P><H2 id="toc-hId--1775864686"><SPAN>SAP Customer Experience Example</SPAN></H2><P>Figure 9 shows how SAP Customer Experience enables service and support users to easily create response emails, in this case with sliders to influence the style, tone and length. As you can see, users don’t need to know exactly what kind of generative AI prompt text is needed, they can simply adjust the sliders to get the desired outcome – which they can of course further edit if needed.</P><DIV class=""><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 9: Guided AI Prompt from SAP Customer Experience, showing the sliders for choosing the style, tone and length of the email on the left and a possible generated draft email text on the right. ALT Text: the slider and draft mail are visualized as a popover. Below the sliders there is a button which features the AI icon before the text “Generate Draft”. The popover has a language selector top right, with English now chosen, and “Apply” and “Cancel” buttons bottom right." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141372i83D129246075B0B4/image-size/large?v=v2&amp;px=999" role="button" title="09 CX AI Guided Prompt.jpg" alt="Figure 9: Guided AI Prompt from SAP Customer Experience, showing the sliders for choosing the style, tone and length of the email on the left and a possible generated draft email text on the right. ALT Text: the slider and draft mail are visualized as a popover. Below the sliders there is a button which features the AI icon before the text “Generate Draft”. The popover has a language selector top right, with English now chosen, and “Apply” and “Cancel” buttons bottom right." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 9: Guided AI Prompt from SAP Customer Experience, showing the sliders for choosing the style, tone and length of the email on the left and a possible generated draft email text on the right. ALT Text: the slider and draft mail are visualized as a popover. Below the sliders there is a button which features the AI icon before the text “Generate Draft”. The popover has a language selector top right, with English now chosen, and “Apply” and “Cancel” buttons bottom right.</span></span><BR /><DIV class=""><DIV class=""><DIV class=""><H2 id="toc-hId--1972378191"><SPAN>SAP SuccessFactors Writing Assistant</SPAN></H2><P>Managers often need to write text, be it formulating goals or giving feedback – but not everyone is a gifted writer! SAP SuccessFactors has found a novel way for generative AI to assist users in their writing. Figure 10 shows the approach, with an example where a manager is giving feedback to an employee. The “Give feedback” UI already provides good usability, by helping the manager formulate the main aspects (what went well?, what could I improve on?, any additional comments).</P><P>The new Writing Assistant takes this to the next level: by marking the text, a context menu appears, as you can see on the left in Figure 10; clicking on the AI icon brings the drop-down menu shown in the middle, where the manager can choose from various options to adapt the text with generative AI. On the right you see how the Writing Assistant shows you the original text and the suggested new text – in this case improving the original text, in particular by replacing “…they can be difficult” with “…even though they can sometimes be challenging”.</P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><BR /><H1 id="toc-hId--1875488689"><SPAN>User Experience Improvements in Selected Products</SPAN></H1><P>This section gives updates on our Web Entry Point, SAP SuccessFactors, and SAP S/4HANA Cloud Public Edition. I'll keep this section fairly short, and mainly point you to sources where you can find the details.</P><H2 id="toc-hId-1929562095"><SPAN>Web Entry Point: SAP Start, SAP Build Work Zone, SAP Task Center</SPAN></H2><P>SAP Start is now integrated with SAP Fieldglass, which provides two insight cards. Also, SAP SuccessFactors has provided three additional insight cards for SAP Start – read more here:</P><UL><LI><SPAN><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/what-s-new-for-sap-start-may-2024/ba-p/13689781" target="_blank">What’s New for SAP Start – May 2024</A></SPAN></SPAN></LI></UL><P>The SAP Task Center now provides APIs for integrating tasks from 3rd-party products. Read more about it here:</P><UL><LI><SPAN><SPAN><A href="https://community.sap.com/t5/sap-builders-blog-posts/sap-task-center-s-new-3rd-party-integration/ba-p/13738769" target="_blank">SAP Task Center’s New 3rd Party Integration</A></SPAN></SPAN></LI></UL><P>SAP Build Work Zone, advanced edition also has a number of enhancements:</P><UL><LI><SPAN><SPAN><A href="https://community.sap.com/t5/sap-builders-blog-posts/what-s-new-in-sap-build-q2-2024-edition/ba-p/13736435" target="_blank">What’s New in SAP Build – Q2 2024 Edition</A></SPAN></SPAN></LI></UL><H2 id="toc-hId-1901232281"><SPAN>SAP SuccessFactors</SPAN></H2><P>The 1H2024 release comes with a large number of UX innovations across the whole portfolio. To get the complete picture, have a look at these two blog posts:</P><UL><LI><SPAN><A href="https://community.sap.com/t5/human-capital-management-blogs-by-sap/first-half-2024-release-what-s-new-in-sap-successfactors-hcm/ba-p/13678744" target="_blank">First Half 2024 Release: What’s New in SAP SuccessFactors HCM.</A></SPAN></LI><LI><SPAN><SPAN><A href="https://community.sap.com/t5/human-capital-management-blogs-by-sap/first-half-2024-release-what-s-new-in-sap-successfactors-mobile/ba-p/13733471" target="_blank">First Half 2024 Release: What’s New in SAP SuccessFactors Mobile.</A></SPAN></SPAN></LI></UL><P>Here, I would like to highlight the new design for the organizational chart, along with the new user experience for the people profile, with a brand new public view of your profile (public within your company) consisting of <EM>Profile Preview </EM>and&nbsp;<EM><EM>Spotlight, </EM></EM>along with more intuitive user interactions.</P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 11: The new org chart in SAP SuccessFactors. ALT Text: The image shows an org chart, with each employee summarized in a box with their image on the left and their name and job role on the right. The image has a manager “Christine Dolan” at the top, below which another manager “Charles Braun” is shown, with his direct and indirect reports shown underneath: direct reports linked with and surrounded by a solid line, dotted-line ones linked with and surrounded by a dotted line." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141375i22C5B6A48CDFF1D7/image-size/large?v=v2&amp;px=999" role="button" title="11 SuccessFactors Org Chart (cropped, shadow).jpg" alt="Figure 11: The new org chart in SAP SuccessFactors. ALT Text: The image shows an org chart, with each employee summarized in a box with their image on the left and their name and job role on the right. The image has a manager “Christine Dolan” at the top, below which another manager “Charles Braun” is shown, with his direct and indirect reports shown underneath: direct reports linked with and surrounded by a solid line, dotted-line ones linked with and surrounded by a dotted line." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 11: The new org chart in SAP SuccessFactors. ALT Text: The image shows an org chart, with each employee summarized in a box with their image on the left and their name and job role on the right. The image has a manager “Christine Dolan” at the top, below which another manager “Charles Braun” is shown, with his direct and indirect reports shown underneath: direct reports linked with and surrounded by a solid line, dotted-line ones linked with and surrounded by a dotted line.</span></span></P><P>Employees can build and represent their personal brand by showcasing skills and competencies, mentoring and target roles, and other relevant information sourced from SAP SuccessFactors solutions.</P><P>Colleagues who look at the org chart can get a quick preview of a user’s profile with the <EM>Profile Preview, </EM>shown in Figure 12, and get more information using the <EM>Spotlight</EM>, shown in Figure 13.</P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 12: SAP SuccessFactors &quot;Profile Preview&quot;, shown on the right. ALT Text: The image shows the preview as a popover on the right of the screen, with a photo of Aanya Singh and a “Show Spotlight” button next to it along with a button for opening the Org Chart. Below that, her role and organization are shown, along with some text she provided about herself, a photo, name and organization of her direct manager, and a link to “All Actions”." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141380iF978268DF26C933C/image-size/large?v=v2&amp;px=999" role="button" title="12 SuccessFactors People Profile Preview.jpg" alt="Figure 12: SAP SuccessFactors &quot;Profile Preview&quot;, shown on the right. ALT Text: The image shows the preview as a popover on the right of the screen, with a photo of Aanya Singh and a “Show Spotlight” button next to it along with a button for opening the Org Chart. Below that, her role and organization are shown, along with some text she provided about herself, a photo, name and organization of her direct manager, and a link to “All Actions”." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 12: SAP SuccessFactors "Profile Preview", shown on the right. ALT Text: The image shows the preview as a popover on the right of the screen, with a photo of Aanya Singh and a “Show Spotlight” button next to it along with a button for opening the Org Chart. Below that, her role and organization are shown, along with some text she provided about herself, a photo, name and organization of her direct manager, and a link to “All Actions”.</span></span></P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 13: SAP SuccessFactors &quot;Spotlight&quot;. ALT Text: the image shows the Profile Preview of Aanya Singh on the left, but with the button “Hide Spotlight” instead of “Show Spotlight”. On the right, the rest of the screen shows her skills, competencies, who she is mentoring, her organization, an about me video, upcoming absence, work experience, reporting line, target roles and badges for good performance." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141381iD4BA3D19DEC86D61/image-size/large?v=v2&amp;px=999" role="button" title="13 SuccessFactors People Profile - Spotlight View.jpg" alt="Figure 13: SAP SuccessFactors &quot;Spotlight&quot;. ALT Text: the image shows the Profile Preview of Aanya Singh on the left, but with the button “Hide Spotlight” instead of “Show Spotlight”. On the right, the rest of the screen shows her skills, competencies, who she is mentoring, her organization, an about me video, upcoming absence, work experience, reporting line, target roles and badges for good performance." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 13: SAP SuccessFactors "Spotlight". ALT Text: the image shows the Profile Preview of Aanya Singh on the left, but with the button “Hide Spotlight” instead of “Show Spotlight”. On the right, the rest of the screen shows her skills, competencies, who she is mentoring, her organization, an about me video, upcoming absence, work experience, reporting line, target roles and badges for good performance.</span></span></P><H2 id="toc-hId-1704718776"><SPAN>SAP S/4HANA Cloud Public Edition 2408</SPAN></H2><P>The latest release of SAP S/4HANA Cloud Public Edition comes with a large number of new AI-enabled user experience enhancements, such as the smart summarization and easy filter, which I explained earlier. To get an overview of all of these, read this summary, or watch Arpan Shah, Head of Product Management for SAP S/4HANA Cloud Public Edition, introduce them all at this year’s SAP Sapphire conference:</P><UL><LI>Summary: <SPAN><A href="https://news.sap.com/2024/06/unlock-ai-potential-sap-s4hana-cloud-public-edition/" target="_blank" rel="noopener noreferrer">Unlock Tomorrow’s Potential with SAP S/4HANA Cloud Public Edition</A></SPAN></LI><LI>SAP Sapphire Video: <SPAN><A href="https://www.sap.com/events/sapphire/virtual/flow/sap/s24/catalog/page/catalog/session/1713860797612001MOwz" target="_blank" rel="noopener noreferrer">ERP127 – SAP S/4HANA Cloud Public Edition: Find out what’s next<SPAN>.</SPAN></A></SPAN></LI><LI>Blog post (look at the “Modern and Intelligent Experience” section): <A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/highlights-of-the-sap-s-4hana-cloud-public-edition-2408-release/ba-p/13769906" target="_blank">Highlights of the SAP S/4HANA Cloud Public Edition 2408 Release.</A></LI></UL><P>As I mentioned in the introduction, AI is only a part of the overall interaction a user has with an application. I’d like to highlight these new innovations in the user experience for SAP S/4HANA Cloud Public Edition:</P><UL><LI>Spaces and Pages replace the classical SAP Fiori launchpad group-based visualization, so all customers are automatically enabled to use My Home.</LI><LI>My Home: <EM>To-Dos </EM>task cards show details, and AI makes suggestions for a users’ favorites (see Figure 14 below).</LI><LI>Collaborative ERP: further Microsoft integration with Adaptive card-based Loop components and integration with Microsoft Copilot as a Beta release – see below for more information.</LI><LI>Change Management: we are introducing a toggle to allow users to switch from the existing version of an app to a new version, starting with selected apps.</LI></UL><H3 id="toc-hId-1214802264"><SPAN>My Home</SPAN></H3><P>The <EM>To-Dos </EM>task cards offer action buttons, for example to approve or reject items. Often, this requires some key information about the item, for example the name of the product and the value for a purchase requisition. These details are now visualized directly in the task cards, as you can see in Figure 14.</P><P>Another useful new feature is AI recommendations for applications: as you can see in Figure 14 in the Apps section of My Home, a new tab has been introduced which uses AI to create a list of applications which are recommended to the user to add to their Favorites.</P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 14: New features of My Home in SAP S/4HANA Cloud Public Edition: the To-Dos task cards show details, and AI makes recommendations for applications which are likely to be relevant to the user. ALT Text: the image shows three To-Do cards at the top, each with header text “Approve Purchase Requisition” followed by the number, below that the name of the requestor, item description, net value, requisition date and requestor. Each card has an “Approve” and “Reject” button. Below that, the Apps section has a new tab “Recommended” with an information banner below it explaining that “Here you can see applications that are recommended to you by SAP Business AI. You can choose to disable this tab using the settings”. Below that, two rows of five apps with their icons are shown. The bottom of the image shows parts of the News (on the left) and Pages (on the right) sections." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141382iE19C082A270BC170/image-size/large?v=v2&amp;px=999" role="button" title="14 S4H 2408 My Home - Task details, AI recommended apps.jpg" alt="Figure 14: New features of My Home in SAP S/4HANA Cloud Public Edition: the To-Dos task cards show details, and AI makes recommendations for applications which are likely to be relevant to the user. ALT Text: the image shows three To-Do cards at the top, each with header text “Approve Purchase Requisition” followed by the number, below that the name of the requestor, item description, net value, requisition date and requestor. Each card has an “Approve” and “Reject” button. Below that, the Apps section has a new tab “Recommended” with an information banner below it explaining that “Here you can see applications that are recommended to you by SAP Business AI. You can choose to disable this tab using the settings”. Below that, two rows of five apps with their icons are shown. The bottom of the image shows parts of the News (on the left) and Pages (on the right) sections." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 14: New features of My Home in SAP S/4HANA Cloud Public Edition: the To-Dos task cards show details, and AI makes recommendations for applications which are likely to be relevant to the user. ALT Text: the image shows three To-Do cards at the top, each with header text “Approve Purchase Requisition” followed by the number, below that the name of the requestor, item description, net value, requisition date and requestor. Each card has an “Approve” and “Reject” button. Below that, the Apps section has a new tab “Recommended” with an information banner below it explaining that “Here you can see applications that are recommended to you by SAP Business AI. You can choose to disable this tab using the settings”. Below that, two rows of five apps with their icons are shown. The bottom of the image shows parts of the News (on the left) and Pages (on the right) sections.</span></span></P><P>As well as the above, My Home now provides:</P><UL><LI><EM>To-Dos </EM>now also shows custom Situations, created using the extended Situation Handling framework, in addition to the standard situations delivered by SAP.</LI><LI>Intelligent generation of pre-delivered cards for new cloud customers.</LI><LI>Drag &amp; drop is now enabled in the insights section, so you can directly rearrange your tiles and cards.</LI><LI>Information about deprecated apps.</LI></UL><H3 id="toc-hId-1018288759"><SPAN>Collaboration with Microsoft Copilot and Microsoft Loop Components</SPAN></H3><P>We already enable users to collaborate via Microsoft Teams, embedding applications in chats or as tabs in Teams channels. We are taking this to the next level, available for Beta testing with the 2408 release, by:</P><UL><LI>Informing users about to-dos via notifications in Microsoft Teams;</LI><LI>Enabling embedding of interactive cards with information and actions from SAP S/4HANA Cloud Public Edition directly into Microsoft Teams, Outlook and Copilot. The data and actions are only shown to users with the necessary authorizations in SAP S/4HANA Cloud Public Edition. Technically this is done via adaptive card-based Loop component; Figures 16 and 17 show examples.</LI><LI>Even more powerful: we have started integrating Microsoft Copilot with Joule, combining enterprise data residing in SAP with contextual knowledge from Microsoft 365, including Microsoft Teams, Microsoft Outlook, Microsoft Word, and more, helping to deliver richer insights for better decision-making.</LI></UL><P>Figures 15 and 16 show an example of integration with Microsoft Copilot and Microsoft Outlook. Figure 15 shows the response to Alice’s request to Copilot for details of a sales order, where you can see the written summary along with the adaptive card containing details, links and action buttons. Users can easily copy these adaptive cards into an Outlook e-mail or a Teams chat, using the copy button shown in Figure 15.</P><P>Figure 16 shows what it looks like if you receive an email containing an adaptive card – the example shows Frank’s inbox, with the e-mail that Alice sent him by copying the adaptive card shown in Figure 15. Frank can see the card with the details, links and action buttons.</P><P>To see it in action, watch this:</P><UL><LI>Video: <SPAN><SPAN><A href="https://sapvideo.cfapps.eu10-004.hana.ondemand.com/?entry_id=1_9lmrxpww" target="_blank" rel="noopener nofollow noreferrer">Microsoft Copilot Integration for SAP S/4HANA Cloud Public Edition (2:25 minutes).</A></SPAN></SPAN></LI></UL><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 15: An example of how a user (Alice) can use Microsoft Copilot to interact with SAP S/4HANA Cloud Public Edition. The image shows a summary of a sales order, with a card containing information about the sales order, including the action button “Remove Billing Block”." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141383iEEEFF7CF0177616E/image-size/large?v=v2&amp;px=999" role="button" title="15 Microsoft Copilot Integration for S4H.png" alt="Figure 15: An example of how a user (Alice) can use Microsoft Copilot to interact with SAP S/4HANA Cloud Public Edition. The image shows a summary of a sales order, with a card containing information about the sales order, including the action button “Remove Billing Block”." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 15: An example of how a user (Alice) can use Microsoft Copilot to interact with SAP S/4HANA Cloud Public Edition. The image shows a summary of a sales order, with a card containing information about the sales order, including the action button “Remove Billing Block”.</span></span></P><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 16: An example of an adaptive card embedded in an Outlook email. The user Frank received an email from Alice requesting that he remove the billing block. ALT Text: the email contains text “Hey Frank, can you please help to get this sales order processed asap. Please remove the block!”, followed by a long URL to access the sales order, and the adaptive card with the heading “SAP S/4HANA Cloud”, the sales order number as a hyperlink, sales order details and two action buttons at the bottom “Set Billing Block” and “Remove Billing Block”." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141389iB7896135B807DE0B/image-size/large?v=v2&amp;px=999" role="button" title="16 Microsoft Adaptive Loop Card from Copilot in Outlook for S4H.png" alt="Figure 16: An example of an adaptive card embedded in an Outlook email. The user Frank received an email from Alice requesting that he remove the billing block. ALT Text: the email contains text “Hey Frank, can you please help to get this sales order processed asap. Please remove the block!”, followed by a long URL to access the sales order, and the adaptive card with the heading “SAP S/4HANA Cloud”, the sales order number as a hyperlink, sales order details and two action buttons at the bottom “Set Billing Block” and “Remove Billing Block”." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 16: An example of an adaptive card embedded in an Outlook email. The user Frank received an email from Alice requesting that he remove the billing block. ALT Text: the email contains text “Hey Frank, can you please help to get this sales order processed asap. Please remove the block!”, followed by a long URL to access the sales order, and the adaptive card with the heading “SAP S/4HANA Cloud”, the sales order number as a hyperlink, sales order details and two action buttons at the bottom “Set Billing Block” and “Remove Billing Block”.</span></span></P><P>If you are interested in trying this out via the Beta testing program, <SPAN><A href="https://influence.sap.com/sap/ino/#campaign/3703" target="_blank" rel="noopener noreferrer">you can register here.</A></SPAN></P><P>&nbsp;</P><H1 id="toc-hId-1408581268"><SPAN>UI Technology Innovations</SPAN></H1><P data-unlink="true">Before showing you the latest innovations, I would like to introduce the new <SPAN><A href="https://help.sap.com/docs/sap-btp-guidance-framework/sap-application-extension-methodology/sap-application-extension-methodology-overview?locale=en-US" target="_self" rel="noopener noreferrer">SAP Application Extension Methodology</A>, and in particular the&nbsp;<A href="https://help.sap.com/docs/sap-btp-guidance-framework/extension-architecture-guide/what-is-extension-architecture-guide" target="_self" rel="noopener noreferrer">Extension Architecture Guide</A>, which is for enterprise architects and solution architects that are already familiar with SAP's extensibility concepts and are seeking comprehensive decision-making guidance with an emphasis on the SAP Business Technology Platform. The section <A href="https://help.sap.com/docs/sap-btp-guidance-framework/extension-architecture-guide/presentation-tier-guidance" target="_self" rel="noopener noreferrer">Presentation Tier Guidance</A> summarizes SAP’s guidance for the extension task&nbsp;<STRONG>"create custom user interface (UI)"</STRONG>,&nbsp;which addresses the need to develop a new custom UI, tailored to meet specific business requirements.&nbsp;</SPAN></P><P>This year, we have invested heavily in supporting developer extensibility for SAP S/4HANA Cloud Public Edition. Learn more about it here:</P><UL><LI>Blog post: <SPAN><A href="https://community.sap.com/t5/enterprise-resource-planning-blogs-by-sap/extending-sap-s-4hana-cloud-public-edition-using-sapui5-adaptation-projects/ba-p/13607813" target="_blank">Extending SAP S/4HANA Cloud Public Edition using SAPUI5 adaptation projects.</A></SPAN></LI><LI>Documentation: <SPAN><A href="https://help.sap.com/docs/bas/developing-sap-fiori-app-in-sap-business-application-studio/extending-sap-fiori-application-for-s-4hana-cloud" target="_blank" rel="noopener noreferrer">Extending an SAP Fiori Application for S/4HANA Cloud Public Edition and SAP BTP, ABAP Environment.</A></SPAN></LI><LI>Documentation: <SPAN><SPAN><A href="https://help.sap.com/docs/UI5_FLEXIBILITY/430e2c1a4ff241bc8162df4bf51e0730/e36d19b3d24f47199a9a82d3faa508c3.html?language=en-US" target="_blank" rel="noopener noreferrer">SAPUI5 Flexibility</A>&nbsp;(c</SPAN></SPAN>overing end-user personalization, key-user personalization and developer adaptation).</LI></UL><H2 id="toc-hId-918664756"><SPAN>AI-enabled UI Development</SPAN></H2><P>SAP Build Code brings AI-enablement for application developers on SAP Business Technology Platform, giving you:</P><UL><LI>Guided development to quickly build SAP Fiori apps: web, mobile and full-stack.</LI><LI>Built-in guidance and SAP best practices for developers to create enterprise-grade applications.</LI><LI>Visual tools and a programming language of your choice: JavaScript, TypeScript, Java and more.</LI></UL><P>With generative AI in SAP Build Code, you get the following:</P><UL><LI>Joule auto-generates app logic and data models.</LI><LI>Automated unit test coverage.</LI><LI>Contextual application logic code generation based on prompts.</LI><LI>Automatic sample data generation.</LI></UL><P data-unlink="true">SAP Fiori tools go even further, allowing you to describe the list report and object page application you would like to create, and then automatically generating the data model&nbsp;, CDS views, OData services as well as the SAP Fiori elements UI. Figure 17 shows how you can use natural language to describe the application you want to build, in this case taking the example available in the documentation and copying it into Joule. Figure 18 shows the outcome: the data and code assets visualized in SAP Build Code as well as the resulting application UI list report and object page.&nbsp;Read more about this, and see it in action, in this blog post:</P><UL><LI><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2403-introduces-gen-ai-capability-and-more/ba-p/13650594" target="_blank">SAP Fiori tools 2403 introduces Gen AI capability and more</A>.</LI></UL><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 17: Using Joule with SAP Fiori tools to describe the SAP Fiori elements application you want to create, in this case taking the example text from the documentation. ALT Text: the image contains three screenshots. On the left the documentation, in the middle Joule with the initial lines of the documentation text entered, on the right Joule with the final lines of the documentation entered, where the field names are listed in the order they should appear in the list report." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141400i63097630C3009AFA/image-size/large?v=v2&amp;px=999" role="button" title="17 Fiori tools Joule (1).jpg" alt="Figure 17: Using Joule with SAP Fiori tools to describe the SAP Fiori elements application you want to create, in this case taking the example text from the documentation. ALT Text: the image contains three screenshots. On the left the documentation, in the middle Joule with the initial lines of the documentation text entered, on the right Joule with the final lines of the documentation entered, where the field names are listed in the order they should appear in the list report." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 17: Using Joule with SAP Fiori tools to describe the SAP Fiori elements application you want to create, in this case taking the example text from the documentation. ALT Text: the image contains three screenshots. On the left the documentation, in the middle Joule with the initial lines of the documentation text entered, on the right Joule with the final lines of the documentation entered, where the field names are listed in the order they should appear in the list report.</span></span><BR /><DIV class=""><DIV class=""><DIV class=""><DIV class=""><DIV class=""><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Figure 18: The resulting data and code assets visualized in SAP Build Code as well as the resulting SAP Fiori elements application UI consisting of a list report and an object page. ALT Text: the image contains three screenshots. On the left SAP Build Code showing the generated entities; in the middle the generated list report UI with five lines of data; on the right the generated object page with the header and a “Contract Details” section containing nine fields." style="width: 999px;"><img src="https://community.sap.com/t5/image/serverpage/image-id/141401i035D4FF5BE14B042/image-size/large?v=v2&amp;px=999" role="button" title="18 Fiori tools Joule (2).jpg" alt="Figure 18: The resulting data and code assets visualized in SAP Build Code as well as the resulting SAP Fiori elements application UI consisting of a list report and an object page. ALT Text: the image contains three screenshots. On the left SAP Build Code showing the generated entities; in the middle the generated list report UI with five lines of data; on the right the generated object page with the header and a “Contract Details” section containing nine fields." /><span class="lia-inline-image-caption" onclick="event.preventDefault();">Figure 18: The resulting data and code assets visualized in SAP Build Code as well as the resulting SAP Fiori elements application UI consisting of a list report and an object page. ALT Text: the image contains three screenshots. On the left SAP Build Code showing the generated entities; in the middle the generated list report UI with five lines of data; on the right the generated object page with the header and a “Contract Details” section containing nine fields.</span></span><BR /><P>In case you need more flexibility than provided by the SAP Fiori elements patterns, we also provide AI-enablement for freestyle SAPUI5. Read about it in this blog post:</P><UL><LI><SPAN><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/joule-for-freestyle-sapui5-development-in-sap-build-code/ba-p/13650005" target="_blank">Joule for freestyle SAPUI5 development in SAP Build Code.</A></SPAN></SPAN></LI></UL><H2 id="toc-hId-722151251"><SPAN>Further UI Technology Innovations</SPAN></H2><P>Here are some further new capabilities I’d like to bring to your attention.</P><P>New features of SAP Fiori elements based on OData V4, explained in this blog post:</P><UL><LI><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/unlocking-efficiency-and-simplicity-a-look-into-the-new-features-of-sap/ba-p/13645297" target="_blank">Unlocking Efficiency and Simplicity: A Look into the New Features of SAP Fiori Elements for OData V4</A></SPAN> – the new features are:<UL><LI>Support for recently entered values dropdown.</LI><LI>Open object page in edit mode.</LI><LI>Merging section and subsection title to reduce unnecessary white space.</LI></UL></LI></UL><P>If you program the UI of your new application using SAPUI5 and the flexible programming model, you’ll want to ensure good code quality. To help you with that, we bring you UI5 linter, a powerful static code analysis tool:</P><UL><LI><SPAN><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/introducing-ui5-linter/ba-p/13633898" target="_blank">Introducing UI5 linter.</A></SPAN></SPAN></LI></UL><P>These blog posts introduce further interesting new features or offerings:</P><UL><LI><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-2406-update-includes-added-support-for-sap-s-4hana-cloud/ba-p/13743708" target="_blank">SAP Fiori tools 2406 update includes added support for SAP S/4HANA Cloud and more</A></SPAN></LI><LI><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/sap-fiori-tools-may-2024-release-adds-closer-integration-with-abap/ba-p/13720761" target="_blank">SAP Fiori tools May 2024 release adds closer integration with ABAP Development Tools</A></SPAN></LI><LI><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/sapui5-tables-maximizing-efficiency-through-advanced-copy-amp-paste/ba-p/13723158" target="_blank">SAPUI5 Tables: Maximizing efficiency through advanced Copy &amp; Paste</A></SPAN></LI><LI><SPAN><A href="https://community.sap.com/t5/application-development-blog-posts/streamlining-data-entry-exploring-the-new-paste-feature-in-fiori-elements/ba-p/13710973" target="_blank">Streamlining data entry: Exploring the new 'Paste' feature in Fiori Elements V4 tables</A></SPAN></LI><LI><SPAN><A href="https://community.sap.com/t5/technology-blogs-by-sap/new-tutorial-mission-key-user-adaptation-for-sapui5-applications/ba-p/13639694" target="_blank">New Tutorial Mission: Key User Adaptation for SAPUI5 Applications</A></SPAN></LI><LI><A href="https://community.sap.com/t5/technology-blogs-by-sap/blast-off-ui5-web-components-2-0-is-now-live/ba-p/13744227" target="_blank">Blast Off! UI5 Web Components 2.0 is Now Live!</A></LI></UL><H1 id="toc-hId-819040753"><SPAN>Final words</SPAN></H1><P>For more information about our AI innovations, have a look at this article from Philipp Herzig, our Chief AI Officer:</P><UL><LI><SPAN><SPAN><A href="https://news.sap.com/2024/06/ai-innovations-partnerships-sap-sapphire/" target="_blank" rel="noopener noreferrer">SAP’s New AI Innovations and Partnerships Deliver Real-World Results.</A></SPAN></SPAN></LI></UL><P><STRONG>We’re looking for your feedback </STRONG>on the SAP Fiori design guidelines, how we communicate updates / news - in other words, on our communication strategy for the SAP Design System. Please take a few minutes to fill out this little survey:</P><UL><LI>SAP Design System: <SPAN><SPAN><A href="https://airtable.com/appcTJyi5Muww44Ss/pag3CSeGA8w8etzPQ/form" target="_blank" rel="noopener nofollow noreferrer">Communications Strategy Survey.</A></SPAN></SPAN></LI></UL><P>Do keep posting your experiences and recommendations yourself in the SAP Community, with the SAP Fiori and/or the User Experience tag! In case you are wondering how to get a list of the most recent blog posts on SAP Fiori and User Experience in our new SAP Community, use these links:</P><UL><LI><SPAN><A href="https://community.sap.com/t5/c-khhcw49343/SAP+Fiori/pd-p/73554900100700000977" target="_blank">Latest blog posts on SAP Fiori in the SAP Community.</A></SPAN></LI><LI><SPAN><SPAN><A href="https://community.sap.com/t5/c-khhcw49343/User+Experience/pd-p/4616d815-f39e-45c8-b13b-5a2d6679778f" target="_blank">Latest blog posts on User Experience in the SAP Community.</A></SPAN></SPAN></LI></UL><P>For general information on design at SAP and SAP Fiori, check out:</P><UL><LI><SPAN><A href="http://www.sap.com/design" target="_blank" rel="noopener noreferrer">www.sap.com/design.</A></SPAN></LI><LI><SPAN><A href="https://pages.community.sap.com/topics/fiori" target="_blank" rel="noopener noreferrer">SAP Community: SAP Fiori topic page<SPAN>.</SPAN></A></SPAN></LI></UL></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV> 2024-07-25T12:12:59.234000+02:00