Alternative to Fiori and oData, Vue and Rest Api

Hi Community,

Since we can do UI5 development with VS Code and deploy our web app to BSP stack on SAP Netweaver. We can do exactly same with any other javascript framework.

Personally I am not fun of oData therefore I try alternative ways of building web apps which are hosted on SAP.

In my first blog/video tutorial I have shown, how to build a Vue.js app with VS Code and How to publish it to BSP stack. Tutorial is below.

And then, in another blog/video tutorial, I have shown how to create rest api with SAP Abap and how to test it on browser and Postman.

And this final blog of Vue & Rest Api series, I will show you how to consume that rest api.

If you have done steps in those two tutorials, now you should have a vue app on SAP and also a rest service.

Vue App on BSP Stack

Rest Api Service

If you have them both working. Now we just need to make call to that rest api from Vue app and publish it again.

Simply open VS Code and change content of HelloWorld.vue with code below to make a rest api call to SAP by using axios library.

<template>
  <div id="restapp">
    <h1>{{ msg }}</h1>
    <div>
      <div v-if="loading">
        loading...
      </div>
      <div v-else>
        <div>
          <p>Date Time : {{ rObj.DATETIME }}</p>
        </div>
    
        <div>
          <p>Response : {{ response }}</p>
        </div>
    
        <div>
          <button @click="getDateTime">Refresh</button>
        </div>
      </div>
    </div>
    
    
    <h1>Test Rest Api</h1>
    <p><a target="_blank"
        href="http://vhcalnplci:8000/sap/bc/rest/zrest/Rest?sap-client=001&req={'ID':1001,'BODY':'Some Json Content'}">Click
        to Test Rest Api</a></p>

  </div>
</template>
  
<script>
const URL = 'http://vhcalnplci:8000/sap/bc/rest/zrest/Rest';

import axios from 'axios';

export default {

  name: 'HelloWorld',
  props: {
    msg: String
  },
  el: '#restapp',
  data() {
    return {
      loading: true,
      posts: [] // add posts here so reactivity is working, also undefined would be OK
    }
  },
  methods: {
    getDateTime() {
      this.loading = true
      axios.get(URL, {
        params: {
          req: '{"ID":1001,"BODY":"Some Json Content"}'
        }
      }).then((response) => {
        console.log(response.data, this)
        this.response = response.data
        this.rObj = JSON.parse(response.data.BODY);

        this.loading = false
      })
    },
  },

  created() {
    this.getDateTime()
  }
}

</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
  

run your server with “npm run serve” if it is not already running.

Code calls created method when vue object is created on page load and makes rest api call to SAP Rest api url with get parameters. Get parameters are handled in zrest api service, as told in detail in rest api tutorial, and result is returned as json object as seen below.

To test app on localhost you need to cancel CORS on Google Chrome, if you are too using Chrome.

Cors Error!

You can change the target of Google Chrome shortcut ->  “C:\Program Files\Google\Chrome\Application\chrome.exe” –disable-web-security –user-data-dir=”E:\Cabs\tmp”  instead of E:\Cabs\tmp you can give any directory.

Disable Cors on Chrome

And if you try to open chrome with that new link and enter our url you will get the data from SAP.

Enter credentials to logon to SAP system

And the result!

If you publish it to SAP and test it from sap url, you will have no Cors issues.

To publish first build your app with “npm run build” and publish it to SAP with “npx nwabap upload“.

Now we can open normal chrome and we can enter our app url -> http://vhcalnplci:8000/sap/bc/ui5_ui5/sap/zvueabapapp/index.html?sap-client=001

Exactly the same result 🙂

That is it. Rest of development is pure Vue on frontend and pure abap on backend. Very simply this how you can use any javascript framework on BSP stack with Rest api backend.

Now, instead of Fiori and oData, you can use Vue and Rest Api.

Hope that helps you.

Thanks for reading.