SAP Business Application Studio Multitarget Application (MTA) development toolkit

[natalia_katunin]

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:

• 
  

  SAP Business Application Studio – Info Blog

  
  


• It’s time to try out SAP Business Application Studio

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:

• Create a project


• Add modules


• Add resources or modify existing modules and resources


• Test modules


• Package (aka Build)


• Deploy

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 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 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 With→Code 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 With→MTA 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!

 

[MikeDoyle]

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.

[natalia_katunin]

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

[aelghannam]

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

[natalia_katunin]

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

[ptharso]

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

 

[liat_b]

Hi,

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

Thanks,

Liat

[ptharso]

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

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

[ptharso]

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

 

[ptharso]

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

[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

 

[ptharso]

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

        }

      }

    },

 

[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

[ptharso]

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}')."

[yuval_morad]

please perform npm install

and share UI5.yaml and package.json

[ptharso]

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”

    ]

  }

}

[ptharso]

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

 

[ptharso]

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

[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/46664de4d6944471b6c29a0681b...

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

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"

    }

}

 

 

[ptharso]

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?

[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-applic...

[ptharso]

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".

[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"

[ptharso]

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

[yuval_morad]

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

yuval.morad@sap.com

[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

[natalia_katunin]

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

 

[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

 

 

 

[natalia_katunin]

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

[Amey-Mogare]

Thank you Natalia for prompt response.

[Ahmedkhan29789]

Hi natalia.katunin

I want to add a node module in my MTA project to work on create some XSJS and XSODATA, But there is no option to add a node module here, Can you please suggest what should i do, I have create a Multi target Application with database, xsjs/xsodata and ui5 application

[liat_b]

Hi,

This functionality is not supported out of the box in BAS. You can create a new module manually -  create the folder and files, update the MTA accordingly and run your module using standard configuration to run a node application (like you would in VS Code).

hope this helps,

Liat

[rams_wdp]

Hello Natalia,

I have download and importing standard app into BAS and trying to deploy the same. But url is not generating while i am deploying the app. Could you please help me where i am missing.

https://developers.sap.com/tutorials/appstudio-fioriapps-mta-build-deploy.html

URL not generating

Best Regards,

Ram

[natalia_katunin]

yuval.morad raz.korn Any idea?

[RazK]

Hi rams_wdp ,

Can you share the log of the deployment?

Can you share the output of running "cf mtas" from BAS terminal (first verify that you are connected to the relevant CF space).

Regards - Raz

[Ranjeet]

@natalia.katunin - in this MTA project i would like to include a node module like SRV and consume those services further in my UI module, how can i add it via the yeoman generator? your suggestion would be highly appreciated

[natalia_katunin]

avitalmargalit could you assist with the question.

[Nigel_James]

It would be great if the MTA tool was made available on the VS Code marketplace.