BAS new Fiori Application Template - Approuter Configuration

[Jeff]

Hello,

I was using the newer Fiori Application Template (freestyle project) for the first time in Business Application Studio since the previous Fiori generator template is marked as deprecated now.

There are some nice new features, like being able to autogenerate the cross navigation properties, etc...

One thing I noticed is that the previous template options of choosing standalone approuter vs managed approuter are no longer in this template and the xs-security.json file and mta.yaml entries aren't added.

I was able to add this setup by using the MTA module from template, but that failed to deploy to CF because it missed some properties in the MTA.yaml for the destination service.

It was not terribly difficult to fix those issues and deploy, but just curious on why the template removed those options on the initial project creation and if there is any plan to add that to the new template?

Thanks,

Jeff Renshaw

[RazK]

Hi jeff.renshaw ,

Can you add the "SAP Fiori tools" tag to your question?

This will allow our colleagues to pick it up.

Regards - Raz

[Jeff]

Hi Raz,

It is done.

Thanks,

jeff

[jlongie · Accepted solution]

Hi,

Sorry to hear that you are experiencing these issues, however, we are actively working on them. Even in our latest release (Friday March 5th) there are improvements in how we manage and configure managed approuter flows. I've documented a number steps to allow you develop a Fiori Elements application, build and deploy it to CF and supporting FLP if that is your requirement.

Please ignore the FLP steps if this is not your requirement.

Also, a number of these manual steps are being automated as part of an upcoming release.

Prerequisites

1. As SAP customer, you have purchased the Launchpad service to support FLP (not required otherwise)

2. Ensure you have the latest @sap/generator-fiori npm module installed or create a new SAP Fiori Dev Space

3. Or In your existing dev space, update to the latest by running `npm i -g @sap/generator-fiori`, https://www.npmjs.com/package/@sap/generator-fiori for more info

4. Understanding Managed Approuter https://developers.sap.com/tutorials/appstudio-sapui5-create.html#5a114a0f-2e97-40cb-ba1c-8710e713a0...

5. Developing HTML5 Applications and Extensions https://help.sap.com/viewer/8c8e1958338140699bd4811b37b82ece/Cloud/en-US/c1b9d6facfc942e3bca664ae063...

6. You have a UI5 destination configured for your sub account https://help.sap.com/viewer/6d3eac5a9e3144a7b43932a1078c7628/Cloud/en-US/0a2e5a45d5494ec08318ead2019...

7. Integrate your SAPUI5 app into your launchpad site https://developers.sap.com/tutorials/cp-launchpad-integrate-sapui5-app.html

Type: HTP

URL: https://ui5.sap.com

Proxy Type: Internet

Authentication: NoAuthentication

Add a new property HTML5.ForwardAuthToken , value: false

Use default JDK truststore is enabled

7. Alternatively, you can update the resource `<mta-id>-destination-service` to include the destination as per attached screen shot;

Configuration

Step1. Open the command palette `View` -> `Find Command`


a. Enter `Wizard` and select `Open Template Wizard`


b Select `Basic Multitarget Application` and press `Next`


c. Enter a unique project name, unique within your organisation i.e. the name is used as MTA ID in the `mta.yaml` file

**Note**: SAP Application Studio will restart itself with the new project as root folder

Step2. Right click the newly generated `mta.yaml` and select `Create MTA Module from Template`
 a. Select `Approuter Configuration` and press `Start`


b. Select your HTML5 application runtime `Managed Approuter`


c. Enter a unique name for the business solution of the project | Enter a unique ID e.g. `<your-mta-id>-service` from step 1.c


d. Do you plan to add a UI? `Yes`

Step3. Open the command palette `View` -> `Find Command` -> `Fiori: Open Application Generator`


a. Create a `SAP Fiori application`


b. Module name: uniquemodulename (make sure its unique in your organisation)


c. Namespace: com.hostname


d. Select `Yes` to `Add deployment configuration`, ensuring the newly generated MTA file is selected, refer to next step `Target Name`


e. Select `Yes` to `Add FLP configuration`, refer to next step `Overwrite` for input params, this is required for Launchpad to show your application tile

Step4. Target Name


a. Please choose the target - should default to Cloud Foundry


b. Destination name: Keep selected destination, otherwise input a valid destination appropriate for your environment

Step5. Overwrite


a. Semantic Object - somename<sth_unique> (should be a unique name for within your site)


b. Action - display


c. Title - My App Desc


d. Subtitle - Fiori Rocks!

Step6. Validate everything is working by right clicking on your new application and selecting `Preview Application`


a. Ensure you are able to load and retrieve data

Step7. Within your new Fiori application, open `webapp`-> `manifest.json` and at the end, append the following where the service is the id generated in step 2
 "sap.cloud" { "public": true, "service": "<your-mta-id>-service" }

**Note**: Adding `sap.cloud` to the manifest will be automatically added in a future release

Step8. Change into the root folder containing `mta.yaml`, run `npm run build` which will build the MTA archives

Step9. In the same folder, run `npm run deploy` and your app should be deployed

Step10. Before configuring a tile in cFLP, validate that the app has been successfully deployed. You can see all applications in the `HTML5 Applications` section in your sub account -> HTML5 Applications list

Step11. Alternatively, from the command line, you can run `cf html5-list -d` to see a list of all your HTML5 deployed applications with `sap.cloud.service` exposed, for more information https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/83b0fb23e37d456caad1ad0448e...

screen-shot-2021-02-25-at-104015.png

[Jeff · Accepted solution]

Thanks John for all of the detailed information.

I had not yet seen the updates to that developers.sap.com tutorial which reference the new template and also mention the "glitch" in the MTA.yaml / managed app router setup (which was really what triggered my question in the first place).

There are a lot of improvements in this new template. And I certainly do appreciate SAP's continued efforts to improve these tools. They greatly improve and speed up the development process.

Sometimes it can be a challenge to keep up with all of the changes and improvements you deliver. But that doesn't mean I want them to stop 🙂

Have a nice weekend.

Jeff

[ullas_hollapk]

There's a generator for the router as well.

This is the command:

Opens up this template in the wizard:

[Jeff]

Hi Ullas,

I don't think that is quite what I am looking for either, or I am not understanding it. It seems that generates a new mta folder in the project for a standalone approuter. There are no options for the managed approuter scenario. I am trying to use the managed approuter and run the applications from the html repository / html applications section on the subaccount.

The closest wizard option I am seeing to achieve this is still the create MTA module from template -> Approuter Configuration.

That one almost works, but it seems to leave out the ServiceInstanceName under the destination content for the app host service. I need to manually add that in order for deployment to CF to be successful.

Reading the documentation at https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/46664de4d6944471b6c29a0681b... , it looks like the managed approuter scenario is still referencing the deprecated template. I'm not sure if there is a plan to incorporate that into the replacement template?

Thanks,

Jeff

[ullas_hollapk]

Hi Jeff,

These options are available under the "Deployment Configuration" section in the Template Wizard.

Here's the documentation for these options: https://help.sap.com/viewer/17d50220bcd848aa854c9c182d65b699/Latest/en-US/1b7a3be8d99c45aead90528ef4...

Deployment configuration can be added after the project is generated using the following command at a terminal:

npx fiori add deploy-config

Does this help?

Cheers,

Ullas

[Jeff]

Hi Ullas,

Thanks for the reply. This is good to know about the CLI option. I will try that next time to see if it works better after project generation than the MTA generator command in BAS which left some things missing in the mta.yaml.

I did try to go through the deployment configuration when I created this project, thinking these options would be there. But the only option I see is for a destination. There is nothing for standalone approuter setup or managed like in the deprecated template. For me it was a time saver to use the managed app router option in the template for project creation to generate the xs-security and the correct mta.yaml setup right from project creation.

Here is what I see in deployment configuration with the new template:

And here is what I am referring to from the now deprecated template:

Thanks,

Jeff