Skip to content

Commit 025780d

Browse files
dobromiraboychevadobromiraboycheva
authored
chore(ui5-user-menu): update the sample for the language and region (#12711)
1 parent d006cd6 commit 025780d

File tree

8 files changed

+507
-144
lines changed

8 files changed

+507
-144
lines changed

‎packages/fiori/test/pages/UserSettingsDialog.html‎

Lines changed: 156 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -79,41 +79,117 @@
7979
</ui5-user-settings-view>
8080
</ui5-user-settings-item>
8181

82-
<ui5-user-settings-item text="Language & Region" tooltip="Language & Region" header-text="Language & Region">
82+
<ui5-user-settings-item text="Language and Region" tooltip="Language and Region" header-text="Language and Region">
8383
<ui5-user-settings-view>
84-
<div class="container">
85-
<div class="lr-item">
86-
<ui5-label>Language and Region:</ui5-label>
87-
<ui5-combobox placeholder="Language">
88-
<ui5-cb-item text="Browse Language" selected></ui5-cb-item>
89-
<ui5-cb-item text="English"></ui5-cb-item>
90-
<ui5-cb-item text="European Spanish"></ui5-cb-item>
91-
<ui5-cb-item text="French (France)"></ui5-cb-item>
92-
<ui5-cb-item text="Germany"></ui5-cb-item>
84+
<div id="language-region-container" class="language-region-container">
85+
<ui5-label class="language-region-label">Display Language:</ui5-label>
86+
<ui5-combobox id="language" class="language-region-control" placeholder="Language" value="English (United States)">
87+
<ui5-cb-item text="Browser Language" selected additional-text="English"></ui5-cb-item>
88+
<ui5-cb-item text="English (United Kingdom)" additional-text="English (United Kingdom)"></ui5-cb-item>
89+
<ui5-cb-item text="English (United States)" additional-text="English (United States)"></ui5-cb-item>
90+
<ui5-cb-item text="French (France)" additional-text="Français (France)"></ui5-cb-item>
91+
<ui5-cb-item text="French (Canada)" additional-text="Français (Canada)"></ui5-cb-item>
92+
<ui5-cb-item text="German (Germany)" additional-text="Deutsch (Deutschland)"></ui5-cb-item>
93+
<ui5-cb-item text="German (Switzerland)" additional-text="Deutsch (Schweiz)"></ui5-cb-item>
94+
<ui5-cb-item text="Japanese" additional-text="日本語 (日本)"></ui5-cb-item>
95+
<ui5-cb-item text="Portuguese (Brazil)" additional-text="Português (Brasil)" ></ui5-cb-item>
96+
<ui5-cb-item text="Simplified Chinese (China)" additional-text="简体中文（中国)"></ui5-cb-item>
97+
<ui5-cb-item text="Spanish (Mexico)" additional-text="Español (América Latina)"></ui5-cb-item>
98+
<ui5-cb-item text="Spanish (Spain)" additional-text="Español (España)"></ui5-cb-item>
99+
</ui5-combobox>
100+
<ui5-label class="language-region-label">Region:</ui5-label>
101+
<ui5-combobox id="region" class="language-region-control" placeholder="Region" value="United States">
102+
<ui5-cb-item text="United Kingdom" additional-text="GB"></ui5-cb-item>
103+
<ui5-cb-item text="United States" additional-text="US"></ui5-cb-item>
104+
<ui5-cb-item text="French (France)" additional-text="FR"></ui5-cb-item>
105+
<ui5-cb-item text="French (Canada)" additional-text="CA"></ui5-cb-item>
106+
<ui5-cb-item text="German (Germany)" additional-text="DE"></ui5-cb-item>
107+
<ui5-cb-item text="German (Switzerland)" additional-text="CH" ></ui5-cb-item>
108+
<ui5-cb-item text="Japanese" additional-text="JP"></ui5-cb-item>
109+
<ui5-cb-item text="Portuguese (Brazil)" additional-text="BR"></ui5-cb-item>
110+
<ui5-cb-item text="Simplified Chinese (China)" additional-text="CN"></ui5-cb-item>
111+
<ui5-cb-item text="Spanish (Mexico)" additional-text="MX"></ui5-cb-item>
112+
<ui5-cb-item text="Spanish (Spain)" additional-text="ES"></ui5-cb-item>
113+
</ui5-combobox>
114+
<ui5-label class="language-region-label">Date Format:</ui5-label>
115+
<ui5-combobox id="dateFormat" class="language-region-control" placeholder="Date Format" value="MM.DD.YYYY">
116+
<ui5-cb-item text="MM/DD/YYYY" additional-text="e.g. 10/23/2025"></ui5-cb-item>
117+
<ui5-cb-item text="MM.DD.YYYY" additional-text="e.g. 10.23.2025"></ui5-cb-item>
118+
<ui5-cb-item text="MM-DD-YYYY" additional-text="e.g. 10-23-2025"></ui5-cb-item>
119+
<ui5-cb-item text="DD/MM/YYYY" additional-text="e.g. 23/10/2025"></ui5-cb-item>
120+
<ui5-cb-item text="DD.MM.YYYY" additional-text="e.g. 23.10.2025"></ui5-cb-item>
121+
<ui5-cb-item text="DD-MM-YYYY" additional-text="e.g. 23-10-2025"></ui5-cb-item>
122+
<ui5-cb-item text="YYYY/MM/DD" additional-text="e.g. 2025/10/23"></ui5-cb-item>
123+
<ui5-cb-item text="YYYY.MM.DD" additional-text="e.g. 2025.10.23"></ui5-cb-item>
124+
<ui5-cb-item text="YYYY-MM-DD" additional-text="e.g. 2025-10-23"></ui5-cb-item>
125+
</ui5-combobox>
126+
<ui5-label class="language-region-label">Time Format:</ui5-label>
127+
<ui5-combobox id="timeFormat" class="language-region-control" placeholder="Time Format" value="12 Hour">
128+
<ui5-cb-item text="24 Hour" additional-text="e.g. 12:05:10"></ui5-cb-item>
129+
<ui5-cb-item text="12 Hour" additional-text="e.g. 12:05:10 PM"></ui5-cb-item>
130+
<ui5-cb-item text="12 Hour (lowercase)" additional-text="e.g. 12:05:10 pm"></ui5-cb-item>
131+
<ui5-cb-item text="Hours from 0 to 11" additional-text="e.g. 00:05:10 PM"></ui5-cb-item>
132+
<ui5-cb-item text="Hours from 0 to 11 (lowercase)" additional-text="e.g. 00:05:10 pm"></ui5-cb-item>
133+
</ui5-combobox>
134+
<ui5-label class="language-region-label">Time Zone:</ui5-label>
135+
<ui5-combobox id="timeZone" class="language-region-control" placeholder="Time Zone" value="Eastern Standard Time (UTC -05:00)">
136+
<ui5-cb-item text="Pacific Time (UTC -08:00)" additional-text="Sacramento, United States"></ui5-cb-item>
137+
<ui5-cb-item text="Mountain Time (UTC -07:00)" additional-text="Denver, United States"></ui5-cb-item>
138+
<ui5-cb-item text="Central Time (UTC -06:00)" additional-text="Austin, United States"></ui5-cb-item>
139+
<ui5-cb-item text="Eastern Standard Time (UTC -05:00)" additional-text="Washington, United States"></ui5-cb-item>
140+
<ui5-cb-item text="Atlantic Time (UTC -04:00)" additional-text="Halifax, Canada"></ui5-cb-item>
141+
<ui5-cb-item text="Newfoundland Time (UTC -03:30)" additional-text="St. John's, Canada"></ui5-cb-item>
142+
<ui5-cb-item text="Brasilia Time (UTC -03:00)" additional-text="Brasília, Brazil"></ui5-cb-item>
143+
<ui5-cb-item text="Argentina Time (UTC -03:00)" additional-text="Buenos Aires, Argentina"></ui5-cb-item>
144+
<ui5-cb-item text="Greenwich Mean Time (UTC +00:00)" additional-text="London, United Kingdom"></ui5-cb-item>
145+
<ui5-cb-item text="Central European Time (UTC +01:00)" additional-text="Berlin, Germany"></ui5-cb-item>
146+
<ui5-cb-item text="Eastern European Time (UTC +02:00)" additional-text="Athens, Greece"></ui5-cb-item>
147+
<ui5-cb-item text="Turkey Time (UTC +03:00)" additional-text="Ankara, Türkiye"></ui5-cb-item>
148+
<ui5-cb-item text="Arabian Time (UTC +04:00)" additional-text="Abu Dhabi, United Arab Emirates"></ui5-cb-item>
149+
<ui5-cb-item text="Pakistan Standard Time (UTC +05:00)" additional-text="Islamabad, Pakistan"></ui5-cb-item>
150+
<ui5-cb-item text="India Standard Time (UTC +05:30)" additional-text="New Delhi, India"></ui5-cb-item>
151+
<ui5-cb-item text="Bangladesh Standard Time (UTC +06:00)" additional-text="Dhaka, Bangladesh"></ui5-cb-item>
152+
<ui5-cb-item text="Indochina Time (UTC +07:00)" additional-text="Bangkok, Thailand"></ui5-cb-item>
153+
<ui5-cb-item text="China Standard Time (UTC +08:00)" additional-text="Beijing, China"></ui5-cb-item>
154+
<ui5-cb-item text="Singapore Time (UTC +08:00)" additional-text="Singapore, Singapore"></ui5-cb-item>
155+
<ui5-cb-item text="Hong Kong Time (UTC +08:00)" additional-text="Hong Kong, China"></ui5-cb-item>
156+
<ui5-cb-item text="Japan Standard Time (UTC +09:00)" additional-text="Tokyo, Japan"></ui5-cb-item>
157+
<ui5-cb-item text="Korea Standard Time (UTC +09:00)" additional-text="Seoul, South Korea"></ui5-cb-item>
158+
<ui5-cb-item text="Australian Eastern Time (UTC +10:00)" additional-text="Canberra, Australia"></ui5-cb-item>
159+
<ui5-cb-item text="New Zealand Time (UTC +12:00)" additional-text="Wellington, New Zealand"></ui5-cb-item>
160+
</ui5-combobox>
161+
<ui5-label class="language-region-label">Currency:</ui5-label>
162+
<ui5-combobox id="currency" class="language-region-control" placeholder="Currency" value="USD - United States Dollar">
163+
<ui5-cb-item text="USD - United States Dollar" additional-text="USD" value="USD"></ui5-cb-item>
164+
<ui5-cb-item text="Euro" additional-text="EUR"></ui5-cb-item>
165+
<ui5-cb-item text="British Pound" additional-text="GBP"></ui5-cb-item>
166+
<ui5-cb-item text="Japanese Yen" additional-text="JPY"></ui5-cb-item>
167+
<ui5-cb-item text="Swiss Franc" additional-text="CHF"></ui5-cb-item>
168+
<ui5-cb-item text="Canadian Dollar" additional-text="CAD"></ui5-cb-item>
169+
<ui5-cb-item text="Australian Dollar" additional-text="AUD"></ui5-cb-item>
170+
<ui5-cb-item text="New Zealand Dollar" additional-text="NZD"></ui5-cb-item>
171+
<ui5-cb-item text="Chinese Yuan Renminbi" additional-text="CNY"></ui5-cb-item>
172+
<ui5-cb-item text="Indian Rupee" additional-text="INR"></ui5-cb-item>
173+
<ui5-cb-item text="Brazilian Real" additional-text="BRL"></ui5-cb-item>
174+
<ui5-cb-item text="South African Rand" additional-text="ZAR"></ui5-cb-item>
175+
<ui5-cb-item text="Russian Ruble" additional-text="RUB"></ui5-cb-item>
176+
<ui5-cb-item text="Mexican Peso" additional-text="MXN"></ui5-cb-item>
177+
<ui5-cb-item text="Singapore Dollar" additional-text="SGD"></ui5-cb-item>
178+
<ui5-cb-item text="Hong Kong Dollar" additional-text="HKD"></ui5-cb-item>
179+
<ui5-cb-item text="Norwegian Krone" additional-text="NOK"></ui5-cb-item>
180+
<ui5-cb-item text="Swedish Krona" additional-text="SEK"></ui5-cb-item>
181+
<ui5-cb-item text="South Korean Won" additional-text="KRW"></ui5-cb-item>
182+
<ui5-cb-item text="Turkish Lira" additional-text="TRY"></ui5-cb-item>
183+
</ui5-combobox>
184+
<ui5-label class="language-region-label">Number Format:</ui5-label>
185+
<ui5-combobox id="numberFormat" class="language-region-control" placeholder="Number Format" value="1,234.56">
186+
<ui5-cb-item text="1.234,56" additional-text="Germany"></ui5-cb-item>
187+
<ui5-cb-item text="1,234.56" additional-text="US/UK"></ui5-cb-item>
188+
<ui5-cb-item text="1 234,56" additional-text="France"></ui5-cb-item>
189+
<ui5-cb-item text="1'234.56" additional-text="Switzerland"></ui5-cb-item>
190+
<ui5-cb-item text="1234,56" additional-text="SI/SO Format"></ui5-cb-item>
93191
</ui5-combobox>
94192
</div>
95-
<div class="lr-item">
96-
<ui5-label for="format">Date Format:</ui5-label>
97-
<ui5-text id="format">MMM d, y</ui5-text>
98-
</div>
99-
</div>
100-
<ui5-panel fixed>
101-
<ui5-label>
102-
The time zone will not be applied in UI5 apps.
103-
If you don't know the type of an app, you can check it in the "About" dialog in the "ID of the Application Framework” field.
104-
</ui5-label>
105-
</ui5-panel>
106-
</br>
107-
<div class="lt-time-format">
108-
<ui5-label for="timeFormat">Time Format:</ui5-label>
109-
<ui5-radio-button name="timeFormat" text="12h"></ui5-radio-button>
110-
<ui5-radio-button checked name="timeFormat" text="24h"></ui5-radio-button>
111-
</div>
112-
<ui5-panel fixed>
113-
<ui5-label>
114-
After you save your settings, the browser will refresh for the new settings to take effect.
115-
</ui5-label>
116-
</ui5-panel>
117193
</ui5-user-settings-view>
118194
</ui5-user-settings-item>
119195

@@ -391,6 +467,22 @@
391467
</ui5-user-settings-item>
392468
</ui5-user-settings-dialog>
393469

470+
<ui5-dialog id="additionalDialog" state="Information" header-text="Change Display Language">
471+
<ui5-text>Changing the display language to [New Language] will update the language across the user interface.</ui5-text>
472+
<ui5-toolbar slot="footer">
473+
<ui5-toolbar-button
474+
class="dialogCloser"
475+
design="Emphasized"
476+
text="Change Language">
477+
</ui5-toolbar-button>
478+
<ui5-toolbar-button
479+
class="dialogCloser"
480+
design="Transparent"
481+
text="Cancel">
482+
</ui5-toolbar-button>
483+
</ui5-toolbar>
484+
</ui5-dialog>
485+
394486
<ui5-title level="H5" class="header-title">Text Direction</ui5-title>
395487
<ui5-switch id="direction" text-on="RTL" text-off="LTR"></ui5-switch>
396488
<script>
@@ -400,11 +492,18 @@
400492
const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")];
401493
const account = document.getElementById("account");
402494

495+
//Language and Region
496+
const languageRegion = document.getElementById("language-region-container");
497+
const language = document.getElementById("language");
498+
const regionSettings = [...languageRegion.querySelectorAll(".language-region-control")];
499+
const additionalDialog = document.getElementById("additionalDialog");
500+
const dialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")];
501+
502+
403503
const mobileSecondPage = document.getElementById("mobile-second-page");
404504
const mobile1Button = document.getElementById("mobile1-button");
405505
const mobile2Button = document.getElementById("mobile2-button");
406506

407-
const additionalDialog = document.getElementById("additionalDialog");
408507
const resetAll = document.getElementById("resetAll");
409508
const resetPersonalization = document.getElementById("resetPersonalization");
410509
const toast = [...document.getElementsByTagName("ui5-toast")][0];
@@ -446,6 +545,24 @@
446545
console.log("Manage account clicked");
447546
});
448547

548+
549+
//Language and Region
550+
language.addEventListener("selection-change", function (event) {
551+
additionalDialog.open = true;
552+
});
553+
554+
dialogClosers.forEach(btn => {
555+
btn.addEventListener("click", () => {
556+
additionalDialog.open = false;
557+
});
558+
});
559+
560+
regionSettings.forEach((settingsItem) => {
561+
settingsItem.addEventListener("selection-change", function (event) {
562+
console.log(`Selection change: ${event?.detail.item?.text}`, event.detail);
563+
});
564+
});
565+
449566
direction.addEventListener("ui5-change", function() {
450567
document.body.setAttribute("dir", direction.checked ? "rtl" : "ltr");
451568
window["sap-ui-webcomponents-bundle"].applyDirection();
@@ -464,7 +581,7 @@
464581
mobileSecondPage.selected = true;
465582
mobileSecondPage.text = "Android";
466583
});
467-
584+
468585
themeSave.addEventListener("click", function () {
469586
toast.open = true;
470587
});
@@ -479,12 +596,12 @@
479596

480597
settingsDialog.addEventListener("selection-change", function (event) {
481598
console.log(`Selection change: ${event.detail.item?.text}`, event.detail);
482-
if(event.detail.item?.text ==="Language & Region"){
599+
if(event.detail.item?.text ==="Language and Region"){
483600
event.detail.item.loading=true;
484601
event.detail.item.loadingReason="Language & Region loading data...";
485602
setTimeout(function(){
486603
event.detail.item.loading=false;
487-
}, 3000);
604+
}, 500);
488605
}
489606
});
490607

@@ -509,6 +626,9 @@
509626
console.log("Settings dialog closed", event);
510627
});
511628

629+
//Language and Region
630+
631+
512632
//Notification Tab
513633
notificationNavIcon.forEach(icon => {
514634
icon.addEventListener("click", (e) => {

‎packages/fiori/test/pages/styles/UserSettingsDialog.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,26 @@
99
margin: 3rem;
1010
}
1111

12+
.language-region-container{
13+
display: flex;
14+
min-height: 2.5rem;
15+
align-item:flex-start;
16+
flex-direction: column;
17+
gap: 0.563rem;
18+
}
19+
20+
.language-region-label{
21+
display: flex;
22+
flex: 1 0 0;
23+
width: 100%;
24+
}
25+
26+
.language-region-control{
27+
display: flex;
28+
gap: 0.188rem;
29+
width: 100%;
30+
}
31+
1232
.ua-info-item{
1333
display: grid;
1434
grid-template-columns: 50px 1fr;

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,23 @@
3838
align-items: center;
3939
margin: 0 1rem 0 1rem;
4040
}
41+
42+
.language-region-container{
43+
display: flex;
44+
min-height: 2.5rem;
45+
align-item:flex-start;
46+
flex-direction: column;
47+
gap: 0.563rem;
48+
}
49+
50+
.language-region-label{
51+
display: flex;
52+
flex: 1 0 0;
53+
width: 100%;
54+
}
55+
56+
.language-region-control{
57+
display: flex;
58+
gap: 0.188rem;
59+
width: 100%;
60+
}

‎packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,17 @@ const settingsDialog = document.getElementById("settings");
3838
const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")];
3939
const account = document.getElementById("account");
4040
const resetAllButton = document.getElementById("reset-all-button");
41+
//Language and Region
42+
const languageRegion = document.getElementById("language-region-container");
43+
const language = document.getElementById("language");
44+
const regionSettings = [...languageRegion.querySelectorAll(".language-region-control")];
45+
const additionalDialog = document.getElementById("additionalDialog");
46+
const dialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")];
47+
4148
const mobileSecondPage = document.getElementById("mobile-second-page");
4249
const mobile1Button = document.getElementById("mobile1-button");
4350
const mobile2Button = document.getElementById("mobile2-button");
44-
const additionalDialog = document.getElementById("additionalDialog");
45-
const additionalDialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")];
51+
4652
const resetAll = document.getElementById("resetAll");
4753
const resetPersonalization = document.getElementById("resetPersonalization");
4854
const toast = [...document.getElementsByTagName("ui5-toast")][0];
@@ -83,6 +89,23 @@ resetAllButton.addEventListener("click", function () {
8389
additionalDialog.open = true;
8490
});
8591

92+
//Language and Region
93+
language.addEventListener("selection-change", function (event) {
94+
additionalDialog.open = true;
95+
});
96+
97+
dialogClosers.forEach(btn => {
98+
btn.addEventListener("click", () => {
99+
additionalDialog.open = false;
100+
});
101+
});
102+
103+
regionSettings.forEach((settingsItem) => {
104+
settingsItem.addEventListener("selection-change", function (event) {
105+
console.log(`Selection change: ${event?.detail.item?.text}`, event.detail);
106+
});
107+
});
108+
86109
mobile1Button.addEventListener("click", function () {
87110
mobileSecondPage.selected = true;
88111
mobileSecondPage.text = "iOS";
@@ -93,11 +116,6 @@ mobile2Button.addEventListener("click", function () {
93116
mobileSecondPage.text = "Android";
94117
});
95118

96-
additionalDialogClosers.forEach(btn => {
97-
btn.addEventListener("click", () => {
98-
additionalDialog.open = false;
99-
});
100-
})
101119

102120
themeSave.addEventListener("click", function () {
103121
toast.open = true;
@@ -113,12 +131,12 @@ resetAll.addEventListener("click", function () {
113131

114132
settingsDialog.addEventListener("selection-change", function (event) {
115133
console.log(`Selection change: ${event.detail.item.text}`, event.detail);
116-
if(event.detail.item.text ==="Language & Region"){
134+
if(event.detail.item.text ==="Language and Region"){
117135
event.detail.item.loading=true;
118136
event.detail.item.loadingReason="Language & Region loading data...";
119137
setTimeout(function(){
120138
event.detail.item.loading=false;
121-
}, 3000);
139+
}, 500);
122140
}
123141
});
124142

0 commit comments

Comments
 (0)