Skip to Content
Product Information

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 from a wizard that you can open from the command palette (F1->Yeoman UI Generators). You should check the generator’s documentation to learn if it adds an MTA module.

There will be an additional wizard that filters the existing generators and presents only those that create MTA modules. You will be able to trigger the new wizard from the ‘mta.yaml’ file context menu or using the dedicated command from the command palette.

How to add resources

Some of the project or module templates automatically add the resource dependencies required by their scenario to the ‘mta.yaml’ file.

If you need to introduce additional resources and/or define dependencies to a resource, you can do it by editing the ‘mta.yaml’ file manually. The mta.yaml text editor provides you with basic code completion triggered by cntl+space buttons and automatic syntax validations capabilities. See the next section for planned improvements of the ‘mta.yaml’ file editing process.

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 adjust properties and parameters of existing modules and resources

You may need to adjust properties or parameters of the modules or resources generated by the templates.   Currently, you can do it by editing the ‘mta.yaml’ file manually.

We are working on several tools to simplify this process. For example, you will be able to extend/adjust the ‘mta.yaml’ file using a form editor (in addition to the current text one). The form 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.

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!

 

27 Comments
You must be Logged on to comment or reply to a post.
  • 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.

    • 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

  • 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

    • 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

    • 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

       

      • 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
                }
              }
            },

         

        • 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
          • 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}’).”
  • 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”
        ]
      }
    }
  • /
    • 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”
          }
      }

       

       

      • 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?

        • 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/

          • 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”.

            /
            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”
          • 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

            /
  • 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

    • 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