The SAP Fiori elements feature showcase with CAP CDS annotations

[stefaniehager]

SAP Fiori elements provides standardized floorplans and thus allows developers to create consistent SAP Fiori apps in a very efficient manner. Using SAP Fiori elements saves you time and money during the implementation as well as maintenance of your project. The feature showcase for SAP Fiori elements for OData V4 provides a single, technical sample SAP Fiori elements list report – object page app based on CAP CDS annotations. Its purpose is to make it easier for developers to look up implementations of features. Every feature comes equipped with a short explanation and links to relevant documentation.

The SAP Fiori elements for OData V4 feature showcase provides the following benefits for you:

• End-to-end implementation examples for all major list report and object page floorplan features using CAP CDS annotations


• Short explanations for the implementations, describing the used annotations and variations of the feature


• Hints on where you can use the SAP Fiori tools to implement the described feature

Why did we create this showcase?

Since the launch of SAP Fiori elements for OData V4, we have been hearing from developers and customers, that the existing examples are great for beginners. However, they do not provide examples of all features and, in particular, not the more complex features.

With the feature showcase, we now provide a single example, containing most of the SAP Fiori elements features. This makes it easier than ever for developers to look up implementations, and get more detailed information using the short explanations with cross-references to the SAP Fiori elements documentation, or having a look at all the different supported feature of SAP Fiori elements.

We also used the development of this feature showcase to revisit our documentation and improve it in quite a few places.

How to use this feature showcase?

Example: Implementing a chart section

• Follow the instructions in the GitHub readme to install and start the app.


• Locate the chart section.


• Jump to the chart section of the GitHub repo. The content overview on GitHub is logically structured, based on the floorplans and the areas on the screen. So, the topic for the chart section is at object page - content area - chart


• Each topic has a search term, which you can search in your IDE and locate the relevant code where the chart section is implemented. Alternatively, you can also just use the code snippets, which are part of the topic.


• Adjust the code snippets to your own application.

Outlook

Note that the following are all statements of intention and can be changed by SAP at any time without further notice.

We intend to include new features of SAP Fiori elements for OData V4 in this feature showcase. Depending on feedback and demand, we also intend to provide a feature showcase for the analytical list page and the overview age. It is also intended to provide the same feature showcase for the RAP (ABAP RESTful Application Programming Model) stack with ABAP CDS annotations. So, stay tuned!

Special thanks to smarten who has implemented the showcase and to stefan.engelhardt who mentored him.

For the UX Engineering team, stefanie.runde.

[StephanHeinberg]

Thanks for this nice blog.
Which SAPUI version is needed?
Happy to see RAP Case and the ABAP CDS Annotations.

[stefaniehager]

Hi Stephan,
glad you like it, let us know if it turns out to be helpful for you in your future projects!
Wrt to SAPUI5 version: SAP Fiori elements for OData V4 is available as of SAPUI5 1.84, but since then we have of course been continuously adding features. We will check how to best include the information about which feature is available with which version. As of now, the best way to check would be to use the included link to our documentation that should take you directly to the relevant documentation section and then use the 'change version' option to validate if it is included in the SAPUI5 version you are using.

[StephanHeinberg]

Hi Stefanie,
are there any news about the RAP ABAP CDS Show Case?
Thanks, Stephan

[stefaniehager]

Hi Stephan,

not yet, sorry. We will post the information here as soon as we have a first version available.

regards, Stefanie

[SumiKang]

Hi, stefanie.runde

Thank you for good post!

However, I cloned your project and "npm install" , "cds watch", I couldn't get any activation.

Can you check this error?

jquery-dbg.js:10224 Access to XMLHttpRequest at 'https://port35729-workspaces-ws-zd6vc.ap12.applicationstudio.cloud.sap/shells/sandbox/fioriSandboxConfig.json' from origin 'https://port4004-workspaces-ws-zd6vc.ap12.applicationstudio.cloud.sap' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

send @ jquery-dbg.js:10224

jquery-dbg.js:10224          Failed to load resource: net::ERR_FAILED

send @ jquery-dbg.js:10224

sandbox.js:174 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status')

    at Object.error (sandbox.js:174:141)

    at u (jquery-dbg.js:3500:31)

    at Object.fireWith [as rejectWith] (jquery-dbg.js:3630:7)

    at k (jquery-dbg.js:9913:14)

    at Function.ajax (jquery-dbg.js:9814:5)

    at jQuery.ajax (jquery-compat-dbg.js:338:22)

    at applyDefaultApplicationConfig (sandbox.js:161:28)

    at bootstrap (sandbox.js:283:21)

    at sandbox.js:22:17

[SchiwekM]

Hi Sumi,

this error happens due to an issue with the launchpad sandbox in UI5 Version 1.107.

Please try to clear the cache or change the UI5 Version in app/fiori.html. That should fix the issue.

Best regards,

Marten

[SumiKang]

Hi,

You mean to change UI5 version to downgrade?

My UI5 version is 2.14.11

 

Thanks.

SumiKang

[neilprince]

Thanks for the blog and git repo. Any news on a showcase on the analytical list page and overview page?

 

Thanks

Neil