How to connect sapui5 app with destination in CloudFoundry?

[former_member395175]

Hello,

I have a question about the connection between UI5 app and destination in CF.

In Neo environment I just create a destination and write the description in neo-app file, but how can I connect the app to the destination in CF?

Thank you in advance.

[Ivan-Mirisola · Accepted solution]

Hi Tatiana,

Another way is to create an "User Provided Services" and call it as variable in your code. Once you assign this service as required to your application, CF will create a VCAP_SERVICES for it and will append this UPS. So the environment variables will be present at runtime.

Please review this answer on the topic.

Regards,
Ivan

[former_member395175 · Accepted solution]

Hello Ivan,

Can you please provide example of it? I tried to implement this, but app still can't see the destination.

[Ivan-Mirisola · Accepted solution]

Hi Tatiana,

You would define a destination as a user provided service (UPS) and bind it as a requires of the html5 module.

Please take a look at this mta.yaml for an example.

Look at the html5 module's require statement (module named web in the above example):

requires:
.....
- name: EXTERNAL_UI5
  properties:
  ui5liburl: ~{url}

In this example the UPS is EXTERNAL_UI5 and it can be created this way. Once created and referenced as a required service of my html5 module, you can reference it as a variable on html5 code like this:

<script id="sap-ui-bootstrap" src="{{{ui5liburl}}}/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.m"
  data-sap-ui-theme="sap_belize">
</script>

Here is another way in which you could define it. Instead of creating a UPS, you could define it directly on your mta:

- name: EXTERNAL_UI5
  type: org.cloudfoundry.user-provided-service
  parameters:
    service-name: EXTERNAL_UI5
    url: https://sapui5.hana.ondemand.com
  properties:
    ext-ui5-service-name: ${service-name}
    url: ${url}

And how the same is referred in the html5 module:

requires:
  - name: EXTERNAL_UI5
  properties:
  ui5liburl: ~{url}

Either way, it can be referred to in the same way on your html5.

Hope this helps,

Ivan

[korayyersel_q · Accepted solution]

Hi ivan.mirisola ,

Can I use UPS properties also in manifest.json? I've tried it with {{{xxx}}} but it didn't work. I am deploying html5 app using ui-deployer. So I have added the requierement on both html5 and ui-deployer to be sure.

Regards,

Koray

[Ivan-Mirisola · Accepted solution]

Hi korayyersel_q,

To the best of my knowledge, the manifest.json doesn't contain any references to destinations being used. All dataSources should be relative to the Fiori entry-point - which in Clouf Foundry is the App Router deployed with your HTML5 repository service or a Fiori Launchpad. Hence, you don't need to reference the destination in the manifest.json. It already assumes that "/odata/v2/orders/.." must come from the same place. App Router is the one that "knows" that every URL suffix with /odata should be forwarded to a destination.

Best regards,
Ivan

[korayyersel_q · Accepted solution]

Hi ivan.mirisola

I guess my case is a bit exceptional. Please have a look to https://blogs.sap.com/2020/10/22/integrating-sap-cp-document-management-service-ui-in-the-fiori-app/.... As you can see there are some environment related data in manifest.json in this case. repositoryId / objectId (a folder id) for the reuse UI for document service are configured using manifest.json. As described in my comment I want to be able configure them for each enrivonment. I thought UPS is good idea for that. That is the reason my question actually.

Regards,

Koray

[Ivan-Mirisola · Accepted solution]

Hi Koray Yersel,

I suspect getting an environment variable directly into a front-end application (such as SAPUI5) would not be straight forward.

If you had a server side application that could provide this information via OData it would be much easier.

You could do this directly in NodeJS or in Java - there are SDKs to retrieve the application's environment. To use the Cloud SDK for NodeJS check this documentation:

https://help.sap.com/doc/80f45c95be0b4080934064536d3da268/1.0/en-US/classes/_sap_cloud_sdk_core.envi...

I believe you could do this logic on the App Router, but I would prefer it to be on a separate module - such as an OData created via CAP. Once you have the IDs, you can use the setSettings method on your component controller or directly via attribute of your OData service:

https://help.sap.com/viewer/f6e70dd4bffa4b65965b43feed4c9429/Cloud/en-US/76f3217944ec4ee9b9e9987794d...

I would consider the OData service approach in your SAPUI5 application. It would be easy retrieve all the relevant data for the logged-in user - so each user would have their own repositoryID/objectID/etc.. being loaded from a backed where you would store such configuration based on user's group or something else... This will ensure that you only load the Reuse UI after you have all the necessary configuration related to the user which should happen after your user has logged in successfuly.

Best regards,
Ivan

[korayyersel_q · Accepted solution]

Hi Ivan,

Thanks for the detailed answer!

Regards,

Koray

[former_member258905]

Hello Tatiana,

The CF counterpart of neo-app.json to manage routes is the xs-app.json. You should also include the Application router (Approuter in short) part of your UI5 application as a separate module to take care of login process and routing. Finally, you should define the destinations either part of your manifest.yaml or mtad.yaml(in case of MTA deployments) under env section.

Refer to this link for more details.

Cheers!

[WRoeckelein]

Hi Tatiana and yuvaraj.ramamurthy

a HTML5 module inside an MTA (try with WebIDE Full-Stack creating a MTA and then create inside a HTML5 module) does automatically contain an app-router, however, there is nowhere a description on how to set the destination parameters (html5 module does not like env: in the mta.yml) in such a case.

Regards,

Wolfgang

[richard-zhao]

Hello, Tatiana Rastorgueva. Could you check the post below, Please?

Destination Configuration

Unlike SAP Cloud Platform Neo, the Cloud Foundry environment does not offer a Destination API that application developers may use directly to connect to a resource over the web. But this limitation can be easily overcome through User-Provided Environment Variables and consuming them in your application.

This is how it works on the Cloud Foundry environment.

• In your SAP Cloud Platform Cockpit, access the application.
• Define a new “User-Defined Variable”. An example could be: key = “ServiceDestination”. Value = [{name: “ServiceDestination”, url: “https://hostname.domain.com”, username: “Username”, password: “LoginPassword”}].
• In your application, use this variable to call the respective service.

[Mayanksaxena15]

Hello,

COuld you please eleborate , how to use the variable to call the service ?