Welcome back there!
To the last blog of this SAPUI5 Firebase Blog Series (for now). ?
Hopefully you liked the previous blogs and found them interesting. Now since we arrived at the last part and of course not the least important one, we will deploy our application to the SAP Fiori Launchpad.
If you did not follow the previous blogs you can find them here.
SAPUI5 FIREBASE BLOG SERIES:
Of course we will not send the url of our deployed application to our customers. We will deploy them and make them accessible via the SAP Fiori Launchpad. A Portal where we can group all our desired and deployed applications.
Here you have an example of some deployed applications on a SAP Fiori Launchpad.
All the desired and deployed applications are available here and will be opened into an app shell view container.
Allright, convinced about this nice way of exposing applications to customers?
Let’s get started!
To test the application we built so far, we right-select our project and choose run. Here we select the "Run as SAP Fiori Launchpad Sandbox" option. This way we can test our app in a "virtual" Fiori Launchpad, without having to deploy it already.
This will result in the following error:
Not the way it should look like, right? ?
Reason:
This because the Fiori Launchpad runs the application from the Component.js file and not from the index.html file. Since we load our Firebase libraries from the index.html, they are not accessible in the application. For this we need to perform some adjustments to our previous implementations.
To make our UI5 Firebase application work in the Fiori Launchpad we will have to make some adjustments in some files and add some files to the project.
The files where we will make some adjustments:
The files we will add under the folder 'libs" (that we create under the webapp folder):
These files will move to another position in the folder structure:
Here you will see how the project is structured after adjusting and adding the files and folder. All the files, folders and adjustments we perform, take place under the webapp folder in our project.
In our index.html file we remove the following lines or put them in comment to have a backup on how we worked in the beginning.
Under the webapp folder in our project we add the folder "libs".
In this lib folder we add the following files:
As you can see, for each line we removed in our index.html file, we now created a file under the libs folder. The content for this files is very straight forward. You open the url for each script tag you added in the previous blogs in your browser and copy the content into your respective create file.
For example:
Open the following url in your browser: https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js
Copy all the output of this file:
Paste it into your respective created file:
Repeat these steps for the other 3 files.
In the earlier created firebase-messaging.js we will make a small adjustment.
Search in the file for:
We will change the default path to the service-worker file. This because, when an app is deployed to the Launchpad the paths are build dynamically. When using sap.ui.require.toUrl("your-path-and-filen-name") you can let the launchpad build the url for you. Provide the root path towards your service-worker file + keep the file name and scope path at the end like in the example below.
So change the following lines:
To:
Because files in the root directory on the launchpad are not easy to debug or accessible we move our firebase-messaging-sw.js into our webapp folder. (See folder structure above)
Next in this file we will make one small change. This according to the Firebase.initialize. Since we are working in the launchpad now, it is very usual that the app will be closed and opened again. By moving this service worker file to the webapp folder this function will be called every time we open the app. Obviously we do not want this.
So change:
To:
This way we check if Firebase is already initialized.
The same logic applies for the Firebase.js file. here we initialize Firebase to our application and return our Firebase model. so therefor in the initializeFirebase function we will check if it's already initialized and if so we only return our model.
So again but now in the Firebase.js file in the initializeFirebase function we change it.
So change:
To:
This way we check if Firebase is already initialized.
In this manifest.json file we will add a some javascript resources under the resources. As you can see under the "js" key array we add all the resources. Obviously these resources are the files we created as an object.
The uri : Path to your file and file name. So example: libs/firebase-app.js.
The name : Name you want to give to the resource.
The version : Version of the resource. In this case version 6.2.0 (you find this in your url)
Here is on how your manifest.json file should look like:
The last adjustments we have to make, is in our Component.js file. This because the path to our image/icon that we show in our notifications is not static anymore. The path to this image will be build dynamically in the SAP Fiori Launchpad. So without changing this the icon will not be visible anymore in the notification.
So we change the following line:
To:
This sap.ui.require.toUrl will make it possible to build your path from anywhere in a correct way. Provide the root path towards your file + the icon name (provided in the notification.icon).
Here an overview on how your messaging.onMessage function should look like:
When we run our application again with the "Run as SAP Fiori Launchpad Sandbox" option, we will see that our application loads smoothly into our Fiori Launchpad.
Awesome!
In the SAP Cloud Platform got to your subaccount and select the Services section in the menu. Here you search for the Portal service and select it.
If the service is not enabled yet, you can do it here and next go to the service.
In here select the Sitedirectory option in the side menu. Next you Create a new site directory or use an existing one.
If you create a new one you will be asked for the following required fields:
When created or selected a sitedirectory, you want to create a catalog. A catalog is a collection of one or multiple apps. You can create a catalog by selecting the catalog option from the side menu. Next you press the '+' sign and choose a name for you catalog.
You finish creating your catalog by choosing the "roles" tab-icon and you add the role "everyone" by pressing the "+" sign.
To create a group, you perform the same steps. But if course you use the group option in the side menu. Next you choose a name again and you add the role "everyone" again.
To activate and publish your site you select the small globe in the right part of your header and select the "Publish" button. We do not have to check the box to clean the "Clean HTML-applicationCache" because we do not have any applications deployed yet. Opening this site is not necessary cause it will be empty.
There are 2 last steps to take, to deploy and register our SAP UI5 Firebase Applications to the launchpad. Obviously, deploying the application and registering it to the Launchpad in our created catalog and group.
To deploy your application you right-click your project and select "Deploy", in here you choose the option "Deploy to SAP Cloud Platform". Next choose "Deploy a new application" and select Deploy.
To register your application you right-click your project and select "Deploy", in here you choose the option "Register to SAP Fiori Launchpad". This will open the following wizard.
You can leave all the fields as they are and optionally provide a description. Press next.
Next you will configure your tile, we select a "Static" tile. here you can provide a "Title" and a "Subtitle". Also it is possible to select the desired "Icon" for the tile.
The last step is selecting a Site, Catalog and Group. Select the ones you created in step 4.
Press Next.
In the following screen we select the Finish button. Congratulations, you just deployed and registered your first application to the SAP Fiori Launchpad. Select the "Open SAP Fiori Launchpad" link.
When you open your launchpad you will see your application in a tile.
And you will be able to open it without any errors or problems.
In this blog I covered the basics of preparing, using and deploying applications to the SAP Fiori Launchpad.
So here are some key takeaways:
I hope I touched some nice and interesting points, which I liked to share. Cause these tips and tricks helped me along the way in some recent cases. Hopefully you're willing to give it a try and may it serve you in feature developments. ?
Kind regards,
Dries
To the last blog of this SAPUI5 Firebase Blog Series (for now). ?
Hopefully you liked the previous blogs and found them interesting. Now since we arrived at the last part and of course not the least important one, we will deploy our application to the SAP Fiori Launchpad.
If you did not follow the previous blogs you can find them here.
SAPUI5 FIREBASE BLOG SERIES:
| Create SAPUI5 Applications with Google Firebase |
| SAPUI5 Applications with Firebase Anonymous Authentication |
| SAPUI5 Applications with Firebase Cloud Messaging |
| Make SAPUI5 Firebase Applications Fiori Launchpad Ready (this blog) |
Of course we will not send the url of our deployed application to our customers. We will deploy them and make them accessible via the SAP Fiori Launchpad. A Portal where we can group all our desired and deployed applications.
Here you have an example of some deployed applications on a SAP Fiori Launchpad.
All the desired and deployed applications are available here and will be opened into an app shell view container.
Allright, convinced about this nice way of exposing applications to customers?
Let’s get started!
1. Test the application in its current state ▶️
To test the application we built so far, we right-select our project and choose run. Here we select the "Run as SAP Fiori Launchpad Sandbox" option. This way we can test our app in a "virtual" Fiori Launchpad, without having to deploy it already.
This will result in the following error:
Not the way it should look like, right? ?
Reason:
This because the Fiori Launchpad runs the application from the Component.js file and not from the index.html file. Since we load our Firebase libraries from the index.html, they are not accessible in the application. For this we need to perform some adjustments to our previous implementations.
2. Make the adjustments to fix this error ?️
To make our UI5 Firebase application work in the Fiori Launchpad we will have to make some adjustments in some files and add some files to the project.
The files where we will make some adjustments:
- index.html
- manifest.json
- Component.js
- firebase-messaging.js
- firebase-messaging-sw.js
- Firebase.js
The files we will add under the folder 'libs" (that we create under the webapp folder):
- firebase-app.js
- firebase-firestore.js
- firebase-auth.js
- firebase-messaging.js
These files will move to another position in the folder structure:
- firebase-messaging-sw.js
Here you will see how the project is structured after adjusting and adding the files and folder. All the files, folders and adjustments we perform, take place under the webapp folder in our project.
2.1 Adjust the index.html
In our index.html file we remove the following lines or put them in comment to have a backup on how we worked in the beginning.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<!-- Add the Firebase Firestore JS SDK -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
<!-- Add the Firebase Authentication JS SDK -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<!-- Add the Firebase Messaging JS SDK -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-messaging.js"></script>2.2 Add the following 4 Files under the libs folder
Under the webapp folder in our project we add the folder "libs".
In this lib folder we add the following files:
- firebase-app.js
- firebase-firestore.js
- firebase-auth.js
- firebase-messaging.js
As you can see, for each line we removed in our index.html file, we now created a file under the libs folder. The content for this files is very straight forward. You open the url for each script tag you added in the previous blogs in your browser and copy the content into your respective create file.
For example:
Open the following url in your browser: https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js
Copy all the output of this file:
Paste it into your respective created file:
Repeat these steps for the other 3 files.
2.3 Adjust the firebase-messaging.js
In the earlier created firebase-messaging.js we will make a small adjustment.
Search in the file for:
navigator.serviceWorker.register("/firebase-messaging-sw.js")We will change the default path to the service-worker file. This because, when an app is deployed to the Launchpad the paths are build dynamically. When using sap.ui.require.toUrl("your-path-and-filen-name") you can let the launchpad build the url for you. Provide the root path towards your service-worker file + keep the file name and scope path at the end like in the example below.
So change the following lines:
navigator.serviceWorker.register("/firebase-messaging-sw.js"), {
scope: "/firebase-cloud-messaging-push-scope"
})To:
navigator.serviceWorker.register(sap.ui.require.toUrl("sap/firebase/SAP-Firebase-Connect/firebase-messaging-sw.js"), {
scope: sap.ui.require.toUrl("sap/firebase/SAP-Firebase-Connect/firebase-cloud-messaging-push-scope")
})2.4 Move and Adjust the firebase-messaging-sw.js
Because files in the root directory on the launchpad are not easy to debug or accessible we move our firebase-messaging-sw.js into our webapp folder. (See folder structure above)
Next in this file we will make one small change. This according to the Firebase.initialize. Since we are working in the launchpad now, it is very usual that the app will be closed and opened again. By moving this service worker file to the webapp folder this function will be called every time we open the app. Obviously we do not want this.
So change:
firebase.initializeApp(firebaseConfig);
To:
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}This way we check if Firebase is already initialized.
2.5 Adjust the Firebase.js
The same logic applies for the Firebase.js file. here we initialize Firebase to our application and return our Firebase model. so therefor in the initializeFirebase function we will check if it's already initialized and if so we only return our model.
So again but now in the Firebase.js file in the initializeFirebase function we change it.
So change:
firebase.initializeApp(firebaseConfig);
To:
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}This way we check if Firebase is already initialized.
2.6 Adjust the manifest.json
In this manifest.json file we will add a some javascript resources under the resources. As you can see under the "js" key array we add all the resources. Obviously these resources are the files we created as an object.
The uri : Path to your file and file name. So example: libs/firebase-app.js.
The name : Name you want to give to the resource.
The version : Version of the resource. In this case version 6.2.0 (you find this in your url)
"js": [
{
"uri": "libs/firebase-app.js",
"name": "FirebaseApp",
"version": "6.2.0"
},
{
"uri": "libs/firebase-firestore.js",
"name": "FirebaseFirestore",
"version": "6.2.0"
},
{
"uri": "libs/firebase-auth.js",
"name": "FirebaseAuth",
"version": "6.2.0"
},
{
"uri": "libs/firebase-messaging.js",
"name": "FirebaseMessaging",
"version": "6.2.0"
}
]Here is on how your manifest.json file should look like:
2.7 Adjust the Component.js
The last adjustments we have to make, is in our Component.js file. This because the path to our image/icon that we show in our notifications is not static anymore. The path to this image will be build dynamically in the SAP Fiori Launchpad. So without changing this the icon will not be visible anymore in the notification.
So we change the following line:
icon: notification.icon,To:
icon: sap.ui.require.toUrl("sap/firebase/SAP-Firebase-Connect/" + notification.icon)This sap.ui.require.toUrl will make it possible to build your path from anywhere in a correct way. Provide the root path towards your file + the icon name (provided in the notification.icon).
Here an overview on how your messaging.onMessage function should look like:
// Show message in foreground (if desired)
messaging.onMessage(function (payload) {
console.log("Message received. ", payload);
var notification = JSON.parse(payload.data.notification);
const notificationTitle =notification.title;
const notificationOptions = {
body: notification.body,
// icon: notification.icon,
icon: sap.ui.require.toUrl("sap/firebase/SAP-Firebase-Connect/" + notification.icon)
};
var notification = new Notification(notificationTitle, notificationOptions);
return notification;
});3. Test the application in its new state ✅
When we run our application again with the "Run as SAP Fiori Launchpad Sandbox" option, we will see that our application loads smoothly into our Fiori Launchpad.
Awesome!
4. Activate & Setup the Portal in the SCP ☁️
In the SAP Cloud Platform got to your subaccount and select the Services section in the menu. Here you search for the Portal service and select it.
4.1 Activate the Service
If the service is not enabled yet, you can do it here and next go to the service.
4.2 Create a SiteDirectory
In here select the Sitedirectory option in the side menu. Next you Create a new site directory or use an existing one.
If you create a new one you will be asked for the following required fields:
- p or s-user
- password
4.3 Create a Catalog
When created or selected a sitedirectory, you want to create a catalog. A catalog is a collection of one or multiple apps. You can create a catalog by selecting the catalog option from the side menu. Next you press the '+' sign and choose a name for you catalog.
You finish creating your catalog by choosing the "roles" tab-icon and you add the role "everyone" by pressing the "+" sign.
4.4 Create a Group
To create a group, you perform the same steps. But if course you use the group option in the side menu. Next you choose a name again and you add the role "everyone" again.
4.5 Publish your Site
To activate and publish your site you select the small globe in the right part of your header and select the "Publish" button. We do not have to check the box to clean the "Clean HTML-applicationCache" because we do not have any applications deployed yet. Opening this site is not necessary cause it will be empty.
5. Deploy & Register to the Launchpad ?️
There are 2 last steps to take, to deploy and register our SAP UI5 Firebase Applications to the launchpad. Obviously, deploying the application and registering it to the Launchpad in our created catalog and group.
5.1 Deploy your application
To deploy your application you right-click your project and select "Deploy", in here you choose the option "Deploy to SAP Cloud Platform". Next choose "Deploy a new application" and select Deploy.
5.2 Register the app to the Fiori Launchpad
To register your application you right-click your project and select "Deploy", in here you choose the option "Register to SAP Fiori Launchpad". This will open the following wizard.
You can leave all the fields as they are and optionally provide a description. Press next.
Next you will configure your tile, we select a "Static" tile. here you can provide a "Title" and a "Subtitle". Also it is possible to select the desired "Icon" for the tile.
The last step is selecting a Site, Catalog and Group. Select the ones you created in step 4.
Press Next.
In the following screen we select the Finish button. Congratulations, you just deployed and registered your first application to the SAP Fiori Launchpad. Select the "Open SAP Fiori Launchpad" link.
When you open your launchpad you will see your application in a tile.
And you will be able to open it without any errors or problems.
6. What did we learn? ?
In this blog I covered the basics of preparing, using and deploying applications to the SAP Fiori Launchpad.
So here are some key takeaways:
- Do NOT include your third libraries in your index.html.
- You can preload you third-libraries in your manifest.json under resources.
- Fiori Launchpad loads the application from the Component.js file and not the index.html.
- How to use the sap.ui.require.toUrl() function to dynamically find your resources anywhere.
- How to activate and setup your Portal / SAP Fiori Launchpad.
- How to deploy and register your SAP UI5 applications to the SAP Fiori Launchpad.
I hope I touched some nice and interesting points, which I liked to share. Cause these tips and tricks helped me along the way in some recent cases. Hopefully you're willing to give it a try and may it serve you in feature developments. ?
Kind regards,
Dries
- SAP Managed Tags:
