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.
@cfelce if you open an empty workspace and then guided development, you see all guides with warnings. If you do the same in a workspace with Fiori projects, you will be asked to pick one, and then guided development shows all guides available for the chosen project. If you have VSCode open with just one application, then guided development will open in the context of that one project. If no guides are available for that project, then it is empty (I am assuming that is your case). You can change this by selecting a different filter in the upper right corner of guided development. The default is 'Project Guides', however, if you change it to 'All guides' you will see all guides.
However, seeing all guides won't help you because it seems the project you are using is not recognized as a Fiori elements project. Did you generate it with the SAP Fiori tools or migrated it from a WebIDE project or ...?
Hi @akuller_q, can you specify what you mean exactly with "another fiori elements v4 app via Custom Section"?
In general, there are multiple ways to embed your own parts into object page sections, for example custom sections (https://ui5.sap.com/#/topic/a357047be956436ebb1dfebf1aa29af2 / https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/customElements/customElements...) or reuse components ttps://ui5.sap.com/#/topic/d869d7ab3caa48b2a20dc20dfa248380)
Hi @mariusfreitag ,
For example, I create an app for managing documents. I integrate this app into other apps as a separate section in the object page. Based on the idea of micro services.
The problem with the custom section and component container is that it always wants to resolve them in the ui5 library. I could work around that with jquery and registerModule, but it's dirty. The parameter url didn't help me at this point and via usages it didn't work either.
The mentioned way via manifest leads to the same problem as the component container.
Either I have always done it wrong or it only works with Freestyle Apps, as it says in the documentation.
Maybe someone has already made a simple example for 2 Fiori Elements v4 Apps ...
I'm not really sure if I get the use case of embedding a complete application into another one. If you want to create reusable parts (in the fashion of micro frontends), it would usually be a good idea to create a common reuse component used by both apps. Another way to reuse the same application would also be to implement a navigation (https://ui5.sap.com/#/topic/a42427550b72436a8bdf53045b06effb).
There are of course also other ways to embed an app (e.g. by using a custom section with an iframe), but I do not believe that this will be particularly good UX so I would advise against this.
Do you have a link to some kind of documentation or a sample to show what you want to achieve?
Hello @mariusfreitag ,
thanks for your answer and sorry for the late reply.
The idea is to provide with FE more small components that are reusable.
Let's stay with the documents, we build a small app which shows all related documents under a certain filter. The filter is defined by the embedding application. Additionally this application offers the possibility to upload further documents, to delete them and to link further (existing) documents.
This application can now stand alone or be integrated into any other applications.
Around such a problem I turn for some time. A library is to me at this point too exaggerated and/or also a bit wrong. Since I would see this as an independent application. In addition, the idea behind the annonations and to be independent from the current design guideline is too ingenious.
At this point I wouldn't worry too much about a navigation, that would be a bit too big for the beginning. This should be solvable via Nested Components.
I don't find the solution with the iFrame elegant. I see already with the existing customers the problem with the Launchpad service that no direct influence on the shell can be taken. Compared to the on prem Lauchpad.
Addition, unfortunately editing is not possible.
When the app is included, I would hide the filter options. So that only the table with the associated documents and actions is visible. This is already possible.
while technically there is nothing preventing a full Fiori Elements v4 app as a custom section I would recommend creating your own custom section containing a table building block. With this you can take advantage of the built-in support of annotations while not having a full app that needs to be embedded within another.
Is it allowed for ask stupid newbie questions here? Otherwise please guide me to a forum better suited for this.
This is a good demo to sell the idea of Fiori Elements, FPM etc. because it looks so easy, but I guess there are a lot of heavy prerequisites and I have a couple of questions.
Thomas Madsen Nielsen
Are SAP monitoring or auditing the community-made open-source tools: we (SAP) are maintaining and contributing to open source projects in this context. The core is https://github.com/SAP/open-ux-tools containing all the templates in modules that we maintain, and thereby, while the community contributes, we "control" what gets in and what not. The modules are used by the SAP Fiori tools which go through the full SAP development, quality and release process. I don't think GDPR is a risk here, but copyrights etc. are checked. However, the modules can also be used by anyone else, e.g the easy-ui5 generator that Marius used in this demo. While we are contributing to this project, it is a community project, so it does not go through the same strict quality and release process as an SAP product, so theoretically, a rogue community member could create damage, however, practically, the good community members are always watching.
When developing code like in this demo in VS Code, where are the code then stored: You develop locally and then push your code to any kind of source control system. For all my work and also personal projects, I use Github. So, multiple developers can work on the same app, and using the SAP Fiori tools test it locally. Once it is ready, you deploy it (again using the SAP Fiori tools) to your DEV system. There it becomes an ABAP dev object and can be transported through your landscape as any other.
Trying to us yo-generator as plug-in within BTP/BAS with free-style dev-approach, but no chance to get/activate the corresponding App Modeler (->unable to find relevant SAP Fiori Tools project). Any idea?
If you answer "Do you want the module to be visible in the SAP Fiori tools" with "Yes", the project should automatically be detected by the SAP Fiori tools (and hence also by the Application Modeler as part of the SAP Fiori tools). If that does not work, you can maybe try to restart your BAS dev space to re-open the project.