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:
- 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