Design of SAP Fiori/UI5 Application

1
votes

I’m trying to develop my first SAP Fiori App. Now I have some question about themes and background. In my index.html sap_belize_plus is the selected theme. In the SAP Fiori Launchpad you can chose between different SAP themes.

  1. Does the chosen theme in the Launchpad affect my app or will it be displayed exactly as implemented (only belize theme)?
  2. Should I do custom CSS?
  3. I saw apps with the standard #EBEBEB background and others with the picture background. On what does this depend?

Thanks for your help!

2
sapui5sap-fiori

2 Answers

1
votes
  1. Does the chosen theme in the Launchpad affect my app or will it be displayed exactly as implemented (only belize theme)?

Yes. Chosen theme from the Launchpad will be the one that will be used. (Not the one in your index.html)

Should I do custom CSS?

Ideally No. You should create a custom theme (start by copying the standard) and try to achieve your desired result with the theme. CSS should be your last resort.

I saw apps with the standard #EBEBEB background and others with the picture background. On what does this depend?

This can be either due to custom CSS to due to the custom theme. You have to look into the 'Developer tools' to determine.

0
votes

If you use the Fiori Launchpad (FLP) you have 2 options.

  1. [Most common & recommended] Configure your tile to open the app calling the Component.js file
  2. Configuring the tile to open the index.html file (UI5 standalone configutarion)

In option 1, the index.html file of your app is not used. It's the FLP the one who plays the role of index.html file, and the app is loaded into the ComponentContainer of the FLP using JS-based navigation (hash navigation). So, in a default app config, the theme you use in your FLP will be the one used in your app. Besides you can configure which are the supported themes for your app in the descriptor file, setting the property 

"supportedThemes": [
    "sap_bluecrystal"
]

More info in this link

In option 2, the app will be opened in a new tab, calling the index.html file, so it will use the theme you configure in the index.html file.

In the most common & easy way, you apply your custom themes in the whole FLP and you configure your apps to use it.

I think you should start reading about Theme Designer before you start coding CSS

Furthermore if you want to add just a few CSS classes, read this