Skip to Content
Product Information
Author's profile photo Swaroop Anasane

Connecting SAP Business Application Studio to SAP MII backend destination

Having spent last couple of days trying to figure out what seems simple, I spanned through a lot of documentation and articles around SAP Business Application Studio(BAS). What I wanted to achieve was to create a simple UI5 application and be able to connect to my SAP MII destination I created on cloud foundry. Though I could connect the dots, but most of the documents were talking about fiori development utilizing odata services and not external systems like SAP Manufacturing Integration and Intelligence(MII), so I thought of sharing my learning through this step by step guide.

End Object: Simple UI5 application connecting and fetching some data from SAP MII destination on cloud foundry

Knowledge prerequisite: SAP UI5 basics

Assumption: Destination and cloud connector configuration is already done.

Here it goes…

Setup project for MII connectivity using cloud connector

  1. Open SAP BAS and open your workspace.
  2. Create a Fiori application using template SAP Fiori application. Select Start.
  3. From application type dropdown, select SAP UI5 freestyle.Application%20type%20selection%20for%20project%20creation.
  4. From the tile list which updates after type selection, select SAP UI5 Application. Click Next.UI5%20Application%20selection%20after%20project%20type%20selection.
  5. In Data Source and Service Selection, select None and hit Next.Data%20Surce%20and%20Service%20Selection.
  6. Provide a view name for your application and hit Next, provide a project module name and namespace. This combined together would become alias for your resource path.
  7. Click Finish, your project has been generated.
  8. When you expand your project folder, the root should look like below.Project%20expanded%20view.
  9. Delete all files outside webapp apart from .gitignore, package.json and package-lock.json.
  10. Under root folder(mii in this case), create new file “xs-app.json”.
  11. Copy the content from this file to xs-app.json and save it.
    {
      "welcomeFile": "/index.html",
      "authenticationMethod": "none",
      "logout": {
        "logoutEndpoint": "/do/logout"
      },
      "routes": [
        {
          "authenticationType": "none",
          "source": "^/XMII/Illuminator(.*)$",
          "destination": "XMII"
        },
        {
          "source": "^(.*)$",
          "target": "$1",
          "service": "html5-apps-repo-rt",
          "authenticationType": "xsuaa"
        }
      ]
    }​
  12. Add/Edit the env file to have below content. If replace <destinationName> with your destination name like XMII:
       destinations=[{"name":"<destinationName>","url":"http:// <destinationName>.dest","proxyHost":"http://127.0.0.1","proxyPort":"8887"}]​
  13. Update index.html, provide resource path as “https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”
  14. To to Run Configuration and Click on + to add run configuration for your project.
  15. Select your project, notice Fiori Tools in bracket. Press ESC and go back to project root folder.
  16. Edit package.json, copy, paste below content and save the file.
    {
      "name": "mii",
      "version": "0.0.1",
      "devDependencies": {
        "@sapui5/ts-types": "1.71.x",
        "@sap/ui5-builder-webide-extension": "1.0.x",
        "@sap/approuter": "8.1.x",
        "@sap/html5-repo-mock": "1.6.x"
      },
      "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"
        ]
      }
    }​
  17. Now, again click on + next to run configuration, you should see the list updated as below. Notice FioriTools changed to flat_html5.
  18. Select your project. Select latest version from the list.

  19. You would see something like below and on expanding node, you would see Data Source as defined in xs-app.json. Click on bind to connect to data source.After%20adding%20run%20config%20successfully.
  20. Select the destination system name from Could Foundry.
  21. Modify the controller.js file to call MII service, something like below. This is to test if your application is able to communicate to destination.
  22. Now run the configuration using play button. It would give you a prompt to open in a new tab, click open.
  23. In the network tab, you should see the request successful and also in console, the document written from above ajax success.Network%20tab%20showing%20connection%20successful%20to%20MII%20destination.Console%20result%20showing%20the%20response%20of%20ajax%20call.
  24. So your new application is ready and is able to communicate to MII destination system.

 

Hope this helps ease your development! Open to feedback 🙂

 

Nice time….!

Assigned tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Darshan Pithadiya
      Darshan Pithadiya

      Hey Swaroop,

      Thanks for the post. Do you have any idea how to use with services without creating file and copy paste code.

      Thanks

      Author's profile photo Swaroop Anasane
      Swaroop Anasane
      Blog Post Author

      Hi Darshan,

      Didn't quite get your question. Can you elaborate?

      Regards,

      Swaroop

      Author's profile photo Darshan P
      Darshan P
      • Setup My HCC. It is working fineGreen
      • Creating from Project Template as SAP UI5 ApplicationBAS
      Author's profile photo Swaroop Anasane
      Swaroop Anasane
      Blog Post Author

      Hi Darshan,

      This option so fa is available only for gateway based services. You may not be able to use this for MII.

      For MII, you have to use Illuminator as I described in blog until BAS comes with an update for external apps.

      Hope this helps!

       

      Best Regards,

      Swaroop

      Author's profile photo Douglas Averell
      Douglas Averell

      We been following this blog and are a little confused on step twelve.

      Add/Edit the evn file to have below content. If replace <destinationName> with your destination name like XMII:

      Do you mean .env file instead of evn? and does this file get created at the root of the project?

      The actual definition:

      destinations=[{"name":"<destinationName>","url":"http:// <destinationName>.dest","proxyHost":"http://127.0.0.1","proxyPort":"8887"}]

      Based on the description we set it up this way where MII_SBX_Dest is configured as our destination to our MII system

      "name":"XMII","url":"http://MII_SBX_Dest.dest","proxyHost":"http://127.0.0.1","proxyPort":"8887"

      We are on MII 15.4.

       

      Swaroop Anasane | SAP People

      https://people.sap.com/agentry_src

       

       

       

      Author's profile photo Swaroop Anasane
      Swaroop Anasane
      Blog Post Author

      Hi Douglas,

      Firstly, thanks for pointing it out, yes it is env file.

      Yes, it gets created at the root, you dont have to create it manually, just try to configure connection and it should create env file, you can then edit it.

      Sorry, I did not get a chance to check your question earlier.

      Best Regards,

      Swaroop

       

      Author's profile photo Mike Appleby
      Mike Appleby

      Kevin Hunter

      Do you know anyone else who can help with Douglas Averell's issue?

      Thanks, Mike

      Author's profile photo Swaroop Anasane
      Swaroop Anasane
      Blog Post Author

      Hi Mike,

      Replied to Douglas, hope it helps.

      Thanks for writing.

       

      Best Regards,

      Swaroop