Developing SAP UI5 apps using Fiori Elements (WebIDE & SBAS)

Explore editors for SAP UI5 development, including SAP BAS, Web IDE, and VS Code, and learn to install Web IDE and HANA Studio, with BAS for UI5 apps.

Install SAP Web IDE Personal Edition, meet prerequisites, download and extract the installer, start the Orion server, access the web IDE, and create a Fiori Elements app from templates.

Install eclipse and the adt plugin, verify java version, and connect to the abap backend to create artifacts and views in a new abap project.

Create a no-extension file named after the remote system in the SAP origin folder, configure http with basic authentication and web id usage, then connect to start a UI5 project.

Build your first Fiori Elements sales order app by combining the list report and object page floor plans, using CDS views, OData services, and UI annotations, all without UI5 coding.

Create consumption views atop basic views, apply currency and amount annotations, and define header to item associations to expose annotated data to the UI5 framework using the virtual data model.

Create OData service with gateway service builder (SEGW) to expose the consumption view as auditor service, then activate, register, and test metadata before building a Fiori Elements UI5 app.

Create a SAP UI5 list report app with Fiori Elements using Web IDE, connect an OData service, configure annotations and i18n in manifest, and run the no-code skeleton.

Add a default search field and search fields to a UI5 list report via annotations. Filter by sales order, sales document type, sales organization, sold to party; activate and test.

Add header information and total sales orders to the list report, update column labels to document type, and hide the currency column from the table and settings using ui annotations.

Add ui annotations to the object page to show the sales order number and sales document date, and rename the page from consumption view to sales order.

Add header UI facets in the object page by annotating the sales order header to display sold-to party and net value as data points in the header area.

Add a general information facet to the object page to display key sales order data: document type, sales organization, distribution channel, and sales group, via annotations and labels.

Rename the second facet to items, show items in a table header with a count, and apply UI annotations to control order and display of item fields in item visits.

Display sales order item details on the object page using annotations in SAP UI5 with Fiori Elements, including item number, creation date, order quantity, net value, and general info.

Recap building a complete SAP UI5 list report app with Fiori elements using WebIDE and SBAS, including the auditor service via Gateway Builder, annotations, headers, filters, and object pages.

Discover how an analytical list page unites KPIs, charts, tables, and a dashboard with drill-down navigation for sales orders, visual and compact filters, and switchable hybrid, chart, and table views.

Create a consumption view for the analytical list page by defining a local data object from a sales item, then annotate currency and quantity for the OData service.

Learn to create a SAP Fiori Elements analytical list page app from a consumption view using WebIDE and SBAS, annotate header and line items, and run the app in sandbox.

Add and configure the compact filter on the ALP page by enabling the default search and selecting fields such as series order, division, material group, and creation date.

Add a content area column chart showing the sum of net amount by material group, with material group on the x-axis and net amount on the y-axis.

Add a line chart visual filter in header to show net amount by division, update annotations and XML for the US Chart Division variant, and verify cross-filtering of content area.

Explore building an analytical list page with SAP Fiori elements, adding a table, a chart, and visual filters, and navigate the documentation and feature maps to enable configurable layouts.

Create and activate header and item worklist consumption views by reusing basic CDS views, defining associations, and annotating currency and quantity fields for a SAP UI5 worklist app.

Create an OData service from consumption views using gateway builder, activate it, verify metadata, and generate a worklist app with Fiori elements in WebIDE and SBAS.

Add annotations to the consumption view worklist to display sales orders, enable the default searchable field, and show key fields such as sales order number and sales document date.

Add header facets for sold-to party and net value on the object page, using data point annotations, and apply a non-semantic object model to bold the sales order number.

Examine how to configure and enhance a worklist app with Fiori elements, including actions, multiple views, and feature options, and distinguish it from list report functionality.

Add a table view card to the overview page by annotating currency, customer, and net amount, and implement color‑coded criticality with tolerance ranges to display green, yellow, or red amounts.

Add a list view card (condensed) to display sales order number, bar chart, and net amount from the data source, and configure line-item annotation for tax amount and decimals.

Explore overview pages in SAP UI5, featuring visual and actionable cards, with manifest.json code auto generated and a feature map of filter bars and sections.

Explore how an overview page app aggregates information on a single page with a header filter bar and multiple cards, including table, list, and stack cards.

Learn to create Fiori Elements apps with Business Application Studio, set up a dev space, add the Northwind OData destination, and build list and report apps.

Create a fury elements list report app in bas using the Northwind odata service, showing products and enabling drill-down to details via a configured destination.

Use open guided development in BAS to add annotation XML columns for list report, starting with product ID, then view changes in the annotation XML file and run the app.

Add columns to the list report table in a sap ui5 fiori elements app using open guided development, including product name, ordered per unit, reorder level, and supply ready.

Add filters to the list report using guided development, adding two selection fields (product ID and supplier ID) via dot selection fields annotation, preview app to verify filtered results.

Add a header facet and a product details section to the object page. Map product id, supplier id, unit price, and units in stock using annotation ui data points.

Create a list report app using the business application studio. Set up SAP HANA cockpit trial accounts and access the Northwind OData service using project templates and Bash guided development.

Learn to build a worklist app with the business application studio, as Fiori Elements merges consumption view and annotation XML to render UI using guided development and the auditor service.

Add a new column to the list report and enable an export to Excel option, using guided development to update the annotations and generate an Excel file.