Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Specify content density handling with Fiori Launchpad in more details #172

Merged
merged 17 commits into from
Jan 20, 2025
Merged

Specify content density handling with Fiori Launchpad in more details #172

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7459646
Update step-36-content-density-d935dbf.md
ulasenka Nov 19, 2024
ae2274f
FLP allows user to select cozy/compact on all desktop devices
ulasenka Nov 19, 2024
5b3f614
Update TS example of setting content density
ulasenka Nov 19, 2024
be390c2
Update description in step-36-content-density
ulasenka Nov 19, 2024
6eb80ce
Update description of the default content density
ulasenka Nov 19, 2024
bdfa06c
Clarify the deafult content density on different devices
ulasenka Nov 19, 2024
f0641a2
Update how-to-use-densities-for-controls-13e6f3b.md
KlattG Dec 19, 2024
cf059f6
Adapted JavaScript Step in analogy to TypeScript step
KlattG Dec 19, 2024
3cdb752
Update step-36-content-density-d935dbf.md
KlattG Dec 19, 2024
87936dc
Update step-36-content-density-typescript-667aa4a.md
KlattG Dec 19, 2024
c3ba592
Feedback from SME review
KlattG Dec 19, 2024
7d7ebc3
Feedback from developer review
KlattG Dec 19, 2024
96c0701
Update step-36-content-density-typescript-667aa4a.md
ulasenka Jan 14, 2025
ec7cdc7
Update how-to-use-densities-for-controls-13e6f3b.md
KlattG Jan 17, 2025
149269d
Update step-36-content-density-d935dbf.md
KlattG Jan 20, 2025
a79edf4
Update step-36-content-density-typescript-667aa4a.md
KlattG Jan 20, 2025
0513d20
Merge branch 'main' into patch-1
KlattG Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions docs/04_Essentials/how-to-use-densities-for-controls-13e6f3b.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,25 +151,22 @@ var btn = new Button({

## Using Density Classes in the SAP Fiori launchpad

The SAP Fiori launchpad \(FLP\) optionally reads the supported content densities from the app descriptor \(`manifest.json`\) and - if available - sets the appropriate content density class on the `<body>` tag. On devices with mouse and touch support, the FLP also allows the desired content density to be configured by the user. To avoid situations where an application and the FLP write different content density classes, we recommend using the following logic within all applications that are intended to be used inside the FLP:
The SAP Fiori launchpad \(FLP\) optionally reads the supported content densities from the app descriptor \(`manifest.json`\) and - if available - sets the appropriate content density class on the `<body>` tag. On desktop devices, the FLP also allows the desired content density to be configured by the user. To avoid situations where an application and the FLP write different content density classes, we recommend using the following logic within all applications that are intended to be used inside the FLP:

```js

getContentDensityClass : function() {
if (this._sContentDensityClass === undefined) {
// check whether FLP has already set the content density class; do nothing in this case
if (jQuery(document.body).hasClass("sapUiSizeCozy") || jQuery(document.body).hasClass("sapUiSizeCompact")) {
this._sContentDensityClass = "";
} else {
// Store "sapUiSizeCompact" or "sapUiSizeCozy" in this._sContentDensityClass, depending on which modes are supported by the app.
// E.g. the “cozy” class in case sap.ui.Device.support.touch is “true” and “compact” otherwise.
}
}
return this._sContentDensityClass;
// if the content density class is already set, don't override it
const classList = document.body.classList;
if (classList.contains("sapUiSizeCozy") || classList.contains("sapUiSizeCompact")) {
return "";
}
// if no content density class is set, use cozy on touch devices
return Device.support.touch ? "sapUiSizeCozy" : "sapUiSizeCompact";
}
```

This function returns an empty string if the FLP has already set a content density CSS class, or the proper CSS class to be set. The result of this function should then be set as a style class on the root view of the application and all dialogs and popups.
This function checks if the content density is already set by the FLP. It returns either an empty string if the content density is already set or the proper CSS class to be set. The result of this function should then be set as a style class on the root view of the application and all dialogs and popups.



Expand Down
Loading