Devtoberfest
Find out what's happening, and when, in the Devtoberfest schedule – don't miss out!
cancel
Showing results forΒ 
Search instead forΒ 
Did you mean:Β 

🟣 Outside the lines: SAP Fiori elements flexible programming model

Devtoberfest

Outside the lines: Creating a custom application with open-sourced development tools and the SAP Fiori elements flexible programming model

In this demo, we show how a combination of the community-maintained Easy UI5 Generator (https://github.com/SAP/generator-easy-ui5) and the Open UX tools open-source modules (https://github.com/SAP/open-ux-tools) offers full flexibility to create an app powered by the SAP Fiori elements flexible programming model, while simultaneously leveraging the convenience of the SAP Fiori tools.



Event has ended
You can no longer attend this event.

Starts:
Ends:
24 Comments
mariusfreitag
Product and Topic Expert
Product and Topic Expert

Hi all,

Thank you for your great interest in the session! Please find the OData CAP service used in the demo together with the finished app here: https://github.com/MariusFreitag/devtoberfest2022 

Don't hesitate to ask further questions!

Best
Marius

js2
Product and Topic Expert
Product and Topic Expert

In the video you use an existing CAP app which contains annotations. Then you used fiori tools to add further annotations for the chart. These were added to an annotations.xml file in the project.

What are your thoughts on this - some annotation in CAP, some in the project (as XML)? Do we car? Does it matter? Any best/common practices here?

mariusfreitag
Product and Topic Expert
Product and Topic Expert

Hi @js2, the mixture in the demo was due to the fact that we have an existing, separate CAP backend. In practice, it would usually make more sense to have all annotations in once place.

As annotations are generally meant to be on an abstract level, adding this to the backend is usually the place to go. There might be some limitations in backends, so that the local annotations have to be used, but I'd say that you should try to keep them together. In this way you can also make sure to not define redundant or contradictive annotations.

By the way, the SAP Fiori tools are also able to directly modify CAP annotations if you have the CAP project open in the same project!

Best
Marius

IrisBirnbaum
Discoverer

Hi Marius,

Thank you for this inspiring example.

I'm very new to ui5 and the whole SAP environment. I'm super amazed on how many things we developers receive as a gift with these tools. On the other hand it's a little bit scary to have to configure stuff rather than to do actual programming πŸ™‚

Sadly, for me it seems to be hard to make a fiori elements application run for the first time. 

I tried to follow along the video at least a little bit, running this little backend: https://github.com/SAP-samples/teched2022-DT181

After I initialized the project using yeoman, following your configurations and trying to start the application via the SAP Fiori tools I got an error:

IrisBirnbaum_2-1686039095485.png

(not much more information about the error in verbose mode)

I also tried to make your example run, making double sure to have everything installed and ready. But now I only see this blank page, even when opening it in an inkognito window (chrome):

IrisBirnbaum_0-1686037973835.png

In the console I see this error:

IrisBirnbaum_1-1686038020669.png

Similar stuff happend, when I tried to use the Open Application Generator to create a first page for our "real" CAP project.

Now I'm a little bit frustrated, as my company really wants to push using these technologies but I get stuck at the basics.

Do you have any advice where to start from to get a small example running in order to be able to play around with it? For me that's usally the quickest way to get familiar with new technologies. 

Thanks in advance,

Iris

 

mariusfreitag
Product and Topic Expert
Product and Topic Expert

Hi Iris,
Thank you for your feedback!

Regarding the first issue, can you try to update your UI5 CLI to the latest version? The version installed in the Devtoberfest project is an old one that doesn't support the new descriptor versions.

npm install @ui5/cli@latest
npm install -g @ui5/cli@latest

This should solve your issue.

For the second error, please note that the console messages are actually expected and do not signal an error -- transpiling is simply the act of converting TypeScript into JavaScript. To dive deeper into debugging this, you can open the Chrome debugging console. However, generating a new app is probably the better approach, as this will help you getting the latest best practices and versions.

Please feel free to respond if this still doesn't work, I'm optimistic that we can get a first version running for you!

Best
Marius