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.
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
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?
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
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:
(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):
In the console I see this error:
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
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