Hi, Developers and Designers out there!
Do you also share the love and passion for dark themes? Well I do, have a look at my VsCode editor, Windows and iPhone theme.
VsCode
Windows 10
iPhone IOS
Cause literally the white displays/screens/themes are burning my eyes. But hey no hate! Only a big lover of the dark themes.
Like we all know Fiori 3 is out there and the SAP Quartz Dark Theme with it. What we see is what we want, right? Well if you have that same urgent feeling of using the Fiori 3 Dark (SAP Quartz Dark) Theme like I do, then you just hit the right blog!
For more information about the SAP Quartz Dark Theme I’d suggest checking out the following blog:
https://blogs.sap.com/2020/01/29/next-step-of-sap-fiori-3-available-quartz-dark-theme/
More technical information about the theme can be found here:
https://openui5.hana.ondemand.com/topic/25e532617b7f4b9bad842757324151ed.html
The whole Github repository of this demo is available here:
https://github.com/vvdries/Fiori3DarkThemeExample
What will we build to apply this Dark theme? Well, three things and those are the following:
That’s it? Yep, that’s it. Once created only the theme needs to be applied.
Any special requirements?
Only one, a minimum UI5 version of 1.72 I would think.
This can be set in the manifest.json file.
In the webIDE, right-click your workspace > new > project from template.
In the wizard select the Cloud Foundry option as Environment and the SAP Innovation (1.74) option as SAPUI5 Version. Press next and provide a Module name (Fiori3DarkThemeHTML5App) and namespace (DarkThemeForTheWin). Press next and finish.
When you clicked finish the following folder structure will be created:
This with your workspace folder (in my case) CleanForDemosPrintscreens.
Inside the Multi Target Application project is available called mta_Fiori3DarkThemeHTML5App.
This MTA containing your HTML5 Module called Fiori3DarkThemeHTML5App.
All set lets apply the Fiori 3 Dark Theme.
This for when we want to run our app as a Web Application.
Open the index.html file and change the following line:
To:
Next right-click your HTML5 Module and select > Run > Run as Web Application. If you would get a screen displayed about Cloud Foundry Configurations, just provide them. Select the right endpoint, provide your Organization and Space by selecting them from the dropdown.
When the app will run and open, you will have your first dark theme experience on the screen:
Little empty, right? I will just add some data for demo purposes. You can have a look at the GitHub repository, provided in the introduction for the code example.
Cause it is about the dark theme right. ?
What do you need more to be happy?
First, we will need to add the Fiori Launchpad Module.
For this you right-click your Multi Target Application project > new > SAP Fiori Launchpad Site Module. Provide a Module name (DarkFLP) and press Finish.
You will see the Fiori Launchpad Site Module has been added to your MTA project. (DarkFLP)
Before we can add our app to the Fiori Launchpad, we must make a small adjustment in our HTML5 Module. This in the webapp folder in the manifest.json file.
Open the manifest.json file in the Descriptor Editor or Code Editor.
Under the Inbound section provide the following values:
Next you can provide a Title and icon and more under the Inbound Tile section. (ignore the red warning)
Make sure to save the file.
Now your app is ready to be added the Fiori Launchpad Site Module.
Open the CommonDataModel.json file in the FLP Module.
Here you can provide a group title and add your HTML5 app to the Fiori Launchpad.
This by pressing the + icon and select your app from the list.
After selecting your app, the CommonDataModel.json file will look like this:
Make sure to save the file.
Next open the file with the Code Editor instead of the Launchpad Editor. (bottom of the screen)
Here you change the following lines:
To:
Basically, you just extend the sap_fiori_3 values with _dark.
In case you want to be able to switch back to the default Fiori 3 Theme, you can add the sap_fiori_3_dark to the array instead of changing the sap_fiori_3 to sap_fiori_3_dark.
But I chose to replace the default one to Dark in the array. Cause I always use the Dark Theme in every application or editor, like I mentioned before. ?
Save the file again.
Time to run our application as an FLP Application. So, right-click your HTML5 Module and select > Run > Run as SAP Fiori Launchpad Sandbox.
Tadaaaaa! Wait what? No dark theme Dries!
Yes, I know… What I think is that the SAP FLP Sandbox has his own theme version, which we cannot override. Please do correct me if I’m wrong about it. Thanks! ?
If you really want to override it, you can add the following line of code in the Component.js file inside your init function.
If you would run your application now as a Fiori Launchpad Sandbox Application. The Dark Theme would be applied.
But let's get our application ready for deployment, and check out the Dark Theme in the Fiori Launchpad we created earlier.
Close the Sandbox and right-click your MTA project and select > Build > Build with Cloud MTA Build Tool (Recommended).
This will start building your MTA project. The terminal will open, and you can follow the progress.
Once it is done building you will see the following message:
This build extended your MTA project. You will see a folder mta_archives was added with inside your .mtar file (mta_Fiori3DarkThemeHTML5App_0.0.1.mtar).
What we want to do with this created mta_Fiori3DarkThemeHTML5App_0.0.1.mtar file is deploying it to the SAP Cloud Platform (Cloud Foundry).
Right-click the mta_Fiori3DarkThemeHTML5App_0.0.1.mtar file and select > Deploy > Deploy to SAP Cloud Platform.
Provide the Cloud Foundry SAP CP configuration, holding your CF endpoint, Organization and Space and press Deploy.
In the terminal you will see the webIDE is deploying your MTA to CF SAP CP.
Once it is done, go to your SAP Cloud Platform > account > subaccount > space > applications.
Here search for your application (App-Router😞 mta_Fiori3DarkThemeHTML5App_appRouter.
Open it and press your Application Routes URL.
Time to say TADAAA again!
Our SAP Fiori Launchpad Site Module with in it our HTML5 Module both running inside our Multi Target Application Project. But what is most important? It has the SAP Fiori 3 Quartz Dark Theme applied. ??
Awesome to finally know how to apply this beautiful SAP Quartz Dark theme right?
Lovely to read about, but hey we want to use it!
What did we learn?
I hope you found this interesting and you will start implementing the Dark Theme yourself from now on. Because it is just lovely and amazing!
Happy theming!
Kind regards,
Dries
Do you also share the love and passion for dark themes? Well I do, have a look at my VsCode editor, Windows and iPhone theme.
VsCode
Windows 10
iPhone IOS
Cause literally the white displays/screens/themes are burning my eyes. But hey no hate! Only a big lover of the dark themes.
Like we all know Fiori 3 is out there and the SAP Quartz Dark Theme with it. What we see is what we want, right? Well if you have that same urgent feeling of using the Fiori 3 Dark (SAP Quartz Dark) Theme like I do, then you just hit the right blog!
For more information about the SAP Quartz Dark Theme I’d suggest checking out the following blog:
https://blogs.sap.com/2020/01/29/next-step-of-sap-fiori-3-available-quartz-dark-theme/
More technical information about the theme can be found here:
https://openui5.hana.ondemand.com/topic/25e532617b7f4b9bad842757324151ed.html
The whole Github repository of this demo is available here:
https://github.com/vvdries/Fiori3DarkThemeExample
What will we build to apply this Dark theme? Well, three things and those are the following:
- A Multi Target Application
- An HTML5 Module inside the MTA
- A Fiori Launchpad Module inside the MTA
That’s it? Yep, that’s it. Once created only the theme needs to be applied.
Any special requirements?
Only one, a minimum UI5 version of 1.72 I would think.
This can be set in the manifest.json file.
Building the Multi Target Application
In the webIDE, right-click your workspace > new > project from template.
In the wizard select the Cloud Foundry option as Environment and the SAP Innovation (1.74) option as SAPUI5 Version. Press next and provide a Module name (Fiori3DarkThemeHTML5App) and namespace (DarkThemeForTheWin). Press next and finish.
When you clicked finish the following folder structure will be created:
This with your workspace folder (in my case) CleanForDemosPrintscreens.
Inside the Multi Target Application project is available called mta_Fiori3DarkThemeHTML5App.
This MTA containing your HTML5 Module called Fiori3DarkThemeHTML5App.
All set lets apply the Fiori 3 Dark Theme.
Apply Fiori 3 Dark Theme when running as Web Application
This for when we want to run our app as a Web Application.
Open the index.html file and change the following line:
data-sap-ui-theme="sap_fiori_3"To:
data-sap-ui-theme="sap_fiori_3_dark"Next right-click your HTML5 Module and select > Run > Run as Web Application. If you would get a screen displayed about Cloud Foundry Configurations, just provide them. Select the right endpoint, provide your Organization and Space by selecting them from the dropdown.
When the app will run and open, you will have your first dark theme experience on the screen:
Little empty, right? I will just add some data for demo purposes. You can have a look at the GitHub repository, provided in the introduction for the code example.
Cause it is about the dark theme right. ?
What do you need more to be happy?
Apply Fiori 3 Dark Theme when running as Fiori Launchpad Application
First, we will need to add the Fiori Launchpad Module.
For this you right-click your Multi Target Application project > new > SAP Fiori Launchpad Site Module. Provide a Module name (DarkFLP) and press Finish.
You will see the Fiori Launchpad Site Module has been added to your MTA project. (DarkFLP)
Before we can add our app to the Fiori Launchpad, we must make a small adjustment in our HTML5 Module. This in the webapp folder in the manifest.json file.
Open the manifest.json file in the Descriptor Editor or Code Editor.
Under the Inbound section provide the following values:
| Semantic object | data |
| Action | display |
Next you can provide a Title and icon and more under the Inbound Tile section. (ignore the red warning)
Make sure to save the file.
Now your app is ready to be added the Fiori Launchpad Site Module.
Open the CommonDataModel.json file in the FLP Module.
Here you can provide a group title and add your HTML5 app to the Fiori Launchpad.
This by pressing the + icon and select your app from the list.
After selecting your app, the CommonDataModel.json file will look like this:
Make sure to save the file.
Next open the file with the Code Editor instead of the Launchpad Editor. (bottom of the screen)
Here you change the following lines:
"sap.cloud.portal": {
"config": {
"theme.id": "sap_fiori_3",
"theme.active": ["sap_fiori_3", "sap_belize_hcb", "sap_belize_hcw"]
}
}
To:
"sap.cloud.portal": {
"config": {
"theme.id": "sap_fiori_3_dark",
"theme.active": ["sap_fiori_3_dark", "sap_belize_hcb", "sap_belize_hcw"]
}
}
Basically, you just extend the sap_fiori_3 values with _dark.
In case you want to be able to switch back to the default Fiori 3 Theme, you can add the sap_fiori_3_dark to the array instead of changing the sap_fiori_3 to sap_fiori_3_dark.
But I chose to replace the default one to Dark in the array. Cause I always use the Dark Theme in every application or editor, like I mentioned before. ?
Save the file again.
Time to run our application as an FLP Application. So, right-click your HTML5 Module and select > Run > Run as SAP Fiori Launchpad Sandbox.
Tadaaaaa! Wait what? No dark theme Dries!
Yes, I know… What I think is that the SAP FLP Sandbox has his own theme version, which we cannot override. Please do correct me if I’m wrong about it. Thanks! ?
If you really want to override it, you can add the following line of code in the Component.js file inside your init function.
sap.ui.getCore().applyTheme("sap_fiori_3_dark");If you would run your application now as a Fiori Launchpad Sandbox Application. The Dark Theme would be applied.
But let's get our application ready for deployment, and check out the Dark Theme in the Fiori Launchpad we created earlier.
Close the Sandbox and right-click your MTA project and select > Build > Build with Cloud MTA Build Tool (Recommended).
This will start building your MTA project. The terminal will open, and you can follow the progress.
Once it is done building you will see the following message:
17:05:49 (mtaBuildTask) Build of "mta_Fiori3DarkThemeHTML5App" completed.This build extended your MTA project. You will see a folder mta_archives was added with inside your .mtar file (mta_Fiori3DarkThemeHTML5App_0.0.1.mtar).
What we want to do with this created mta_Fiori3DarkThemeHTML5App_0.0.1.mtar file is deploying it to the SAP Cloud Platform (Cloud Foundry).
Right-click the mta_Fiori3DarkThemeHTML5App_0.0.1.mtar file and select > Deploy > Deploy to SAP Cloud Platform.
Provide the Cloud Foundry SAP CP configuration, holding your CF endpoint, Organization and Space and press Deploy.
In the terminal you will see the webIDE is deploying your MTA to CF SAP CP.
Once it is done, go to your SAP Cloud Platform > account > subaccount > space > applications.
Here search for your application (App-Router😞 mta_Fiori3DarkThemeHTML5App_appRouter.
Open it and press your Application Routes URL.
Time to say TADAAA again!
Our SAP Fiori Launchpad Site Module with in it our HTML5 Module both running inside our Multi Target Application Project. But what is most important? It has the SAP Fiori 3 Quartz Dark Theme applied. ??
Let’s wrap-up! ?
Awesome to finally know how to apply this beautiful SAP Quartz Dark theme right?
Lovely to read about, but hey we want to use it!
What did we learn?
- An MTA project holding an HTML5 Module and Fiori Launchpad Site Module can be configured to use the Dark Theme.
- Running the HTML5 Module as Web Application needs to Dark Theme config in the index.html file.
- When we want to run it as a Fiori Launchpad Application, we have to provide the configuration in the CommonDataModel.json file inside the FLP Module.
- A minimum UI5 Version of 1.72 is required.
- When running as Web Application in the WebIDE the Dark Theme will be applied but not as Fiori Launchpad Sandbox. This because the Sandbox forces a specific theme. Like I said before, correct me here if I’m wrong.
- Last but not definitely not least, when we build and deploy our MTA project, we can use the App-Router to navigate to our FLP Module and there we will see the Dark Theme is applied.
I hope you found this interesting and you will start implementing the Dark Theme yourself from now on. Because it is just lovely and amazing!
Happy theming!
Kind regards,
Dries
- SAP Managed Tags:
8 Comments
