In this short blog post you’ll learn how to quickly embed a SAP Analytics Cloud Story in a Node.js Portal using a SAC URL API to display an specific page, also you’ll learn how to quickly run your Node.js application in SAP Business Application Studio and deploy it to the Cloud Foundry Environment.
Prerequisites:
First, you’ll need to add your application as a Trusted Origin of the SAP Analytics Cloud system, in this case we are building from scratch so we’ll use in this case “Allow all origins”, you can change this later if you want to.
Log in to your SAP Analytics Cloud tenant and go to Administration inside the System tab:
Go now to App Integration and check “Allow all origins”:
For more information about how to handle security via OAuth client credentials, click here.
Have already a story which you’re going to embed into the Node.js application. In my case I’ll use one that redirects me to a specific page. You can find more documentation about SAP Analytics Cloud APIs here.
This is the proper way to go to a specific page (for this one I’ll select the second tab of the story):
Later start building your Node.js application in SAP Business Application Studio.
For this exercise, I’ll take advantage of the public CSS file enabled by W3 Schools to quickly develop the portal.
In case you don’t have it yet, you’ll need to create a Space to start building you application in SAP Business Application Studio. So, let’s first create a “Dev” Space:
I selected the basic option and all the extensions (just in case in the future you want to build more projects) and confirmed the creation of the Dev Space.
When entering, open the Workspace and select the main projects folder. Now on the Welcome Tab click on “Clone from git” in order to clone my project, like this:
After cloning the project, go to the index.html file inside the public folder and change the example URL for your story embedded link:
Navigate to your project’s folder “nodeJSPortalSACEmbedded” and run “npm install” in the terminal in order to install all the node dependencies:
You will see now the node_modules folder and the package-lock.json file created
Now run “npm start” and you can also see in the package.json file that by doing this we are running the command “node server.js”.
Then a pop-up message is going to appear in the lower right corner with the message "A server listening on port 8080, Open in New Tab”. In case this doesn’t happen due to an error, it might be because that port is busy, try change it to 3000 or 8081 in the server.js file (in the 13th line).
Later it may ask you a description to the port you’re using, you can put it or skip it by pressing Enter in your keyboard.
You’re going to see the web application like this, by scrolling down you'll be able to see your SAC story embedded. In case you're not logged in, there will be a pop-up showing to enter your SAC credentials. This can be handled later with proper Identity Authentication SSO configured.
Now let’s deploy the application. Go back to you Sap Business Application Studio and log in to your Cloud Foundry Environment. Type “cf login” and enter your API endpoint (you can find yours in the SAP Cloud Platform trial subaccount cockpit), enter your credentials and select your trial ID account.
Now deploy your application with the following command (in my case I named the application the same way as the project):
Wait a few seconds and when it's done you'll see the URL of your web application (a.k.a Node.js Portal) with a SAC story embedded.
Now by accessing your SAC tenant, you'll be able to see the story already embedded into your Node.js web application.
To wrap up, in this blog post you should have learned how to embed a SAC story into a web application using SAP Business Application Studio and running it on the Cloud Foundry Environment. I hope you'd enjoyed it! 🙂
Prerequisites:
- SAP Cloud Platform trial account (+ the good news that now you can use it for 12 months straight!)
- Enable SAP Business Application Studio
- SAP Analytics Cloud trial tenant and a story already built
First, you’ll need to add your application as a Trusted Origin of the SAP Analytics Cloud system, in this case we are building from scratch so we’ll use in this case “Allow all origins”, you can change this later if you want to.
Log in to your SAP Analytics Cloud tenant and go to Administration inside the System tab:
Go now to App Integration and check “Allow all origins”:
For more information about how to handle security via OAuth client credentials, click here.
Have already a story which you’re going to embed into the Node.js application. In my case I’ll use one that redirects me to a specific page. You can find more documentation about SAP Analytics Cloud APIs here.
This is the proper way to go to a specific page (for this one I’ll select the second tab of the story):
https://<TENANT>/sap/fpa/ui/tenants/<TENANT_ID>/bo/story/<STORY_ID>?page=2Later start building your Node.js application in SAP Business Application Studio.
For this exercise, I’ll take advantage of the public CSS file enabled by W3 Schools to quickly develop the portal.
In case you don’t have it yet, you’ll need to create a Space to start building you application in SAP Business Application Studio. So, let’s first create a “Dev” Space:
I selected the basic option and all the extensions (just in case in the future you want to build more projects) and confirmed the creation of the Dev Space.
When entering, open the Workspace and select the main projects folder. Now on the Welcome Tab click on “Clone from git” in order to clone my project, like this:
After cloning the project, go to the index.html file inside the public folder and change the example URL for your story embedded link:
Navigate to your project’s folder “nodeJSPortalSACEmbedded” and run “npm install” in the terminal in order to install all the node dependencies:
You will see now the node_modules folder and the package-lock.json file created
Now run “npm start” and you can also see in the package.json file that by doing this we are running the command “node server.js”.
Then a pop-up message is going to appear in the lower right corner with the message "A server listening on port 8080, Open in New Tab”. In case this doesn’t happen due to an error, it might be because that port is busy, try change it to 3000 or 8081 in the server.js file (in the 13th line).
Later it may ask you a description to the port you’re using, you can put it or skip it by pressing Enter in your keyboard.
You’re going to see the web application like this, by scrolling down you'll be able to see your SAC story embedded. In case you're not logged in, there will be a pop-up showing to enter your SAC credentials. This can be handled later with proper Identity Authentication SSO configured.
Now let’s deploy the application. Go back to you Sap Business Application Studio and log in to your Cloud Foundry Environment. Type “cf login” and enter your API endpoint (you can find yours in the SAP Cloud Platform trial subaccount cockpit), enter your credentials and select your trial ID account.
Now deploy your application with the following command (in my case I named the application the same way as the project):
cf push <your_app_name> -f manifest.ymlWait a few seconds and when it's done you'll see the URL of your web application (a.k.a Node.js Portal) with a SAC story embedded.
Now by accessing your SAC tenant, you'll be able to see the story already embedded into your Node.js web application.
To wrap up, in this blog post you should have learned how to embed a SAC story into a web application using SAP Business Application Studio and running it on the Cloud Foundry Environment. I hope you'd enjoyed it! 🙂
- SAP Managed Tags:
2 Comments
