cleanFiles/bookmap_enter_course_title_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2025-02-28T12:44:05.000Z

Using SAP Fiori Tools to Boost Your App Development

<div id="content"><p tabindex="0">Once the OData service is available, you can generate and develop an SAP Fiori app using SAP Business Application Studio as a development environment. SAP Business Application Studio is available on SAP Business Technology Platform. You can launch it from your SAP BTP trial account.</p><p tabindex="0">Watch the following video to get an overview of SAP Business Application Studio.</p><div class="kalturaVideoLessonWrapper"><div aria-label="" class="kalturaVideoLessonContainer" data-testid="video" id="1_ynhc5m01"></div></div><p tabindex="0">As an alternative to the cloud-based SAP Business Application Studio, you can use Visual Studio Code (VS Code) that has to be downloaded.</p><p tabindex="0">You can download it from <a target="_blank" href="https://code.visualstudio.com/">https://code.visualstudio.com/</a>.</p><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="The image describes all the major differences between SAP Business Application Studio and Visual Studio Code." alt="The image describes all the major differences between SAP Business Application Studio and Visual Studio Code." src="/service/media/UX406_10_en-US_media/UX406_10_en-US_images/BASvsVSCode_src.png" tabindex="0"><p tabindex="0">You will use SAP Business Application Studio for the upcoming exercises.</p></div>

SAP Business Application Studio

<div id="content"><p tabindex="0">SAP Fiori tools extension pack is available for both SAP Business Application Studio and Visual Studio Code. SAP Fiori tools is enabled by default in SAP Business Application Studio for several dev spaces, such as<cite>SAP Fiori</cite> or <cite>Full Stack Cloud Application</cite>. To use SAP Fiori tools in Visual Studio code, you must download the SAP Fiori tools extension pack from <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack">SAP Fiori Tools - Extension Pack</a>.</p><p tabindex="0">Watch the following video for an overview of SAP Fiori tools:</p><div class="kalturaVideoLessonWrapper"><div aria-label="SAP Fiori Tools Overview" class="kalturaVideoLessonContainer" data-testid="video" id="1_fs11wwa9"></div></div><p tabindex="0">SAP Fiori tools guides developers through the full development cycle.</p><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="Overview of SAP Fiori Tools" alt="Overview of SAP Fiori Tools" src="/service/media/UX406_10_en-US_media/UX406_10_en-US_images/SAPFioriToolsOverview_Src.png" tabindex="0"><div class="imageCaption"></div></div>

SAP Fiori Tools Extension Pack

<div id="content"><p tabindex="0">Watch the following video to know more about developing and previewing an application using SAP Fiori tools:</p><div class="kalturaVideoLessonWrapper"><div aria-label="Develop and Preview an Application" class="kalturaVideoLessonContainer" data-testid="video" id="1_7hdeibm2"></div></div><p tabindex="0">You can launch the Page Map in multiple ways. For more information, see <a target="_blank" href="https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/bae38e6216754a76896b926a3d6ac3a9.html">Define Application Structure</a>.</p></div>

SAP Fiori Tools: Develop and Preview Application

<div id="content"><p tabindex="0">You can choose guided development to add various features to your SAP Fiori elements applications. Once you have selected the parameters relevant to your project, guided development generates the code snippet and adds it to the required file in your project. Watch the following video to know more about guided development:</p><div class="kalturaVideoLessonWrapper"><div aria-label="Guided Development" class="kalturaVideoLessonContainer" data-testid="video" id="1_n6wh7nht"></div></div></div>

SAP Fiori Tools: Guided Development

<div id="content"><p tabindex="0">Guided Answers is an interactive documentation designed to help troubleshoot issues, navigate processes, and guide users through tasks via a series of questions. Watch the following video to know more about guided answers:</p><div class="kalturaVideoLessonWrapper"><div aria-label="Guided Answers" class="kalturaVideoLessonContainer" data-testid="video" id="1_dq6kkeee"></div></div><div class="parentsection"><div class="section"><div tabindex="0"><h3>Summary</h3></div><p tabindex="0">In this lesson, you have learned how SAP Fiori tools supports you throughout the development cycle of creating SAP Fiori elements applications; beginning with generating the application and previewing it in a browser, to adding UI features such as filter fields, tables, forms, charts, and finally deploying the application. This way, you can reduce the efforts and costs involved in the creation of SAP Fiori elements apps.</p></div></div><div class="parentsection"><div class="section"><div tabindex="0"><h3>Further Reading</h3></div><ul style="list-style-type:disc"><li tabindex="0"><a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack">SAP Fiori Tools - Extension Pack - Visual Studio Marketplace</a></li><li tabindex="0"><a target="_blank" href="https://help.sap.com/docs/SAP_FIORI_tools">SAP Fiori tools</a></li><li tabindex="0"><p tabindex="0"><a target="_blank" href="https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/2d8b1cb11f6541e5ab16f05461c64201.html">Getting Started with SAP Fiori Tools</a></p></li><li tabindex="0"><p tabindex="0"><a target="_blank" href="https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/c3e0989caf6743a88a52df603f62a52a.html">Application Information</a></p></li></ul></div></div></div>

SAP Fiori Tools: Guided Answers

Getting Started with Creating an SAP Fiori Elements App Based on an OData V4 RAP Service

SAP_Business_Application_Studio_Introduction_(Source).mp4

With the wide adoption of the SAP Intelligent Enterprise, customers and partners need a way to build and extend SAP solutions to fulfill their business needs. To support these needs, SAP introduces Business Application Studio, the next generation of SAP Web IDE, a modular-driven environment tailored for efficient development of business applications such as SAP Fiori,  applications for SAP Cloud Platform Mobile Services, SAP S/4HANA extensions, and modeling workflows. For each of these business applications, it offers suited dev spaces which are like isolated virtual machines in the cloud. Each dev space type contains tailored tools and pre-installed runtimes that simplify and save time in setting up your development environment and allow you to efficiently develop, test, build, and run your solution. Business Application Studio provides an end-to-end development environment that leverages open sources and leading industry standards, embracing Microsoft Visual Studio code design principles and extensions. It enhances productivity with direct command execution through the integrated command line interface. Once you are done developing, you can either test your code locally on a simulated runtime or easily deploy your app to the cloud and test it there. Requiring zero installation and maintenance, Business Application Studio reduces the total cost of development and accelerates application time to market. Make your business intelligent with SAP Business Application Studio.

SAP Fiori Tools Overview

Welcome to our e-learning series  on SAP Fiori tools. In this video, I will be giving you a brief overview of the  capabilities in SAP Fiori tools that will help you create SAP Fiori apps using SAP Business  Application Studio or Visual Studio Code. SAP Fiori tools helps developers  through the full development cycle. Beginning with project generation, you can either create an app using a template or start with a basic project. Within a few minutes, you will have a runnable project that  you can start to add more features to. To do that, you can use the page editor to  configure the properties of the pages. If you prefer to understand the ins and outs for each step, you can use our guides to walk you through the insertion of each code snippet. There are also multiple ways  to create annotations for SAP Fiori elements apps. You can look through our collection of guides or  you can make use of the annotation LSP that is capable of adding any supported annotation terms  while also reducing the amount of typing you have to do. For OData V4 apps, the page editor also  provides the ability to add a number annotations. At any given time, the preview helps you to  see the changes in real time. SAP Fiori tools  supports OData V2 and OData V4 specifications. The feature matrix in our documentation gives you a comprehensive overview of the functionalities  that are available for your project. This has been a real quick look at SAP Fiori tools.  If you would like to learn more about our extensions, check out the other videos in this series.  If you would like to try SAP Fiori tools, check out the links to our documentation and tutorials  in the video description. Thanks for watching!

SAP Fiori Tools - Develop and Preview an Application

Hello and welcome to our e-learning  series on SAP Fiori tools! In this video, I will be sharing a brief overview of SAP Fiori  tools application modeler. The application modeler extension consists of multiple parts  and one is the application info page. You can start it via the info symbol  of a project in the app modeler View, or from the command palette  `Fiori: Open Application Info`. It gives you a compact overview of the project, commands on what you can  do, and a learning section. Let us continue by starting the  preview for this application. This will enable us to directly  see the changes done later on. Here, a new tab opens and we can see we have a list report that opens an object page by navigating via one of  the list items in the table. Let’s go back to the info page and open another part, the page map. There are multiple entry points such  as the command palette and info page, but we will start from the app modeler view. Here, we can see existing pages and we have also access to the  general settings of the app, such as the app title or flexible column layout. Those properties can easily  be changed and to see this in effect, we change the flexible column layout, restart and refresh the preview and head over to the application. Now, when we navigate from one of the list items, the object page opens on the  same page in a column view, instead as seen before on a new  page. And that’s just with one click. Heading back to the page map, you  can add, edit, or delete pages, and clicking on the edit button of a page  takes us to the next part, the page editor. We can see the different sections of the page and corresponding properties with a small  description in the properties panel. It is search and filter enabled  to help you find a property, but you can also navigate by  using the outline of the page. You can modify the page by various actions, such as dragging or deleting, and if you have an OData V4 service for example, have access  to the annotations and their properties. This has been a quick look at SAP  Fiori tools application modeler. If you would like to learn more  about our other extensions, check out the other videos in this series. If you would like to try out SAP Fiori tools, you find links to tutorials and  documentation in the video description. Thanks for watching!

SAP Fiori Tools - Guided Development

Hello and welcome to our e-learning  series on SAP Fiori tools.  In this video, I'll be giving you a quick overview  of SAP Fiori tools Guided Development. SAP Fiori tools guided development is part of  the SAP Fiori tools extension pack available for both SAP Business Application Studio  and Visual Studio Code. You can use it to add a wide variety of functionality to your  SAP Fiori elements applications – everything from adding columns and charts to tables,  to creating cards for overview pages, to creating building blocks for custom pages –  all without having to write the code yourself. Instead, you pick the parameters that are relevant  to your project and guided development generates the code snippet for you and inserts it into  the relevant file in your project. Like so: In addition to saving development time,  the SAP-maintained code snippets ensure code consistency across all of  your SAP Fiori elements projects. The interactive nature of the extension, with code  snippets that update to reflect your parameter choices also helps you to better understand  the changes you are making to your project. There are a wide variety of guides available,  depending on your project requirements. Guided development supports SAP Fiori  elements applications for both OData V2 and OData V4. It currently provides code snippets for manifest changes, XML annotations, CAP CDS annotations,  and ABAP CDS annotations; as well as controller extensions, and flexible  programming model building blocks. To give you a quick look at the experience of  using guided development, I’m going to show you how we can add a column to an existing table that  will show us the color coded status of an object. Here I have a CAP project intended to display  a list of business trips. We’re going to add a column right here showing the booking status  for the trips: Open, Accepted, or Canceled. To make the status even easier to see at a glance,  it should be color coded and feature an icon. To add this column, I have already opened our  guide Add status colors and icons for a column. You can see a description of what the  guide does, as well as a preview image. If I navigate to our first (and only) step in  this case, you can see the required parameters, as well as a generic code snippet that you could  copy, paste, and modify right away. But we want to create something specifically for our project,  so I’m going to start filling the parameters out. Once I fill out the parameters, you’ll notice  our code snippet has been updated.  You can see all of the existing columns in the table  as well as the new one we added right here. I can then press Insert Snippet and our newly  updated code snippet will be inserted into our annotation file. If we switch back over to our application, you can see a column displaying the trip status has been added! Other guides work in a similar fashion – simply fill out the parameters that are relevant to your project and use case and the required code will be updated and inserted into your project. This has been a quick overview of SAP Fiori tools Guided Development. If you would like to learn more about our other  extensions, check out other videos in the series. If you'd like to try out SAP Fiori tools for yourself, we provide links to tutorials and documentation  in the video description. Thanks for watching!

SAP Fiori Tools - Guided Answers

Hello and welcome to our  e-learning series on SAP Fiori tools. In this video, I am going to give you a brief  overview of the Guided Answers Extension by SAP. SAP’s guided answers is an interactive documentation designed to  help troubleshoot issues, navigate processes, and guide users  through tasks via a series of questions. SAP experts document the exact steps for analyzing  issues and make that available to customers. SAP's guided answers is recommended to  customers to get the most from support. Customers can look for solutions themselves  instead of opening a customer support incident. The guided answers extension by SAP  renders content of already existing guided answers directly in an Integrated  Developer Environment (an IDE) such as SAP Business Application Studio (SBAS)  and Microsoft Visual Studio Code (VSCode), making the content interactive and  context-aware within the IDE. Developers do not need to navigate back and forth between  separate supporting materials and their IDE when they come across an issue. This extension improves and speeds up the support process  for SAP tools and increases user satisfaction. It will also help support teams provide clearer and   more accurate solutions to issues to their customers. The guided answers extension is provided by default when you create a development space  in SAP Business Application Studio. If you work with VSCode it is also available when  you download the SAP Fiori tools extension pack from the VSCode market place. It can also be available  standalone when you download it via the VS Code market place. In this demo, I’m going to show you how  SAP Fiori tools uses the guided answer extension to help their users troubleshoot issues. The guided answers extension can be accessed via the command palette. It provides a simple input field for you to enter search criteria. On entering some search criteria, it will return  a list of guided answers that best matches your input. To further refine your search, you can  filter the returned list on product and component. You can then select a guided answer that  best matches your issue in this example SAP Fiori tools. The guided answer is interactive documentation designed to help troubleshoot issues through tasks via a series of questions. You simply answer the questions presented to you to find the correct solution to your problem. The guided answer can contain links to further documentation or even execute commands within your IDE to help you resolve the issue. There is no need to navigate back and forth between separate supporting materials and the IDE when an issue arises. Information on how to solve your issue can be easily accessed  through the guided answers extension. This has been a quick look at  the guided answers extension. If you would like to learn more  about the other extensions, please check out the other videos in our series. If you would like to try out SAP  Fiori tools, check out the links to our tutorials and documentations  in the description of this video. Thank you for watching.