Skip to Content
Product Information
Author's profile photo Yuval Morad

SAP Fiori Development with SAP Business Application Studio

Overview

SAP Business Application Studio enables you to develop SAP Fiori applications for various scenarios, and deploy to different target runtimes:

Let’s go over the main tools and capabilities of SAP Fiori application development in SAP Business Application Studio.

The SAP Fiori Dev Space

This is where your journey starts. After you complete on-boarding, open the SAP Business Application Studio dev space manager to create your first SAP Fiori development environment.

You can read more about the dev space concept and capabilities in this blog post.

From the Create a New Dev Space screen, select the SAP Fiori dev space. The SAP Fiori dev space is our tailored development environment, packed with everything you need for developing an SAP Fiori Application.

The SAP Fiori dev space includes the SAP Fiori elements and freestyle tools, launchpad, UI adaptation, SAPUI5 tools, and more.

 

Create an SAP Fiori Application

SAP Business Application Studio offers various SAP Fiori freestyle and SAP Fiori elements templates, supports ABAP or Cloud Foundry target runtimes, and enables service selection from multiple data sources.

Launch Options

To create a new SAP Fiori project, you can open the new application wizard in 2 ways:

  • From the Welcome page, click New project from template.

  • From the menu, navigate to View> Find Command or press F1 and choose SAP Business Application Studio: Create Project from Template.

To create a new project from the terminal, enter the “yo” command.

 

Target Runtime

The goal is to generate a project that is ready for local run and deployment without additional manual coding.
Selecting between ABAP or Cloud Foundry as the project’s target runtime affects the structure of the created project and its content, so it’s important to choose the correct target runtime.

Template Selection

You can select from the rich set of SAP Fiori freestyle and SAP Fiori elements templates that are available.

Service Selection

You can consume your service from the following data source providers:

  • My SAP Systems based on destinations in the subaccount. This data source provides a service catalog or service URL.
  • ABAP Cloud system based on an ABAP Cloud System service instance. This data source provides a service catalog.
  • Workspace based on a service you created in your full-stack SAP Cloud Application Programming Model (aka CAP).
  • Local service based on a local “metadata.xml” file from the workspace. This data source is mainly used as a mock.
  • SAP API Business Hub based on a destination in the subaccount. This data source provides a service catalog.

Select your service from the various data source providers in the Consume Services step and then bind the data to your template.

 

Develop an SAP Fiori Application

 

SAP Fiori Freestyle

Layout Editor

You can develop your “view.xml” file using a graphical drag and drop tool and you can bind your controls and properties to the relevant model. For more information, click here.

Code Assist

You can use code assist for your “view.xml” file for assistance with SAPUI5 elements, aggregation properties, events, enumeration values, associations, and namespaces.
You can also include code assist for deprecated and experimental controls from your user preferences. More information can be found here.

Code assist for the “manifest.json” file using the latest SAPUI5 schema (uploaded to the schema store) is available.

Code assist for SAPUI5 controls in JavaScript is also available. To add it, perform “npm install” on your project and add “jsdoc” for the parameters of your JavaScript file.

Code Validation

You can use code validation for your “view.xml” file to check for non-existing SAPUI5 elements, wrong types and cardinality inside an aggregation, duplicate IDs, and deprecated SAPUI5 elements.

Code validation for the “manifest.json” file using the latest SAPUI5 schema (uploaded to the schema store) is available.

Code validation using ESLint for a JavaScript file is also available. To add it, perform “npm install” on your project and adjust your “.eslintrc” file.

SAP Fiori Elements

Annotations XML editor 

This editor provides input help and validation based on the project metadata, OData vocabularies and an analysis of the project structure.

Page Map

This tool provides a visual representation and maintenance of the application’s pages, navigations, and the service entities that it uses.

Service modeler

This graphical tool provides visualization and maintenance of an OData service, including its backend and local annotations.

More information regarding SAP Fiori elements development can be found here.

Test Your SAP Fiori Application

Overview

SAP Business Application Studio utilizes the SAPUI5 standard development tools, such as the SAPUI5 tools and application router for running your SAP Fiori applications on your local dev space, as close as possible to your target runtime environment.

Run configuration is one of the SAP Business Application Studio productivity tools, enabling you to create multiple configurations and execute them with one click.

Run Configuration

You can create multiple run configurations for the same SAP Fiori application including the following options:

1. Runnable files – productive, mock, OPA/QUnit

2. SAPUI5 versions

3. Target data source systems


 

4. Cloud Foundry dependencies, such as xsuaa or ABAP Cloud

Run Execution

Once a configuration is created, click the “Run” button to run the application in a separate browser.

The run tool installs all dependencies that are missing for run execution and uses a dedicated run port. If you already have a running application using the dedicated SAP Fiori port (6004), you must stop the running application first.

You can locally run your application utilizing all authentication methods configured in the subaccount destination, such as principle propagation.

More information regarding local run can be found here.

 

Build and Deploy your SAP Fiori Application 

SAP Business Application Studio provides integrated options from the terminal for build and deployment of your SAP Fiori application to your target runtime.

Build and Deploy to ABAP

If you created a project with the ABAP target runtime, follow these steps from the terminal:

  1. Perform “npm install” for the project if it wasn’t done automatically upon project creation.
  2. Perform “npm run build”, which triggers the SAPUI5 build and generates your mini application inside the “dist” folder.
  3. Perform “abap-deploy”, which deploys your application interactively. You can also deploy automatically using deploy configuration.

The deploy to ABAP in SAP Business Application Studio is faster than in SAP Web IDE Full-stack.
Note that your target ABAP system must include the SAP_UI 753 SP00 or higher version of the software component.

More information regarding build and deploy to ABAP can be found here.

Build and Deploy to Cloud Foundry

If you created a project with the Cloud Foundry target runtime, perform these steps:

  1. Log in to the target Cloud Foundry space, where you want to deploy the application.
    From the menu, click View > Find Command to open the command palette.
  2. Enter “MBT build” in the terminal, which generates your MTA archive file, or right-click on the project’s “mta.yaml” file and click Build MTA.

  3. Enter “CF deploy <mtar file name>” in the terminal, which deploys your application to the space that you logged into, or right-click on the mtar file and click Deploy MTA Archive.

More information regarding build and deploy to Cloud Foundry can be found here.
A good blog post about MTA tools can be found here.

 

Conclusion

You are now a bit more familiar with the following SAP Fiori scenarios and development tools that SAP Business Application Studio has to offer:

  1. SAP Fiori scenarios for ABAP and Cloud Foundry
  2. Project creation capabilities
  3. Data source providers
  4. Code and visual development tools for a SAP Fiori freestyle and an SAP Fiori elements
  5. Local run of an SAP Fiori application
  6. Build and deploy to ABAP and Cloud Foundry

I invite you to try our SAP Fiori development tools with SAP Business Application Studio and will be happy to hear your feedback personally or here in the comments.

You can take your first steps using the Trial environment. Use this simple on-boarding tutorial, develop an SAP Fiori application using this group of tutorials, and take a look at all of the SAP Business Application Studio tutorials.

 

Assigned Tags

      49 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Hello,

      Thanks this is very helpul although I don't see how SAP business application studio is an improvement of web ide, everything seems more complicated (for example, the build and deployed is way more simple on webide...).

       

      I tried to create a new fiori project with fiori element template, but on the last step, even if everything is filled up correctly, the "NEXT" button is greyed out. Do you know why ?

       

      I read a previous blog post about migration of webide project to sap Business application studio. What I don't understant is why a simple git clone doesn't work... It worked with webide.

      Author's profile photo Rima Sirich
      Rima Sirich

      Hi Louis,

      Which git repository did you try to clone? In case it is git on premise repository, Cloud Connector should be configured and a dedicated destination should be added as well. In case it is a public repository and you used a ssh url, probably a certificate was missing. If you will share more details, I'll be glad to try to assist you to resolve the git clone issue 😉

      Best Regards,

      Rima

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Hi Rima,

      Thank you, the problem was that it was not reconized as a fiori project (not able to use the guided development for example).

      I tried again and it is fixed (or I did something wrong the previous time, that’s not impossible :)). I'm still not able to run the project though... I'll tried later to understand why.

       

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Hi Louis,

      You can continue to use Web IDE, and we will be happy to get every feedback to ease your development and improve with Application Studio.

      As for issue raised:

      1.NEXT Button – I assume there is a capital letter check in the name, this should be improved.

      2. Deploy to ABAP is should be much faster, decoupled from build and offers configuration options. We plan also to add UI based triggers in the future.

      Regards

      Yuval

       

      Author's profile photo Louis-Arnaud BOUQUIN
      Louis-Arnaud BOUQUIN

      Hi Yuval,

      I understand that SAP Business Application Studio is the future and I just wanted to share the disapointment some useful features of the webide, But I'll try to continue to use Business Application Studio.

      Thank you for the tips for the NEXT button, it works !

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      I understand, feel free to send me in mail all the pain points you have along the way and I will strive for a solution

      Author's profile photo Jyotsna Singam
      Jyotsna Singam

      Hi,

      I read that the prerequisite is to have SAP_UI 753 SP00 component in onprem system. Is there any workaround to deploy UI5 application onto system with lower version?

       

      Thanks & Regards,

      Jyotsna Singam

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Hi

      In general customers are recommended to upgrade. SAP_UI 752 will have End of Maintenance end of this year.

      There is no downport planned. A workaround is to build, then download the dist folder and to deploy the content with report /UI5/UI5_REPOSITORY_LOAD from ABAP side

       

       

      Author's profile photo Anupriya Gupta
      Anupriya Gupta

      Hello,

      I am trying to create a SAPUI5 application in Cloud Foundry Environment as a project from template in SAP Business Application Studio.  I'm not able to get the OData service from this system in Business Application Studio. I'm able to get the same while using the SAP Web IDE.

      I also installed the Cloud Connector and configured it, but still I'm not able to get the services.

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Please check the destination set up section

      https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio/

      And the prerequisite section in each flow in the scenario link of the introduction section of this blog

      https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/97faf19b49374c4680fbc00937fee156.html/

       

      Author's profile photo Anupriya Gupta
      Anupriya Gupta

      Hello,

      I have done everything, but still unable to fetch the oData Service from the system.

      Please find the attached images for the same.

       

      Author's profile photo Anupriya Gupta
      Anupriya Gupta

      Destination

      Destination

       

      Cloud%20Connector%20Setup

      Cloud Connector Setup

       

      Destination%20Config%20Error

      Destination Config Error

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      In the cloud connector check you enabled sub path access to this system.

      In addition I see Basic authentication in the destination set up, can you try using no authentication and verify your credentials are ok and not locked

      Author's profile photo Anupriya Gupta
      Anupriya Gupta

      Thanks!!!!

      It worked with "no authentication" :).

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      great so one of the 2:

      1. wrong credentials saved in destination

      2. you had 2 destinations with the same url

      Author's profile photo Anupriya Gupta
      Anupriya Gupta

      I had only one destination with the same url.

      Might be because of wrong credentials.

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      If sub path enabled and you are able to access the BE with you user.

      1. Last proposal would be to have only ONE destination to that system url in the account and not multiple
      2. set it as no authentication
      Author's profile photo Dharmesh Chovhan
      Dharmesh Chovhan

      Hi Morad

      We have been using BAS for a over 2 months. We have a DEV SPACE for a user and are not able to start it up. Was okay till Firday.

      When we click on start, we see this error in the console.

       

       

      Error%20starting%20dev%20space

      Error starting dev space

       

       

       

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      We will fix it very soon

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      please retry

      Author's profile photo Dharmesh Chovhan
      Dharmesh Chovhan

      Hi Yuval

      Appreciate your prompt attention to this. The dev-space has been started and all looks good.

      I also did notice there might be an issue downloading the dev-space. I have 3 projects in the dev-space but when you look at the downloaded file, there is only 1 project.

      BAS%20projects

      BAS projects

       

      exported dev-space tar file

      Exported%20dev-space%20file

      Exported dev-space file

       

      any ideas??? I have been able to download individual project from BAS fine.

      Thank You

      Dharmesh Chovhan

      Author's profile photo Limor Erez
      Limor Erez

      Hi Dharmesh Chovhan,

      I was unable to reproduce this. I selected 3 projects in my workspace and right-clicked download and it downloaded a tar file named projects( the root name of these projects) with all 3 projects.

      Is it reproducible in your environment?

      If the answer is yes, can we schedule a meeting so we could have a further investigation of this issue?

      Best regards,

      Limor

      Author's profile photo Dharmesh Chovhan
      Dharmesh Chovhan

      Hi Limor

      Selecting the projects  and then Clicking on download works fine. I had only tried it with one project and it works fine.

      the issue is back at the dev space screen where you can download the whole dev space. Is this meant  to download all  your projects??? When you click on the download button.

      Thanks

      Dharmesh.

      Author's profile photo Limor Erez
      Limor Erez

      Hi Dharmesh,

      Yes, all your projects in /home/user/projects.

       

       

      Best regards,

      Limor

      Author's profile photo Dharmesh Chovhan
      Dharmesh Chovhan

      Hi Limor,

      This download is where the issue is that i experienced. I did another download and only does the 1 project as you see in the screen illustrations.

       

       

      we have more projects in this dev space as you can see.

       

      There is the work around to download projects from BAS but I thought you might want to look into this as it is meant to be a feature on the main dev-space screen.

      Let me know if you need any more information.

      Cheers

      Dharmesh

      Author's profile photo Limor Erez
      Limor Erez

      Hi,

      I will set a meeting since I am unable to reproduce it.

      Could you please share your email?  or sent it to me: limor.erez@sap.com

      Best regards,

      Limor

      Author's profile photo Luis Ancona
      Luis Ancona

      I am in a S/4 HANA Cloud project (I created the destination in Clound Foundry Cockpit), and I need to create a Fiori application that consume several services (ODATA and SOAP) and I don't know how to consume the ODATAS (to show the data in two tables).

      My doubt are:

      -Which files i have to modify with the destination data and the uri /sap/opu/odata/sap/API_COSTCENTER_SRV/ (XS-APP.json, manifest.json, mta.json ?
      - How i have to implement the query to get the oModel ?

      Best regards,

      Luis Ancona

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Hi

      Once you create a destination to S/4 HANA you do not need to manipulate any file.

      Check "environment set up" item 7 for destination set up

      https://blogs.sap.com/2020/07/08/migrating-fiori-application-from-sap-web-ide-to-sap-business-application-studio/

      also formal documentation

      https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/22f3401b2e464344943f2a6abf05d092.html

      Author's profile photo Dmitriy Ostrovskiy
      Dmitriy Ostrovskiy

      Hello, Yuval Morad

      I have a question about refresh/update annotations from backend system.

      What is the way to update XML files for use it actual in the service modeler and annotations

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Please check this

      https://help.sap.com/viewer/17d50220bcd848aa854c9c182d65b699/Latest/en-US/8182ff3b19574f038bd636b9991aa24e.html

       

      Author's profile photo Dmitriy Ostrovskiy
      Dmitriy Ostrovskiy

      Thnx a lot, it's work

      Author's profile photo Tim Cashmore
      Tim Cashmore

      Hi

      I am trying to connect to a very simple REST API (in fact, I have enabled the 'customer order sourcing' trial in cloud foundry) and try out a a simple SAPUI5 front-end for a demo.  At the moment, I am just creating a template project with BAS (fiori, basic SPAUI5).  Couple of questions:-

      1.  I have set up a destination to the COS API service (seem to work ok, but auth error when checking connection - assume it is not requesting a JWT at this stage, same thing works fine from PostMan).  Key question, how do I configure the REST API destination to use it in BAS ?
      2. When creating a template, I select 'Data Service' in the wizard and it only seems to allow SAP backend systems to be selected - how do I include this ?

      At the moment, everything seems geared around ODATA (and SAP Gateway services in particular), it is very unclear how you configure and use a REST API (JSON) - should I be using WebIDE or a local IDE like VS Code ?

      Any thoughts, pointers to useful information would be very helpful

       

      Many thanks

      Tim

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Hi,

      The wizard supports only OData service parsing, since it creates a metadata file to be used later by the DT tools.

      In case you have a REST based service which does not use OData protocol you should update manually 2 files:

      1. manifest.json in section data source and model
      2. xs-app.json for the right route to the destination
      Author's profile photo Avinash Sahoo
      Avinash Sahoo

      Hi,

      How can add multiple sap ui5 view in my fiori application using business application studio,  just like SAP Web Ide Full-Stack we are doing right click on 'webapp'  then selecting .'New' after that we have to select  'SAPUI5 View '?

      Thanks,

      Avinash.

      Author's profile photo Ashley Tung
      Ashley Tung

      Hi Avinash,

      This is in the roadmap for SAP Fiori tools. It is a high priority feature for us although it hasn't been planned as we are currently investigating the best approach to deliver this.

      Best regards,

      Ashley

      Author's profile photo Navya Krishna
      Navya Krishna

      Hi Yuval,

      How can i add an additional view to my existing UI5 project in BAS?

      Thanks and Regards,

      Navya

      Author's profile photo Uday M S
      Uday M S

      Hi Navya,

      You can add it using right click ->New file and give the viewname.xml. I dont think there will be view template as in WebIde.

      I have done the same and added new controller but unable to load the newly added controller when checked in network tab. Please let me know if you are able to do

       

      Thanks

      Uday

      Author's profile photo Uday M S
      Uday M S

      Hi All

      I am trying to create Sample application in SAP Business studio. I have created a application with initial view and when I added a new view and controller. when I run the application, I do not see the changes made in second view . On debugging I saw that second controller itself is not getting loaded. Only error its showing is error in loading Component-preload.js from sap.ui.module. Any help?

      Thanks

      Uday

      Author's profile photo Tobjorn Robertsson
      Tobjorn Robertsson

      Hi All

      Have anyone of you managed to get the Principal Propagation to work also when you Deploy the Fiori app to the on-premise Development Gateway system?

      I am in a longrunning OSS ticket with SAP where BAS Deployment using a Destination configured with Principal Propagation fail.

      Principal Propagation works in general for any other Service in BTP, but now when you try to use a DESTINATION configured with this model. It only works with No-Authentication , or BasicAuthentication

      /Tobbe

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Deploy should work with principle propagation

      please make sure you have the right set up

      How to Guide – Principal Propagation in an HTTPS Scenario | SAP Blogs

      make sure the prerequisite are ok

      Deploy to the SAPUI5 ABAP Repository - SAP Help Portal

      Then check the logs in abap-deploy using terminal

      abap-deploy --log-level=error
      Author's profile photo Tobjorn Robertsson
      Tobjorn Robertsson

      Hi The Principal propagation works perfectly for all scenarios except when trying to deploy using the B.A.S Tool.

      1. An Application which is used for Demo use the same Destination as B.A.S with PP configured = works like a charm (Azure Login and then samAccountName value is sent to our backend system properly)
      2. Login with Azure credentials to B.A.S = Works fine
      3. Use the Destination when deploy. This now use the Origin of SAP Idp and the wrong samAccountName is sent

      So we are still stuck 🙂

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      please share the destination verify you have the value dev_abap in the WebIDEUsage.

      also check the logs in deploy to abap cli

      Author's profile photo Torbjörn Robertsson
      Torbjörn Robertsson

      Description=SAP Gateway Development
      Type=HTTP
      HTML5.Timeout=60000
      HTML5.DynamicDestination=true
      Authentication=PrincipalPropagation
      WebIDEUsage=dev_abap,odata_abap,bsp_execute_abap,ui5_execute_abap,plugin_repository,odata_xs,api_mgmt_catalog,api_mgmt_proxy,odata_smp,odata_hcp_odp,odata_hci,hci_ifl_node,smart_business_odata,smart_business_gen
      Name=BusinessApplStudio
      WebIDEEnabled=true
      ProxyType=OnPremise
      URL=http\://<VIRTUAL_HOSTMAPPING\:443
      sap-client=100

       

      dev_abap is the very first entry 🙂

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Does deploy work for system without principal prop?

      What does the log say?

      please open a ticket or

      send me your mail we can meet on Monday for a short call

       

      Author's profile photo Torbjörn Robertsson
      Torbjörn Robertsson

      Hi Yuval

      This morning it worked, I have no clue on why it failed last week and worked today.. maybe a "caching issue" .. but the settings I configured last week.. works this week 🙂

       

      #Case Closed 🙂

      /Tobbe

      ps: Maybe it was enough to have a discussion with you hahaha

      Author's profile photo Torbjörn Robertsson
      Torbjörn Robertsson

      Hi Yuval

      We actually got an error again for another project we migrate from WebIDE to BAS

      See the image.. any clues?

      /Tobbe

      Author's profile photo Torbjörn Robertsson
      Torbjörn Robertsson

      BAS%20Error

      BAS Error

      Author's profile photo Abhijeet Dadarkar
      Abhijeet Dadarkar

      Hi Yuval

      I have a SAP UI5 transactional app developed in SAP Business Application Studio (SAP Fiori template, not Adaptation Project) and I am trying to deploy it to my on-premise SAP S/4HANA 1909 FPS02 system with embedded FES.

      My cloud connector resources has all paths & sub paths enabled and my destination has the following properties (in image below, WebIDEUsage = dev_abap is present) with Authentication = NoAuthentication.

      Destination%20Properties

      Destination Properties

      On using the deployment procedure mentioned in link I get the following error (image below).

      SAP%20BAS%20Deployment%20Error
      SAP BAS Deployment Error

      Funny thing is, in my transport on the on premise system (the one I use during deployment), I see some objects being captured and the UI5 app (even in SE80, I see some details in the package), but when I go to SICF, I do not see the node of my SAP UI5 application.

      What could be the possible issue here - considering my destination has all the properties and the cloud connector is allowing all sub-paths. Apparently, only a partial deployment is occurring (ABAP_REPOSITORY_SRV is maintained as well)

      I have raised an OSS anyway, but I was hoping if you would have something off the top of your head.

      Regards,
      Abhijeet

      Author's profile photo Eduardo Ruiz Cárdenas
      Eduardo Ruiz Cárdenas

      Hi Yubal

      I have problem in

      Create an SAP Fiori App Using SAP Business Application Studio

      Step 3: Generate an app based on SAPUI5 Application template

      (10 - A glitch in the wizard that we need to fix manually: Open businesspartners/webapp/index.html and modify the following line:)

      According to what is indicated, I can understand that it is to create the index.html file, copying those 26 lines in the new index.html file. I do not know what to do to line 9, or it is simply to copy all the lines. To continue with the tutorial steps, thanks

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>businesspartners</title>
              <script
                  id="sap-ui-bootstrap"
                  src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"  LINE 9
                  data-sap-ui-theme="sap_fiori_3"
                  data-sap-ui-resourceroots='{"ns.businesspartners": "./"}'
                  data-sap-ui-compatVersion="edge"
                  data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
                  data-sap-ui-async="true"
                  data-sap-ui-frameOptions="trusted"
              ></script>
          </head>
          <body class="sapUiBody">
              <div
                  data-sap-ui-component
                  data-name="ns.businesspartners"
                  data-id="container"
                  data-settings='{"id" : "businesspartners"}'
              ></div>
          </body> 

      </html>

      I am starting in this new world, it is my first exercise that I am developing, waiting for your valuable information, thank you