Skip to Content
Product Information
Author's profile photo Natalia Katunin

SAP Business Application Studio Multitarget Application (MTA) development toolkit

Welcome to SAP Business Application Studio, the cloud environment for efficient development of business applications such as SAP Fiori, Applications for SAP Cloud Platform Mobile Services, full-stack business applications, SAP S4 HANA extensions, and modeling workflows!

You can find more information about the service in these blogs:

To simplify your development process, SAP Business Application Studio provides dev spaces with tailored tools and pre-installed runtimes per development scenario.

In this blog, I will present a set of scenario-agnostic tools for developing full-stack applications based on the multitarget application (MTA) model. Using these tools, you can create, extend, test, and finally deploy your application to the SAP Cloud Platform, Cloud Foundry environment.

If you are not yet familiar with the multitarget application concepts, I recommend you read this guide to learn about the topic.

Usually, your work on an MTA project includes the following steps:

Now let’s look at the tools supporting these steps in SAP Business Application Studio (BAS). I will tell you about the tools that are already available and about the planned enhancements.

First of all, for developing an MTA application in SAP Business Application Studio, you need to create a dev space with the MTA Tools extension.

SAP%20Business%20Application%20Studio%20%u2013%20MTA%20Tools%20Extension%20at%20DevSpace%20creation%20screen

SAP Business Application Studio – MTA Tools Extension at DevSpace creation screen

Dev spaces for SAP Fiori and SAP Cloud Business Application, for example, include this extension by default.  If you select other dev space types, you can enable the MTA extension from the Additional SAP Extensions list.

For more information about SAP Business Application Studio dev spaces, have a look at this blog.

 

How to create an MTA project

The recommended way to create a new project is using the Application Wizard which you can trigger from the command palette (F1 -> SAP Business Application Studio: Create Project from Template) or from the Welcome screen (by selecting the New project from template option).

In the wizard, you can select either the Basic Multitarget Application template or a template for your development scenario.

The Basic Multitarget Application template will generate a project folder and the MTA descriptor file with initial content. Then you can populate it with modules as described in the section below.

For the scenario templates, you should check the template’s documentation to make sure it generates a project for the SAP Cloud Platform, Cloud Foundry environment. In this case, the template generates a project with the MTA structure (for example, SAP Fiori Freestyle Project), or there is a way to convert the generated project into MTA at a later stage (for example, CAP Project).

SAP%20Business%20Application%20Studio%3A%20Application%20wizard%20%u2013%20Select%20Template

SAP Business Application Studio: Application wizard – Select Template

 

You can also use Yeoman generators to create a new project from a terminal. For that, type the ‘yo’ command in the terminal and select a generator from the list.

How to add modules

If you created a project using a business scenario template/generator, your project already contains modules relevant to the selected scenario.

You can add more modules by running Yeoman generators from a terminal or by using one of the followings wizards:

  • Yeoman UI Generators. You can open the wizard from the command palette (F1→Yeoman UI Generators). It presents all the generators available in your dev space and you should check the generator’s documentation to learn if it adds an MTA module.
  • New MTA Module From Template”. It can be open from the mta.yaml file context menu or from the command palette (F1→Create MTA Module From Template). This wizard filters the existing generators and presents only those that create MTA modules.

How to add new resources or to adjust properties and parameters of existing modules and resources

If you need to add new resources or adjust the properties or parameters generated by the templates, you should edit the ‘mta.yaml’ file.

You can do it by using one of the following editors:

  • Code editor.  To open the code editor, double-click on the desired mta.yaml file or right-click the file and choose Open WithCode Editor. This editor provides you with basic code completion triggered by cntl+space buttons and automatic syntax validation capabilities.
  • MTA editor. This is a visual editor that allows you to edit the MTA descriptor using tables and forms instead of the text-based code editor. This editor allows you to easily navigate between the objects in the ‘mta.yaml’ file and helps you avoid dealing with the complex and sensitive syntax of YAML files. To open the MTA editor, right-click the ‘mta.yaml’ file and choose Open WithMTA Editor.

Also, to make the process of adding resources simpler, we will provide snippets for different resources that can be added using a dedicated tool that we are currently developing.

How to test MTA modules

Business Application Studio allows you to test some of the supported module types using the Run Configurations feature. This feature is used to run your modules locally, i.e. in your dev space. This is the easiest and fastest way to test your modules.

If Business Application Studio does not provide a default Run Configuration option for a specific module type yet or if you would like to test the module in the target Cloud Foundry environment, you can use commands of Cloud MTA Build Tool and MultiApps CF CLI Plugin for partial build and deployment in the BAS terminal.  Using these capabilities, you can prepare specific modules for deployment and then deploy them. You can find more details in this repository.

How to prepare an MTA project for deployment to the Cloud Foundry environment

To deploy your application to the target Cloud Foundry environment, you first need to build it to create an MTA archive file (MTAR).

In BAS, the Cloud MTA Build Tool is used for that purpose. It builds the project according to configurations specified in the ‘mta.yaml file’. The recommended build configurations are generated when you create projects and modules using the templates. You can change these configurations if needed. You can learn more about the build configuration options in the Cloud MTA Build Tool documentation.

You can trigger an MTA build from the ‘mta.yaml’ file context menu or using the Build MTA command from the command palette. These options activate a default Cloud MTA Build Tool command: “mbt build”. For more details about the default behavior, see the user guide.

If you are not satisfied with the default behavior of the MTA Build menu/command palette options, you can trigger the Cloud MTA Build Tool commands in the terminal according to your needs.

How to deploy an MTA project to the Cloud Foundry environment

Finally, you deploy the mtar file generated during the MTA build step into the target Cloud Foundry space. There are several options to trigger the deployment process:

  • Using the Deploy MTA option in the context menu of the MTAR file
  • Using the Deploy MTA command in the Command Palette
  • Using commands of the MultiApps CF CLI Plugin in the terminal. This option allows you to pass additional parameters to the Deploy command. Use it if the default behavior of the options above is not enough and you need more control over the process.

For more details on these options, see the user guide.

In the future, we will provide a new tool to simplify the deployment tasks. It will also support the deployment of MTA projects and provide an easy way to configure this step, for example, it will automatically trigger an MTA build before deployment or use non-default deploy commands.

 

This is it.  I hope that after reading this blog you find developing full-stack applications based on the MTA model in SAP Business Application Studio much easier.

 

Happy coding!

 

Assigned tags

      30 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mike Doyle
      Mike Doyle

      Thanks for this nice reference Natalia.  I'm a fan of using the mta.yaml file context menu (right-click on Windows) to build and deploy.  I also increment the version number near the top of the mta.yaml and the version number is used in the .mta file name.

      Author's profile photo Natalia Katunin
      Natalia Katunin
      Blog Post Author

      Hi Mike,

      Thank you for your feedback!

      Regarding the MTA archive (mtar) file name, you are right, by default the tool uses this naming template: <mta_application_ID>_<mta_application_version>.mtar

      If one day you need to provide a different name, you can run the MTA Build Tool (MBT) from the terminal and pass the target name as a parameter: "mbt build --mtar=NewName.mtar".  More on the MBT options here.

      Regards

      Natalia

      Author's profile photo Abdel Elghanam
      Abdel Elghanam

      Hello Natalia,

       

      Thanks for the great article. Do you have any idea how we can incorporate the using of The MTA Deployment Extension using the Business application studio "Build MTA" context menu option to build for different environments ?

       

      Regards,

      Boudy

      Author's profile photo Natalia Katunin
      Natalia Katunin
      Blog Post Author

      Hi Boudy,

      I am glad if you find my blog helpful.

      The "Build MTA" context menu runs a pre-defined default Cloud MTA Builder command. Currently, if you need to run a different command, e.g. with MTA extensions for different environments, you should activate the command from the terminal. For example: mbt build -e=test1.mtaext.

      More details on Cloud MTA Builder commands here

      We are working on a new tool that will simplify this step: you will be able to define named build configurations with dedicated commands and re-use them when relevant.

      Does it answer your question? If not please elaborate.

      Regards

      Natalia

      Author's profile photo Paulo Castro
      Paulo Castro

      Hi Natalia, i created a migration to a APP from NEO but appears this error. Can you help-me?

       

      Author's profile photo Liat Borenshtein
      Liat Borenshtein

      Hi,

      Can you give more details on the application? Is it a Fiori or a CAP application?

      Thanks,

      Liat

      Author's profile photo Paulo Castro
      Paulo Castro

      Its a html5 fiori application that uses the success factors database in NEO. I want to migrate it to CF.

      Author's profile photo Yuval Morad
      Yuval Morad

      Please share the datasource section in manifest.json.

      and the destination information in the subaccount.

      If you create a new app for CF based on the destination and not migrate does it work?

      Author's profile photo Paulo Castro
      Paulo Castro

      Thanks for your attention.... see the images below

       

      Author's profile photo Paulo Castro
      Paulo Castro

      @yuval.morad do you see my images? in your reply?

      Author's profile photo Yuval Morad
      Yuval Morad

      Yes I saw it now.

      If you create a new app for CF based on the destination and not migrate does it work?

      I see that you have 2 datasources which is not common.

      mainservice looks OK, v2 I think no as it has a leading /

      Please share :

      1. Is it MTA based project? mta.yaml
      2. Routes in xs-app.json
      3. Model in manifest.json

       

      Author's profile photo Paulo Castro
      Paulo Castro

      Hi, Yuval.... see the files below. I created a MTA with a talentview module and replace the webapp folder with the NEO talentsview webapp folder.

      1- mta.yaml --------------------------------------------------------------------------------------------------------

      _schema-version: "3.2"
      ID: talentsview
      version: 0.0.1
      modules:
      - name: talentsview-approuter
        type: approuter.nodejs
        path: talentsview-approuter
        requires:
        - name: talentsview_html_repo_runtime
        - name: dest_talentsview
        parameters:
          disk-quota: 256M
          memory: 256M
      - name: talentsview_ui_deployer
        type: com.sap.application.content
        path: .
        requires:
        - name: talentsview_html_repo_host
          parameters:
            content-target: true
        build-parameters:
          build-result: resources
          requires:
          - artifacts:
            - talentsview-content.zip
            name: talentsview
            target-path: resources/
      - name: talentsview
        type: html5
        path: talentsview
        build-parameters:
          builder: custom
          commands:
          - npm run build
          supported-platforms: []
      resources:
      - name: talentsview_html_repo_runtime
        type: org.cloudfoundry.managed-service
        parameters:
          service: html5-apps-repo
          service-plan: app-runtime
      - name: talentsview_html_repo_host
        type: org.cloudfoundry.managed-service
        parameters:
          service: html5-apps-repo
          service-plan: app-host
      - name: dest_talentsview
        type: org.cloudfoundry.managed-service
        parameters:
          service: destination
          service-plan: lite
      build-parameters:
        before-all:
        - builder: custom
          commands:
          - npm install
      2- xs-appjson ---------------------------------------------------------------------------------------------------------
      {
        "welcomeFile": "/index.html",
        "authenticationMethod": "none",
        "logout": {
          "logoutEndpoint": "/do/logout"
        },
        "routes": [
          {
            "authenticationType": "none",
            "csrfProtection": false,
            "source": "^/sap_hcmcloud_core_odata/(.*)$",
            "destination": "sap_hcmcloud_core_odata",
            "target": "$1"
          },
          {
            "source": "^(.*)$",
            "target": "$1",
            "service": "html5-apps-repo-rt",
            "authenticationType": "xsuaa"
          }
        ]
      }
      3- Model in manifest.json
          "models": {
            "i18n": {
              "type": "sap.ui.model.resource.ResourceModel",
              "settings": {
                "bundleName": "talentsview.i18n.i18n"
              }
            },
            "": {
              "dataSource": "mainService",
              "preload": true,
              "settings": {
                "defaultBindingMode": "TwoWay",
                "defaultCountMode": "Inline",
                "refreshAfterChange": false
              }
            }
          },

       

      Author's profile photo Yuval Morad
      Yuval Morad

      Looks good

      1. If you enter the url in the browser do you see the metadata of the service
      2. It is not clear why the SF_PROXY value in destination is needed and how is it used in your project
      Author's profile photo Paulo Castro
      Paulo Castro

      Thanks for your attention....

        1- Yes... i see the metadata OK
        2- i commented this part:
                  /*
                  createSFSFModel :  function(){
                      var url = this.getURL("/destinations/SF_PROXY");
                      var oModel = new sap.ui.model.odata.v2.ODataModel(url , {
                          json: true,
                          skipMetadataAnnotationParsing: true,
                          useBatch: false,
                          defaultOperationMode: "Auto",
                          headers: {
                              "X-Proxy-User-Mapping" : "P1940040258|athompson1"
                          }
                      });
                      return oModel;
                  },
                  */
      3- Now when i run appears a message "Could not run the task 'Build talentsview'." and "Attribute 'program' does not exist ('{path}')."
      Author's profile photo Yuval Morad
      Yuval Morad

      please perform npm install

      and share UI5.yaml and package.json

      Author's profile photo Paulo Castro
      Paulo Castro

      yes … i did npm install in all main folders

      ui5.yaml —————————————————————————————

      specVersion: ‘1.0’
      metadata:
        name: talentsview
      type: application
      resources:
        configuration:
          propertiesFileSourceEncoding: UTF-8
      builder:
        resources:
          excludes:
            – “/test/**”
            – “/localService/**”
        customTasks:
        – name: webide-extension-task-updateManifestJson
          afterTask: generateVersionInfo
          configuration:
            appFolder: webapp
            destDir: dist
        – name: webide-extension-task-resources
          afterTask: webide-extension-task-updateManifestJson
          configuration:
            nameSpace: ns
        – name: webide-extension-task-copyFile
          afterTask: webide-extension-task-resources
          configuration:
            srcFile: “/xs-app.json”
            destFile: “/xs-app.json”
      package.json----------------------------------------------------------------------------------------------
      {
        “name”: “talentsview”,
        “version”: “0.0.1”,
        “devDependencies”: {
          “@sap/ui5-builder-webide-extension”: “1.0.x”,
          “@ui5/cli”: “2.2.6”,
          “eslint”: “5.16.x”,
          “@sap/eslint-plugin-ui5-jsdocs”: “2.0.x”,
          “@sapui5/ts-types”: “1.71.x”,
          “bestzip”: “2.1.4”,
          “rimraf”: “3.0.2”
        },
        “ui5”: {
          “dependencies”: [
            “@sap/ui5-builder-webide-extension”
          ]
        }
      }
      Author's profile photo Paulo Castro
      Paulo Castro

      I cannot comment the createSFSFmodel....because it is used in init function

       

      Author's profile photo Paulo Castro
      Paulo Castro

      @Yuval    why is not possible to migrate from NEO to CF with a easy form????

      the application runs OK in NEO.

      Why so manny folders?

       

      Author's profile photo Yuval Morad
      Yuval Morad

      Hi

      I am not sure which migration are you trying to do?

      1. Runtime migration - Neo to CF
      2. Tool Migration - CF to CF just use App Studio instead of Web IDE

      I Can advise regarding flow 2.

      I created a project in WebIDE for CF and copied it to AppStudio it is working w/o any change, local run and deploy.

      As to your questions:

      1. In case you want to have standalone approuter for each project then approuter module is created.
      2. You can also use "central approuter"
        Please read the documentation for the 2 options

      https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/46664de4d6944471b6c29a0681bfd0fc.html

      https://help.sap.com/viewer/584e0bcbfd4a4aff91c815cefa0bce2d/Cloud/en-US/83b0fb23e37d456caad1ad0448e14727.html

      In your case you use stand-alone approuter

      please ensure the package.json in approuter folder have the right dev-dependency and start scripts for local run. Can you share this package.json

      {
          "name": "approuter",
          "description": "Node.js based application router service for html5-apps",
          "engines": {
              "node": "^8.0.0 || ^10.0.0"
          },
          "dependencies": {
              "@sap/approuter": "8.1.x"
          },
          "devDependencies": {
              "@sap/html5-repo-mock": "1.5.x"
          },
          "scripts": {
              "start": "node node_modules/@sap/approuter/approuter.js",
              "start-local": "node node_modules/@sap/html5-repo-mock/index.js"
          }
      }

       

       

      Author's profile photo Paulo Castro
      Paulo Castro

      1 - I have one html5 application on NEO thats runs ok with a destination to SuccessFactors demo database.

      2 - i want to copy this application to CF but it dont runs OK

      3 - i tried a lot of solutions and nothing

      I think is necessary a recipe more easy because i dont understand a lot of configuration files

      Is possible? I ´m trying this information from Natalia but i cannot resolve the errors.

      Until now i cannot run the migrate application.

      What can you help me?

      Author's profile photo Yuval Morad
      Yuval Morad

      You perform a runtime migration of App, and not tool migration.

      This is much more complex and I will ask runtime contact to comment.

      As to your specific error

      Please update package.json to have build script on your HTML5 module.

      see sample of the files sample here

      scripts": {
          "build": "ui5 build --include-task=generateManifestBundle generateCachebusterInfo",
          "start-local": "node node_modules/@sap/html5-repo-mock/index.js"
        },

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

      Author's profile photo Paulo Castro
      Paulo Castro

      Hi Yuval, thanks for your attention... be patient... check and tell me what to do.

      1- i did exactly what is in above message (see image below) and the files

      2- package.json-------------------------------------------------------

      {
        "name": "talentsview",
        "version": "0.0.1",
        "devDependencies": {
          "@sap/ui5-builder-webide-extension": "1.0.x",
          "@sapui5/ts-types": "1.71.x",
          "@ui5/cli": "2.2.6",
          "bestzip": "^2.1.7",
          "rimraf": "3.0.2"
        },
        "scripts": {
          "build": "ui5 build --include-task=generateManifestBundle generateCachebusterInfo",
          "start-local": "node node_modules/@sap/html5-repo-mock/index.js"
        },
        "ui5": {
          "dependencies": [
            "@sap/ui5-builder-webide-extension"
          ]
        }
      }
      3 - ui5.yaml-----------------------------------------------------------------------
      specVersion: '1.0'
      metadata:
        name: talentsview
      type: application
      resources:
        configuration:
          propertiesFileSourceEncoding: UTF-8
      builder:
        customTasks:
        - name: webide-extension-task-updateManifestJson
          afterTask: generateVersionInfo
          configuration:
            appFolder: webapp
            destDir: dist
        - name: webide-extension-task-resources
          afterTask: webide-extension-task-updateManifestJson
          configuration:
            nameSpace: ns
      4 - i edited the index.html
      5 - This is the new message from BAS

      Consume SAP Services failed. Reason: Failed to read json file: "/home/user/projects/talentsview/xs-app.json".

      Author's profile photo Yuval Morad
      Yuval Morad
      1. Your project structure here looks different that the project structure in the previous picture. I do not see the mta and approuter module
      2. Please share a public git link
      3. I just performed a runtime migration from App deployed to Neo using Web IDE to an App deployed to CF in App Studio.Here are the steps:
        1. Create MTA
        2. add a module with the same name of the project in Neo
        3. copy webapp folder of Neo project to the Module folder
        4. Update routes in xs-app.json
        5. Remove leading "/" in field url of datasource in manifest.json 
        6. Update index.html or other html to absolute SAPUI5 path e.g.
             <script id="sap-ui-bootstrap"
                      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      Author's profile photo Paulo Castro
      Paulo Castro

      Yes but dont worry…

      i tryed to copy only the talentsview DIR from MTA applications to the root projects DIR.

      I think that can be possible to simplify this migration because the MTA dont runs.

      if you wants the source i can send a zip to your email … send me your email please. My email is ptharso@hotmail.com

      thanks for your attention

      Author's profile photo Yuval Morad
      Yuval Morad

      yes please exclude the node modules in all folders and send me.

      yuval.morad@sap.com

      Author's profile photo Amey Mogare
      Amey Mogare

      Hello Natalia,

      Thanks a lot for wonderful & explanatory blog!

      I have created a Fiori app using BAS and now want to export its .mta file to use it in my SCP Cloud Foundry's Transport Management Service to upload it in one of the transport nodes.

      Could you please let me know where do I get this .mta file?

      Warm regards,

      Amey

      Author's profile photo Natalia Katunin
      Natalia Katunin
      Blog Post Author

      Hi Amey,

      According to the Transport Management Service documentation, you can upload and transport MTA archives (.mtar files). So I assume your question about this kind of content.

      To create an MTA archive, you need to build your project: right-click on mta.yaml -> Build MTA.

      The MTA archive is created under the 'mta_archives' directory in the root folder of your project and you can download it: right-click on the file -> Download.

      I hope it answers your question. If not please elaborate.

      Regards

      Natalia

       

      Author's profile photo Amey Mogare
      Amey Mogare

      Hello Natalia,

       

      Thank you for reply. This solved my question at that point of time.

      I am able to get mtar file with following pattern:

      <mta_application_ID>_<mta_application_version>.mtar

       

      Now, I have noticed that say if I build application multiple times, the <mta_application_version> number remains same.

       

      This is causing problem in Transport Management Service. Because even if I manually rename & change this version in filename, SCP TMS somehow still detects it as same file and doesn't proceed with import second time onwards.

       

      Could you please suggest how this version can be auto-incremented?

       

      Warm regards,

      Amey Mogare

       

       

       

      Author's profile photo Natalia Katunin
      Natalia Katunin
      Blog Post Author

      Hi Amey,

      The MTA archive name does not have any meaning for the tools. The format <mta_application_ID>_<mta_application_version>.mtar is used by default if you do not provide an alternative name as a parameter to the build command.

      The tools take the application version from the MTA descriptor (mta.yaml/mtad.yaml), version parameter.

      There is no way to auto-increment the version. You should do it manually before you build the project.

      Regards

      Natalia

      Author's profile photo Amey Mogare
      Amey Mogare

      Thank you Natalia for prompt response.