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.



Featured Guests
Featured Guests
Product and Topic Expert
Product and Topic Expert


Event has ended
You can no longer attend this event.

Starts:
Ends:
24 Comments

πŸ‘ Looking forward to this πŸš€

jexpo
Participant

Hello,

For some reason is not possible to watch the Live Transmission in YouTube.

Kind regards

UBrand251
Participant

@jexpo Can it be you're too early? Session commences in 10 Mins

axitycesarfelce
Participant

Hi @mariusfreitag, thank you very much for this demo! I have an issue that for some reason my guided development doesn't show me any guide.

 

TobiasQueck
Advisor
Advisor

@Former Member 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 ...? 

akuller_q
Participant

Hi,

is it possible to add another fiori elements v4 app via Custom Section? According to the documentation, this should be possible via Manifest.
However, both ways do not work for me.

mariusfreitag
Product and Topic Expert
Product and Topic Expert

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)

akuller_q
Participant

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

mariusfreitag
Product and Topic Expert
Product and Topic Expert

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?

akuller_q
Participant

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.

akuller_q
Participant

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.

former_member41761
Associate
Associate

Hi @akuller_q,
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.
Best,
Tilman

prashant9444
Advisor
Advisor

Great demo..thank you πŸ‘...added to my list to try this..

SandipAgarwalla
Active Contributor

great demo...thanks...

TMNielsen
Contributor

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. 

  • Are SAP monitoring or auditing the community-made open-source tools. I mean, how can I for example be sure the auto generated code is not violating GDPR rules or even doing worse things?
  • When developing code like in this demo in VS Code, where are the code then stored? Is it on the local PC or is it somehow via the Fiori tools extension plugin, stored in a SAP backend similar to how the ADT Eclipse extension connects to the good old SAP transport system to handle software versions, making sure only one programmer works on a program at the same time, deployment(transport) from DEV to QA and to PROD etc?

Kind regards
Thomas Madsen Nielsen

TobiasQueck
Advisor
Advisor

Great questions!

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.

Cheers,

Tobias.

TK2
Explorer

Very cool session for beginner & semis. Thanks!

TK2
Explorer

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?

mariusfreitag
Product and Topic Expert
Product and Topic Expert

Hi @TK2,

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.