diff --git a/Modern Development/Service Portal Widgets/Language Selector/README.md b/Modern Development/Service Portal Widgets/Language Selector/README.md new file mode 100644 index 0000000000..7a2b385a54 --- /dev/null +++ b/Modern Development/Service Portal Widgets/Language Selector/README.md @@ -0,0 +1,24 @@ +# Language Selector with Flags + +A language selector widget for the Portal. +The user can change the instance language without having to leave the Portal. + +image +image + + +## What it does +- Displays a dropdown with flags and language names. +- Automatically updates the user's language in the `sys_user` table. +- Reloads the page to apply the new language immediately. + +## Files +- **HTML Template:** renders the dropdown with flag emojis and labels. +- **Client Script:** handles language selection and sends the PATCH request. +- **Server Script:** provides the current user ID and stored language. + +## Example +When the user selects **🇪🇸 Spanish**, the widget updates their user record and reloads the Portal in Spanish. + +## Prerequisites +- The language selected **must be installed and active** in the instance. diff --git a/Modern Development/Service Portal Widgets/Language Selector/language-selector.client.js b/Modern Development/Service Portal Widgets/Language Selector/language-selector.client.js new file mode 100644 index 0000000000..3006b117b8 --- /dev/null +++ b/Modern Development/Service Portal Widgets/Language Selector/language-selector.client.js @@ -0,0 +1,22 @@ +function($http) { + var c = this; + + c.languages = [ + { code: 'en', label: 'English', flag: '🇬🇧' }, + { code: 'pb', label: 'Portuguese (Brazil)', flag: '🇧🇷' }, + { code: 'es', label: 'Spanish', flag: '🇪🇸' }, + { code: 'fr', label: 'French', flag: '🇫🇷' }, + { code: 'de', label: 'German', flag: '🇩🇪' }, + { code: 'it', label: 'Italian', flag: '🇮🇹' } + ]; + + c.userId = c.data.user_id; + c.selected = c.data.language || 'en'; + + c.changeLang = function() { + $http.patch('/api/now/table/sys_user/' + c.userId, { preferred_language: c.selected }) + .then(function(response) { + location.reload(); + }); + }; +} diff --git a/Modern Development/Service Portal Widgets/Language Selector/language-selector.css b/Modern Development/Service Portal Widgets/Language Selector/language-selector.css new file mode 100644 index 0000000000..58d724c2f4 --- /dev/null +++ b/Modern Development/Service Portal Widgets/Language Selector/language-selector.css @@ -0,0 +1,13 @@ +.lang-selector { + display: flex; + align-items: center; + gap: 8px; +} +select, button { + padding: 6px 8px; + border-radius: 6px; + border: 1px solid #ccc; +} +button { + cursor: pointer; +} diff --git a/Modern Development/Service Portal Widgets/Language Selector/language-selector.html b/Modern Development/Service Portal Widgets/Language Selector/language-selector.html new file mode 100644 index 0000000000..5e674246e6 --- /dev/null +++ b/Modern Development/Service Portal Widgets/Language Selector/language-selector.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/Modern Development/Service Portal Widgets/Language Selector/language-selector.server.js b/Modern Development/Service Portal Widgets/Language Selector/language-selector.server.js new file mode 100644 index 0000000000..90effd0d9c --- /dev/null +++ b/Modern Development/Service Portal Widgets/Language Selector/language-selector.server.js @@ -0,0 +1,9 @@ +(function() { + var user = gs.getUser(); + data.user_id = user.getID(); + + var grUser = new GlideRecord('sys_user'); + if (grUser.get(data.user_id)) { + data.language = grUser.getValue('preferred_language') || 'en'; + } +})();