SAP Community - HTML5

Application not found in local html5-apps-repo and there is no binding to remote html5-apps-repo

2023-08-21T13:48:50+02:00

I'm trying to create a new application from an existing one and both uses the same service. After building and running it at port 6004, its giving Internal Server Error.

From the log I can see

Application 'TestApp' not found in local html5-apps-repo and there is no binding to remote html5-apps-repo

Copy data from object page and insert into multicombo input of dialog/wizard

2023-09-21T13:23:15+02:00

Hello Experts,

I need to copy data from the object page by clicking the copy button and put those values in the wizard into the respective fields(multi-combo input fields) that appear by pressing the copy button on the object page.

Note; The FIORI app was created through CDS and CRUD operation through BOPF, The Copy button on the object page is the extension of the FIORI app.

Regards,
Subhanshu

React app development in Business Application Studio , testing with destination

2023-09-26T14:18:32+02:00

Hi ,

BAS provides HTML5 template to develop react applications. It also lists the destinations to developers as a data source for the app to consume. I see xs-app.json generated , which essentially helps after deploying the application to HTML5 repository / standalone app router

Question : I would love to test my application connecting to the destination , just like how we do with UI5 apps using ui5.yaml .

Sreehari

html email body alignment

2023-09-27T22:01:16+02:00

Hi,

I am changing a program to send an email in html format. Initially program used to send email in RAW format.

In RAW format email body contains dynamic data with header as shown below.

Item(position 3) Description(position 33) comments(position 71).

But the problem is when I change the document_type = 'HTM' the spaces are compromised.

Can some one suggest me on how to keep those space between the headers and items intact for html emailing.

thanks.

SAP Custom Domain Service and how to map route HTML5 App to a custom domain

2023-11-02T09:46:29+01:00

Hi Everyone,

We have developed an HTML5 app on SAP BTP that is visible in SAP BTP subaccount under HTML5 repository. The App is "Managed Application Router provided by SAP Build Work Zone, standard edition". We can see the app in CF terminal with the command CF html5-list.

We also have subscribed to SAP Custom domain service to shorten the URL for the app to something more elegant (and shortened).

We have completed the steps until the DNS configuration but cannot complete the 'Map your app to custom domain' step as unable to see the HTML app in the CF runtime.

I have following questions -

There is no documentation OR SAP HANA Academy tutorials that talk about a scenario to configure custom domain for the HTML5 app. Any thoughts where can I find it?
Can the HTML5 repository apps can be accessed in the CF runtime space for the given subaccount?!
If answer is yes to question 2, how to map-route the app to custom domain using command like cf map-route....?!!
Can the HTML5 apps be mapped to custom domain only in "Production account/environment"?

Any insights into this is helpful. Thanks!

Application not visible in HTML5 Section in cockpit after deployment done in BAS !

2023-11-28T07:17:58+01:00

Hello SAP Experts !

1. We have develop MTA project using Business application studio with backend service and it works fine locally.

2. We have compare it's file with other project's file, and we noticed that xs-security.json file not generated in our case.

3. Also, in mta.yaml there is uaa code is missing, because of these two reasons after deploy the project using Business application studio we are not able to see this deploy app in HTML5 Section in cockpit also in Instance section we are able to see only two configuration of this deploy app that is, html5-srv and destination-service 3rd configuration is missing that is Authorization because of this we are not able to see app in HTML5 Section.

any solution from your side ?

Thank you in advance

503 Service Temporarily Unavailable : HTML5 +CAP + Cloud Foundry

2023-12-16T17:57:54+01:00

Hello Experts,

We are trying to deploy one simple app on Cloud Foundry and getting the below error.

"503 Service Temporarily Unavailable"

I am using MTA to deploy the app but after deployment, we are getting this error. Below is the code repository.

Any suggestion is highly appreciated.

Link : ..

Best regards,

Chandan

Offer Letter Template Edits

2024-01-30T06:57:35.295000+01:00

Is there a way users can edit the offer letter template in html format without the need to manual code each line or use a public free html edit tool? For privacy reasons we prefer not to have our offer letters exposed on a public site simply to edit a template we would update on a regular basis.

Thanks

HTML5 Application 403 Forbidden error while calling Cloud Connector

2024-03-12T15:54:02.407000+01:00

Hello, I have created an UI5 Fiori Application using BAS in BTP. When i do a prereview of the application i am getting the results correctly. The application is picking up Location Hierarchy and putting it in a tree structure. The location hierarchy is read from the On-Premises S4Hana system using Cloud connector and Destination defined in the BTP. In the BAS when i run the CURL command and provide the URL. I am able to get the metadata.

Here is the preview of my application

Now i deployed this application to BTP Cloud Foundry as an HTML5 Application and it was deployed successfully without any error from BAS

Now, when i try to run the application from HTML5 Application Tab/ Repository. I am not able to get the Location tree loaded.

When i debug the calls in Google Chrome developer mode. I noticed there is an 403 Error.

In the Preview tab i see

I spoke to my Network and BASIS Admin. They do not have the UCON enabled in the On-Premises system.

I am totally lost and would appreciate if anyone can help me resolve the issue.

Here is how my xs-app.json file looks like

here is xs-security.json file looks like

Thanks for all your help and time in helping me resolve this issue.

Logs of HTML5 Applications Managed by SAP Cloud Platform (Work Zone)

2024-03-20T10:29:55.229000+01:00

Dear colleagues,

we developed HTML5 Applications Managed by SAP Cloud Platform (Work Zone/Launchpad)

and need the logs of the applications.

Is there a way to get the application logs?

Best regards,

Andreas

Different behaviour Business Application Studio vs SAP BTP HTML5-Application with Fragments

2024-03-26T13:43:20.018000+01:00

Hi all,

I'm a Javascript-Noob but need some of it for my Fiori Elements Enhancements.

I built an App where I want to have a Custom Action. Within this action I'm calling an API to fetch values and then calling a fragment I built with XML. Inside the Fragment the values fetched will be visible in a dropdown. On Business Application Studio everything is working. My Fragmentis opening without problems and my data is presented there.

Then I deployed the App to our BTP as an HTML5-Application (via MTA). The App is opening and everything works beside the Fragment. My coding looks like this (instead of debugger I'm doing some things, but in the end I'm opening the Fragment via the open()-Method.

var QueryTaskCodes = jQuery.ajax
    ({
        type: "GET",
        contentType: "application/json",
        url: URLTaskCodes,
        dataType: "json",
        success: function (data) {
            if (!that.pDialogCloseCreateNotification) {
                that.loadFragment({
                    id: "CreateAndClose",
                    name: "some.app.ext.fragment.CreateAndClose",
                    type: "XML",
                    controller: that //this
                    }).then((oDialog) => {
                        debugger;
                        that.pDialogCloseCreateNotification = oDialog;
                        that.pDialogCloseCreateNotification.open();
                        });
    }}})

Within the Busines Application Studio Preview the debugger shows, that oDialog is set.

However, on BTP HTML5-App it's undefined.

What am I missing? What am I doing wrong?

Best wishes,

Julian

binding issue in planning calender

2024-04-08T12:26:46.865000+02:00

<mvc:View controllerName="vaspp.timetracking.controller.timetracking"

xmlns:core="sap.ui.core"

xmlns:mvc="sap.ui.core.mvc"

xmlns:unified="sap.ui.unified"

xmlns="sap.m">

<PlanningCalendar

id="PC1"

appointmentsVisualization="Filled"

viewChange="viewChange"

viewKey="Week"

appointmentSelect="handleAppointmentSelect"

showEmptyIntervalHeaders="false"

showWeekNumbers="true"

intervalSelect="handleAppointmentAddWithContext"

rows="{path: '/'}">

<views>

<PlanningCalendarView id="_IDGenPlanningCalendarView1"

key="Day"

intervalType="Hour"

description="Day"

intervalsS="3"

intervalsM="6"

intervalsL="12"

showSubIntervals="true">

</PlanningCalendarView>

<PlanningCalendarView id="_IDGenPlanningCalendarView2"

key="Week"

intervalType="Day"

description="Week"

intervalsS="1"

intervalsM="2"

intervalsL="7"

showSubIntervals="true">

</PlanningCalendarView>

<PlanningCalendarView id="_IDGenPlanningCalendarView3"

key="OneMonth"

intervalType="Month"

description="Month">

</PlanningCalendarView>

</views>

<rows>

<PlanningCalendarRow id="PlanningCalendarRowtimetracking"

title="{firstName} {lastName}" text="{designation}"

appointments="{path : 'p_appointments', templateShareable:false}"

intervalHeaders="{path: 'p_appointments', templateShareable: false}" >

<unified:CalendarAppointment id="CalendarAppointmenttimetracking"

startDate="{startDate}" endDate="{endDate}" title="{timesheetModel>totalHours}"

type="{= ${status} === 'Approved' ? 'Type08' : (${status} === 'Rejected' ? 'Type13' : 'Type06') }" tentative="false" >

</unified:CalendarAppointment>

</appointments>

<unified:CalendarAppointment

id="CalendarIntervaltimetracking"

startDate="{startDate}" endDate="{endDate}" title="{name}" text="{description}"

type="Type02" tentative="false"

</unified:CalendarAppointment>

</intervalHeaders>

</PlanningCalendarRow>

</rows>

</PlanningCalendar>

</VBox>

</mvc:View>
startDate="{startDate}" endDate="{endDate}" title="{timesheetModel>totalHours}" not binding

SAP Build apps, HTML 5 issue

2024-04-09T13:10:56.008000+02:00

Hi,

I was able to deploy my SAP Build App apps to the BTP as HTML5 apps.

However, while clicking the link of these apps, i only have one message in the page ' Internal Server Error' .

Everything was working several days ago, and i did not change anything

Thanks in advance !

Develop a vue3 application on btp

2024-04-09T14:32:16.346000+02:00

I want to build a VUE3 application on btp, can anyone provide an example of mta.yaml and package.json? Preferably a sample project,thanks!

I've deploy finished today, but i can't find the h5 application on BTP, is there anybody help us?

mta.yaml

_schema-version: "3.2"
ID: ariba-integration-web-test
version: 0.0.1
modules:
#  - name: ariba-integration-web-test-destination-content
#    type: com.sap.application.content
#    requires:
#      - name: ariba-integration-web-test-destination-service
#        parameters:
#          content-target: true
#      - name: ariba-integration-web-test_html_repo_host
#        parameters:
#          service-key:
#            name: ariba-integration-web-test_html_repo_host-key
#      - name: uaa_test
#        parameters:
#          service-key:
#            name: uaa_test-key
#    parameters:
#      content:
#        instance:
#          destinations:
##            - Name: ariba-integration-web-test_test_html_repo_host
##              ServiceInstanceName: test-html5-app-host-service
##              ServiceKeyName: test_html_repo_host-key
##              sap.cloud.service: ariba-integration-web-test
#            - Authentication: OAuth2UserTokenExchange
#              Name: ariba-integration-web-test_uaa_test
#              ServiceInstanceName: test-xsuaa-service
#              ServiceKeyName: uaa_test-key
#              sap.cloud.service: ariba-integration-web-test
#          existing_destinations_policy: ignore
#    build-parameters:
#      no-source: true
  - name: ariba-integration-web-test_ui_deployer
    type: com.sap.application.content
    path: .
    requires:
      - name: test-html5-app-host-service
        parameters:
          content-target: true
    build-parameters:
      build-result: resources
      requires:
        - artifacts:
            - ariba-integration-web-test.zip
          name: ariba-integration-web-test
          target-path: resources/
  - name: ariba-integration-web-test
    type: html5
    path: ./
    build-parameters:
      builder: custom
      commands:
#        - npm install
        - npm run build-btp
      supported-platforms: []
#  - name: ariba-integration-web-test_app-router
#    type: approuter.nodejs
#    path: approuter
#    parameters:
#      disk-quota: 256M
#      memory: 256M
#    requires:
#      - name: ariba-integration-web-test_html_repo_host
#      - name: ariba-integration-web-test_app-runtime
#      - name: ariba-integration-web-destination
#      - name: uaa_test
resources:
  - name: ariba-integration-web-test-destination-service
    type: org.cloudfoundry.managed-service
    parameters:
      config:
        HTML5Runtime_enabled: true
        version: 1.0.0
      service: destination
      service-name: ariba-integration-web-test-destination-service
      service-plan: lite
  - name: ariba-integration-web-test_html_repo_host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-name: ariba-integration-web-test-html5-app-host-service
      service-plan: app-host
  - name: ariba-integration-web-test_app-runtime
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: uaa_test
    type: org.cloudfoundry.managed-service
    parameters:
      path: ./xs-security.json
      service: xsuaa
      service-name: test-xsuaa-service
      service-plan: application
  - name: test-html5-app-host-service
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-name: test-html5-app-host-service
      service-plan: app-host
  - name: ariba-integration-web-destination
    type: org.cloudfoundry.managed-service
    parameters:
      config:
        HTML5Runtime_enabled: true
        init_data:
          instance:
            destinations:
              - Authentication: NoAuthentication
                Name: ui5
                ProxyType: Internet
                Type: HTTP
                URL: https://ui5.sap.com
              - Authentication: NoAuthentication
                HTML5.ForwardAuthToken: true
                Name: SrvDest
                ProxyType: Internet
                Type: HTTP
                URL: http://124.223.52.62:8026
            existing_destinations_policy: update
        version: 1.0.0
      service: destination
      service-name: ariba-integration-web-destination
      service-plan: lite

package.json

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "authenticationType": "none",
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt"
    }
  ]
}

xs-app.json

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "authenticationType": "none",
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt"
    }
  ]
}

Adding my SAP Build Workzone app in another SAP Fiori Launchapd

2024-04-10T15:07:38.899000+02:00

Hi,

I created a Launchpad in Workzone where I added several apps (HTML5 apps that were coming from SAP Build Apps, that i deployed in the BTP)

However, I want to have these apps as well in another Launchpad, SAP Fiori Launchpad.

Do you know how should I proceed? thanks in advance

Image 1 : SAP Build Workzone Launchpad

Image 2 : SAP Fiori Launchpad

smarttable barcode

2024-04-10T17:47:20.454000+02:00

Hi,

I need to convert a smart table cell into a barcode image.

I am using the function JsBarcode inside a formatter but I am having an error because, I think, the table is not rendered yet.

In my view.xml I have:

<cells>

<Image id="T" src="{path: 'Obj_key', formatter:'.formatBarcode'}" />

</cells>

Is there a way I can manipulate a smart table item cell after it has been rendered, as I think this might solve the issue?.

Thanks,

Javier

sapui5 smarttable barcode

2024-04-10T18:21:21.439000+02:00

Hi,

I need to convert a smart table cell into a barcode image.

I am using the function JsBarcode inside a formatter but I am having an error because, I think, the table is not rendered yet.

In my view.xml I have:

<cells>

<Image id="T" src="{path: 'Obj_key', formatter:'.formatBarcode'}" />

</cells>

Is there a way I can manipulate a smart table item cell after it has been rendered, as I think this might solve the issue?.

Thanks,

Javier

How to config my vue application's router on BTP

2024-04-11T10:47:27.367000+02:00

I deploy a vue3 application finished, and it can be found on BTP, but when i onclick the application's link, it was not linked to a correct page. When i run the application on my local computer, i use npm run dev, and i can access the url http://myhost:8080, it redirect a login page correctly. I want to know how to configure the routing of my application so that I can access my application at https://btpHost and the application also calls other system apis. For example, in my vue application, I need to call http://myhost/{api}/{url}, How should I set it?

#BTP,#VUE,#destination, #cloud foundry @SAPSupport @Ivan-Mirisola @Edrilan_Berisha @Sandra_Rossi @N1kh1l

'Error: Resource for '/' not found in local html5-apps-repo'

2024-05-10T08:13:11.415000+02:00

Hi All,

A React application has been created using Standard HTML5 Template and Managed app router.

We are able to deploy application and it is working fine.
exactly the way it is mentioned in this blog
https://community.sap.com/t5/technology-blogs-by-sap/react-development-with-sap-business-application-studio/ba-p/13520135

but unable to run the application locally with the help of run configuration.

getting below error

How to ensure changing the sap.app.id in manifest.json won't affect views and controllers?

2024-05-17T12:33:39.460000+02:00

Hello. I have a SAP CAP Full Stack app with some custom ui5 code. There are some views and controllers created.
The app is working currently fine. But I need to deploy the same app to two different CF spaces, and because of that I need to change the sap.app.id in the manifest.json for one of the two app versions, because it is not allowing two apps to have the same sap.app.id.

When I change the id in the manifest from "m-app" to "m-app-predev", I started getting the:
ModuleError: failed to load 'm-app-predev/Component.js' from /f1d99111-9c46-43a0-80e2-20075fe117fc.mapppredev.mapppredev/~170524095809+0000~/Component.js: 404

Here is my manifest.json:

{
    "_version": "1.49.0",
    "sap.app": {
        "id": "m-app-predev",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "title": "M app PREDEV",
        "description": "M app PREDEV",
        "applicationVersion": {
            "version": "1.0.5"
        },
        "dataSources": {
            "testResultsRemote": {
                "uri": "/epm/testresults/",
                "type": "OData",
                "settings": {
                    "odataVersion": "4.0",
                    "localUri": "localService/metadata.xml"
                }
            },
            "testResultsAggRemote": {
                "uri": "/epm/resultsagg/",
                "type": "OData",
                "settings": {
                    "odataVersion": "4.0",
                    "localUri": "localService/metadata.xml"
                }
            },
            "performanceResultsAggRemote": {
                "uri": "/epm/resultsperfagg/",
                "type": "OData",
                "settings": {
                    "odataVersion": "4.0",
                    "localUri": "localService/metadata.xml"
                }
            },
            "performanceResultsRemote": {
                "uri": "/epm/testperfresults/",
                "type": "OData",
                "settings": {
                    "odataVersion": "4.0",
                    "localUri": "localService/metadata.xml"
                }
            }
        },
        "sourceTemplate": {
            "id": "@sap/ux-app-migrator:freestyle",
            "version": "1.12.5",
            "toolsId": "bb6f476c-771d-46d9-b6ac-fef2d8c7e824"
        },
        "crossNavigation": {
            "inbounds": {
                "epm-test-reporting-inbound": {
                    "signature": {
                        "parameters": {},
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "mapppredev",
                    "action": "display",
                    "title": "M App PREDEV",
                    "subTitle": "M App PREDEV",
                    "icon": "sap-icon://electrocardiogram"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "rootView": {
            "viewName": "view.App",
            "type": "XML",
            "async": true,
            "id": "app"
        },
        "dependencies": {
            "minUI5Version": "1.60",
            "libs": {
                "sap.m": {}
            }
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "i18n.i18n"
                }
            },
            "testResults": {
                "dataSource": "testResultsRemote",
                "settings": {
                    "operationMode": "Server"
                }
            },
            "testResultsAgg": {
                "dataSource": "testResultsAggRemote",
                "settings": {
                    "operationMode": "Server"
                }
            },
            "testResultsPerfAgg": {
                "dataSource": "performanceResultsAggRemote",
                "settings": {
                    "operationMode": "Server"
                }
            },
            "testResultsPerf": {
                "dataSource": "performanceResultsRemote",
                "settings": {
                    "operationMode": "Server"
                }
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "view",
                "controlId": "app",
                "controlAggregation": "pages",
                "async": true
            },
            "routes": [
                {
                    "pattern": "",
                    "name": "overview",
                    "target": "overview"
                },
                {
                    "pattern": "xsunit/{testcase}",
                    "name": "xsunit",
                    "target": "xsunit"
                },
                {
                    "pattern": "performance",
                    "name": "performance",
                    "target": "performance"
                }
            ],
            "targets": {
                "overview": {
                    "viewId": "overview",
                    "viewName": "Overview"
                },
                "xsunit": {
                    "viewId": "xsunit",
                    "viewName": "XsUnit"
                },
                "performance": {
                    "viewId": "performance",
                    "viewName": "Performance"
                }
            }
        }
    },
    "sap.fiori": {
        "registrationIds": [],
        "archeType": "transactional"
    },
    "sap.cloud": {
        "public": true,
        "service": "m.app.predev"
    }
}