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.

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.

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.

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.

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.

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 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.

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 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.

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.