SAP Fiori, SAPUI5

Applying Fiori 3 Dark Theme (SAP Quartz Dark) in UI5 Apps & Fiori Launchpad MTA

webadmin

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.

Also More: SAP Fiori Application Developer Certification Preparation Guide

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!

What will we build to apply this Dark theme? Well, three things and those are the following:

  1. A Multi Target Application
  2. An HTML5 Module inside the MTA
  3. 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.

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 version which we cannot override. Please do correct me if I’m wrong about it. Thanks!

But hey I’m not sending you home with only 50% of what you came for.

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.

Read More: SAP Fiori System Administration Certification

Rating: 0 / 5 (0 votes)

Leave a Reply

Your email address will not be published. Required fields are marked *