Link theming service to Run Configuration

[pietrom_]

I have created an SAPUI5 application with standalone approuter in BAS (Business Application Studio) on a Cloud Foundry environment.

I want to link the Run Configuration to the theming service I've created in order to launch the app locally with a custom theme.

Steps I've taken:

• I've created a theming service via mta.yaml
• I've created a custom theme with the Theme Designer and I've published it
• I've modified the index.html in order to use the custom theme (data-sap-ui-theme, data-sap-ui-theme-roots, data-sap-ui-versionedLibCss)
• I've added a route to the xs-app.json of my SAPUI5 application in order to link the theme path to the theming service

        {
            "source": "^/comsapuitheming.runtime/(.*)$",
            "target": "$1",
            "service": "com.sap.ui.theming",
            "endpoint": "runtime",
            "authenticationType": "xsuaa",
            "csrfProtection": false,
            "scope": [
                "$XSAPPNAME.User"
            ]
        },

The Run Configuration launches the following script

fiori run --open 'index.html?sap-client=100'

but when the application is launched all the theming resources are not loaded by chrome.

Can someone help me?

Thanks,

Pietro

[Uwe_Klinger]

Hi Pietro,

I can imagine two things that may go wrong:

1. You haven't bound the credentials to the theming service to your run configuration: https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/2f8aa08fa9b949a7b31be7318c4...
2. The path to the themeroot is wrong, see examples here: https://help.sap.com/viewer/09f6818d8e064537973102d6289e2aca/Cloud/en-US/80642ec6cc3c4b7cb840e17dfec...

I hope this helps!

Best regards,
Uwe

[pietrom_]

Hi Uwe,

thank you for your reply, I believe that I'm the first scenario but I don't know how to link the theming service to the run configuration.

This is the run configuration:

    {
      "name": "my-sap-cons-responsabile Standalone",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "cwd": "${workspaceFolder}",
      "windows": {
        "runtimeExecutable": "npm.cmd",
        "args": [
          "--",
          "--backendConfig",
          "\"[{\\\"path\\\":\\\"/sap\\\",\\\"destination\\\":\\\"my-Gateway-dev-cons-resp-MSS2\\\"}]\""
        ]
      },
      "runtimeArgs": [
        "run-script",
        "start-noflp"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229,
      "env": {
        "DEBUG": "--inspect",
        "run.config": "{\"handlerId\":\"fiori_tools\",\"runnableId\":\"/home/user/projects/my-sap-cons-responsabile\"}"
      },
      "envFile": "${workspaceFolder}/.env",
      "args": [
        "--",
        "--backendConfig",
        "[{\"path\":\"/sap\",\"destination\":\"my-Gateway-dev-cons-resp-MSS2\"}]"
      ]
    }

I have an .env file on the root of the workspace folder where I've bound the xsuaa and the theming service.

VCAP_SERVICES={"theming": ..content redacted..,"xsuaa": ..content redacted..]}

but the fiori-tools-proxy launched by the 'fiori' script seems unable to 'read' or 'handle' the VCAP_SERVICES variable in the .env file. I've made several attempts and read documentation online but I can't find anything of help.

I've recently migrated the project to the new SAP UI5 tooling with the BAS wizard, before it it worked.

Best regards,

Pietro

[Uwe_Klinger]

Hi Pietro,

I have no experience with the fiori proxy, so I don't know if it works with services provided using VCAP_SERVICES at all. There could be also an issue in the VCAP_SERVICES variable's value. I don't know.

However, if fiori proxy supports destinations, you could also create a destination to theming service using the credentials and OAuth2ClientCredentials authentication type. From your launch.json sample it looks like that would be possible wih --backendConfig.

The other possibility would be to run the Approuter locally: https://www.npmjs.com/package/@sap/approuter

The Approuter will definitely look into the VCAP_SERVICES variable. You might need a different config then the AppRouter on cloud. Otherwise you will need some additional steps to get the authentication working.

Best regards,
Uwe

[zdravko_georgiev]

Hi Pietro,

when you start the application. Do you see requests to the theming service in the Network trace of the Chrome Dev Tools?

Best regards,

Zdravko

[pietrom_]

Hi Zdravko
I can see requests to the theming resources, but they are made to the local server:

https://{CONTENT_REDACTED}.eu10.applicationstudio.cloud.sap/comsapuitheming.runtime/themeroot/v1/UI5...

Best regards,
Pietro

[pietrom_]

Is there anyone who has experience with the fiori proxy?

I can't find any documentation to figure out how to link the theming service, and this is painfully slowing down our developments.

Thanks,

Pietro

[zdravko_georgiev]

Hi pietro_modi42,

I believe that you need update the ui5.yaml of your application with the details of the theming service. Please see here on how to define backends for the proxy https://www.npmjs.com/package/@sap/ux-ui5-tooling#2-proxy. I believe that you need to provide one additional path in the "backend" section in the ui5.yaml. E.g. liket this.

...
- path: /comsapuitheming
  url: <URL to the theming service>
  destination: <Your destination>

You mentioned that you can see the requests made to the theming server. Are the requests successful or 404?

[pietrom_]

Hi zdravko.georgiev,
I've tried adding the following lines to my ui5.yaml and ui5-local.yaml:

      - path: /comsapuitheming.runtime
        pathPrefix: /
        url: https://theming-runtime.cfapps.eu10.hana.ondemand.com 

I've not used 'destination' as you suggested because it is not a link to a backend server (I tried it anyway, unsuccessfully).

Now I'm getting a 401 Unauthorized for the theming resources calls.
I guess I'm missing something in the url parameter, I don't know exactly where are the resources stored.
Currently requests looks like this:

Request URL: https://workspaces-ws-[REDACTED].eu10.applicationstudio.cloud.sap/comsapuitheming.runtime/themeroot/v1/UI5/sap/ui/core/themes/isp_scp_people/library.css?version=1.84.10&sap-ui-dist-version=1.84.11

and this is 'converted' by the fiori proxy:

info server:ux-proxy Rewrite path /comsapuitheming.runtime/themeroot/v1/UI5/sap/ui/layout/themes/isp_scp_people/library.css?version=1.84.10&sap-ui-dist-version=1.84.11 > /themeroot/v1/UI5/sap/ui/layout/themes/isp_scp_people/library.css?version=1.84.10&sap-ui-dist-version=1.84.11

The actual URL that is called by the proxy should be:

https://theming-runtime.cfapps.eu10.hana.ondemand.com/themeroot/v1/UI5/sap/ui/layout/themes/isp_scp_...

Do you have any idea of the actual URL where the Theming Runtime is serving my custom theme resources? Do I need, for example, to add the Tenant ID, Subaccount ID or Space ID to the path?

[pietrom_]

If I'm not mistaken, running a non-UI5-tooling UI5 project in verbose log mode, I've found that the actual URL called by the (working) AppRouter should be in fact:

https://theming-runtime.cfapps.eu10.hana.ondemand.com/themeroot/v1/UI5/sap/ui/layout/themes/isp_scp_...

So I'm guessing that maybe some authentication headers are not sent with the request to the theme resource.

[zdravko_georgiev]

Hi pietro_modi42

with the configuration provided by you in the "ui5.yaml" the fiori proxy will intercept any request that starts with "comsapuitheming.runtime" and will forward it to "https://theming-runtime.cfapps.eu10.hana.ondemand.com", whereas the "comsapuitheming.runtime" will be removed from the request. Hence the request

 https://applicationstudio.cloud.sap/comsapuitheming.runtime/something

will be forwarded to

https://theming-runtime.cfapps.eu10.hana.ondemand.com/something

This is what you want, right?

How is the access to the https://theming-runtime.cfapps.eu10.hana.ondemand.com configured? What happens if you open https://theming-runtime.cfapps.eu10.hana.ondemand.com/themeroot/v1/UI5/sap/ui/layout/themes/isp_scp_...directly in the browser? Is this URL also directly accessible in BAS? What happens if you execute this in BAS terminal?

curl https://theming-runtime.cfapps.eu10.hana.ondemand.com/themeroot/v1/UI5/sap/ui/layout/themes/isp_scp_...

[pietrom_]

I guess the URL is right but, alas, it's a guess, I'm not sure.

If I try to open the URL directly I get an "Unauthorized" response, both from the CLI (BAS terminal) and the browser.

[zdravko_georgiev]

Hi pietro_modi42,

you've mentioned "I've created a theming service via mta.yaml" . Did you followed a tutorial? Is there a way for me to reproduce what you did?

[pietrom_]

Hi zdravko.georgievI used one of the SAPUI5 Freestyle Application with Standalone AppRouter wizards offered by BAS and then I changed the mta.yaml as following:

- name: ui5-approuter
  type: approuter.nodejs
  path: approuter
  requires:
  - name: ui5_html_repo_runtime
  - name: ui5_xsuaa
  - name: ui5_dest
  - name: ui5_conn
  - name: ui5_theme

resources:
- name: ui5_theme
  parameters:
    service-name: ui5_theme
    service: theming
    service-plan: standard
  type: org.cloudfoundry.managed-service

Let me know if you need more details or if something isn't clear.

[zdravko_georgiev]

Hi pietro_modi42,

thanks, I will see what I can find and will get back to you.

Best regards,

Zdravko

[zdravko_georgiev]

Hi pietro_modi42,

are you able to deploy your application and use your custom theme in the deployed application?

Best regards,

Zdravko

[pietrom_]

Hi zdravko.georgiev,

yes, I have no issues with the deployed application. I'm having the issue only when the application is run locally from BAS.

Best regards,
Pietro

[zdravko_georgiev · Accepted solution]

Hello pietro_modi42,

I was able to reproduce the issue locally in BAS. Unfortunately I must say that currently it is not possible to run application locally with linked theming service.

However I can propose a workaround. You can export your theme and then run it locally together with your application.

To do so you need to do the following:

1. Export your theme. By exporting expand the "Optional Settings (for Experts)" and select "Source Files + CSS Resources + Base Theme Resources".

2. Copy the zip file into your BAS workspace and extract it to e.g. "/home/user/projects/<mytheme>"

3. Assuming you have the following configuration in your index.html

data-sap-ui-versionedLibCss="true"
    data-sap-ui-theme="<mytheme>"
    data-sap-ui-theme-roots='{
        "<mytheme>": "/comsapuitheming.runtime/themeroot/v1/UI5"
    }'

then you need to add the following configuration into the "ui5.yaml"

  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: "/comsapuitheming.runtime/themeroot/v1/"
          src: "/home/user/projects/<mytheme>"
          fallthrough: false

4. Now if you execute

npx fiori run --open index.html

the application should start with your custom theme.

Hope this helps!

Best regards,

Zdravko

[pietrom_ · Accepted solution]

Hello zdravko.georgiev ,
first of all thank you for your help on this issue.

The workaround you proposed is surely a step forward but I believe it should be still possible to use CF services like the theming one in locally run applications, like the old non-UI5-tooling system allowed me to.

Do you know if there will be a "fiori-tools-cfservice" middleware in the near future offered by SAP?
Could you in case put forward an internal request to implement something like this?

I'm working in a highly customized application scenario where changes to the theme (CSS section) are not uncommon.

Best regards,
Pietro

[zdravko_georgiev · Accepted solution]

Hi pietro_modi42,

thanks a lot for you feedback! I will forward your query to the responsible team.

Best regards,

Zdravko

[pietrom_ · Accepted solution]

Hi Zdravko,

do you have any news?

Regards,
Pietro

[zdravko_georgiev · Accepted solution]

Hi Pietro,

there is maybe one thing that you can try, so that you won't need to download the theme locally. Theoretically what you can do is to create a destination in BTP that points to your theming service. In the destination you will need to set as Authentication "OAuth2ClientCredentials" and provide the Client ID and the Client Secret of your theming service. Finally you will need to update the "ui5.yaml" so that the theming service requests can be forwarded to the destination.

Do you have access to your BTP account? Is creating a destination an option for you?

Best regards,

Zdravko

[pietrom_ · Accepted solution]

Hi zdravko.georgiev,

sorry for the late reply. Yes I have access to the BTP development subaccount and I am able to create new destinations.

This is what I've done:

Unfortunately I don't know how to update the ui5.yaml file with the request forwarding. I've tried looking the documentation to no avail. Can you help me on that?

Best regards,

Pietro

[zdravko_georgiev · Accepted solution]

HI pietro_modi42,

you need to add one additional backend in the "ui5.yaml". You should add the following under backend

- path: /comsapuitheming.runtime
  pathPrefix: /
  url: https://theming-runtime.cfapps.eu10.hana.ondemand.com
  destination: Theming

Hope this helps!

Best regards,

Zdravko

[enrico_saroldi71 · Accepted solution]

Hi Zdravko,

i'm a colleague of Pietro ,

we tried the changes to the ui5.yaml file but unfortunately they don't work

checking the destination return this message

in the execution of the application we get a 404 returncode

this our ui5.yaml changes

have you some advice?

thank you

best regards

Enrico

[zdravko_georgiev · Accepted solution]

Hi Enrico,

what is the status of the request to the theming service, wenn the application is run locally? Ist is 200, 404, 500? Can you share the response of the request?

Best regards,

Zdravko

[enrico_saroldi71 · Accepted solution]

Hi Zdravko,

the status of the request is 404

in the debug console i don't see the destination of theming service on the backend section

thank you

Best regards,

Enrico

[zdravko_georgiev · Accepted solution]

Hi Enrico, based on the screenshots I believe that the configuration in the yaml file is not correct.

Please see here an example on how to define multiple backends https://www.npmjs.com/package/@sap/ux-ui5-tooling#connecting-to-multiple-back-end-systems. Please pay attention to the indentation, it is very important in yaml files!

Hope this helps!

Best regards,

Zdravko