Hi All,
Can anyone point me in the direction of, or, does anyone have a table of possible values for the above column?
BrowserName, DeviceBrand, DeviceName, DeviceType, OSName specifically…
Assume this would be helpful to others too?
Use JavaScript column and paste this code there… then you can pick any value you need:
const info = {
// Browser
browserName: (() => {
const ua = navigator.userAgent;
if (/Edg\//.test(ua)) return "Microsoft Edge";
if (/OPR\//.test(ua)) return "Opera";
if (/Chrome\//.test(ua) && !/Edg|OPR/.test(ua)) return "Google Chrome";
if (/Firefox\//.test(ua)) return "Mozilla Firefox";
if (/Safari\//.test(ua) && !/Chrome|Chromium|Edg|OPR/.test(ua)) return "Safari";
return "Unknown";
})(),
// Device Type
deviceType: (() => {
const ua = navigator.userAgent;
if (/Tablet|iPad/.test(ua)) return "Tablet";
if (/Mobi|Android|iPhone|iPod/.test(ua)) return "Mobile";
return "Desktop";
})(),
// Operating System
operatingSystem: (() => {
const ua = navigator.userAgent;
if (/Windows NT/.test(ua)) return "Windows";
if (/Mac OS X/.test(ua) && !/iPhone|iPad/.test(ua)) return "macOS";
if (/Android/.test(ua)) return "Android";
if (/iPhone|iPad|iPod/.test(ua)) return "iOS";
if (/Linux/.test(ua)) return "Linux";
if (/CrOS/.test(ua)) return "ChromeOS";
return "Unknown";
})(),
// Navigator
userAgent: navigator.userAgent,
platform: navigator.platform,
vendor: navigator.vendor,
appName: navigator.appName,
appVersion: navigator.appVersion,
appCodeName: navigator.appCodeName,
product: navigator.product,
productSub: navigator.productSub,
language: navigator.language,
languages: navigator.languages,
cookieEnabled: navigator.cookieEnabled,
online: navigator.onLine,
doNotTrack: navigator.doNotTrack,
pdfViewerEnabled: navigator.pdfViewerEnabled,
webdriver: navigator.webdriver,
hardwareConcurrency: navigator.hardwareConcurrency,
deviceMemory: navigator.deviceMemory,
maxTouchPoints: navigator.maxTouchPoints,
// Screen
screen: {
width: screen.width,
height: screen.height,
availWidth: screen.availWidth,
availHeight: screen.availHeight,
colorDepth: screen.colorDepth,
pixelDepth: screen.pixelDepth,
orientation: screen.orientation?.type,
orientationAngle: screen.orientation?.angle,
devicePixelRatio: window.devicePixelRatio
},
// Window
window: {
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
outerWidth: window.outerWidth,
outerHeight: window.outerHeight,
screenX: window.screenX,
screenY: window.screenY,
scrollX: window.scrollX,
scrollY: window.scrollY
},
// Time
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
timezoneOffset: new Date().getTimezoneOffset(),
// Location
location: {
href: location.href,
origin: location.origin,
protocol: location.protocol,
hostname: location.hostname,
port: location.port,
pathname: location.pathname,
search: location.search,
hash: location.hash
},
// Feature Support
features: {
bluetooth: "bluetooth" in navigator,
clipboard: "clipboard" in navigator,
geolocation: "geolocation" in navigator,
serviceWorker: "serviceWorker" in navigator,
mediaDevices: "mediaDevices" in navigator,
usb: "usb" in navigator,
serial: "serial" in navigator,
hid: "hid" in navigator,
gpu: "gpu" in navigator,
share: "share" in navigator,
vibrate: "vibrate" in navigator
},
// Preferences
preferences: {
darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
highContrast: window.matchMedia("(prefers-contrast: more)").matches,
colorGamut:
window.matchMedia("(color-gamut: rec2020)").matches ? "rec2020" :
window.matchMedia("(color-gamut: p3)").matches ? "p3" :
window.matchMedia("(color-gamut: srgb)").matches ? "srgb" :
"unknown"
}
};
return JSON.stringify(info, null, 4);
I’m struggling to implement this. I’m assuming I should create a text field and pick as the p1 field in the Java column?
maybe you copy it wrong:
const info = {
// Browser
browserName: (() => {
const ua = navigator.userAgent;
if (/Edg\//.test(ua)) return "Microsoft Edge”;
if (/OPR\//.test(ua)) return “Opera”;
if (/Chrome\//.test(ua) && !/Edg|OPR/.test(ua)) return "Google Chrome”;
if (/Firefox\//.test(ua)) return "Mozilla Firefox”;
if (/Safari\//.test(ua) && !/Chrome|Chromium|Edg|OPR/.test(ua)) return “Safari”;
return “Unknown”;
})(),
// Device Type
deviceType: (() => {
const ua = navigator.userAgent;
if (/Tablet|iPad/.test(ua)) return “Tablet”;
if (/Mobi|Android|iPhone|iPod/.test(ua)) return “Mobile”;
return “Desktop”;
})(),
// Operating System
operatingSystem: (() => {
const ua = navigator.userAgent;
if (/Windows NT/.test(ua)) return “Windows”;
if (/Mac OS X/.test(ua) && !/iPhone|iPad/.test(ua)) return “macOS”;
if (/Android/.test(ua)) return “Android”;
if (/iPhone|iPad|iPod/.test(ua)) return “iOS”;
if (/Linux/.test(ua)) return “Linux”;
if (/CrOS/.test(ua)) return “ChromeOS”;
return “Unknown”;
})(),
// Navigator
userAgent: navigator.userAgent,
platform: navigator.platform,
vendor: navigator.vendor,
appName: navigator.appName,
appVersion: navigator.appVersion,
appCodeName: navigator.appCodeName,
product: navigator.product,
productSub: navigator.productSub,
language: navigator.language,
languages: navigator.languages,
cookieEnabled: navigator.cookieEnabled,
online: navigator.onLine,
doNotTrack: navigator.doNotTrack,
pdfViewerEnabled: navigator.pdfViewerEnabled,
webdriver: navigator.webdriver,
hardwareConcurrency: navigator.hardwareConcurrency,
deviceMemory: navigator.deviceMemory,
maxTouchPoints: navigator.maxTouchPoints,
// Screen
screen: {
width: screen.width,
height: screen.height,
availWidth: screen.availWidth,
availHeight: screen.availHeight,
colorDepth: screen.colorDepth,
pixelDepth: screen.pixelDepth,
orientation: screen.orientation?.type,
orientationAngle: screen.orientation?.angle,
devicePixelRatio: window.devicePixelRatio
},
// Window
window: {
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
outerWidth: window.outerWidth,
outerHeight: window.outerHeight,
screenX: window.screenX,
screenY: window.screenY,
scrollX: window.scrollX,
scrollY: window.scrollY
},
// Time
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
timezoneOffset: new Date().getTimezoneOffset(),
// Location
location: {
href: location.href,
origin: location.origin,
protocol: location.protocol,
hostname: location.hostname,
port: location.port,
pathname: location.pathname,
search: location.search,
hash: location.hash
},
// Feature Support
features: {
bluetooth: "bluetooth" in navigator,
clipboard: "clipboard" in navigator,
geolocation: "geolocation" in navigator,
serviceWorker: "serviceWorker" in navigator,
mediaDevices: "mediaDevices" in navigator,
usb: "usb" in navigator,
serial: "serial" in navigator,
hid: "hid" in navigator,
gpu: "gpu" in navigator,
share: "share" in navigator,
vibrate: "vibrate" in navigator
},
// Preferences
preferences: {
darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches,
highContrast: window.matchMedia("(prefers-contrast: more)").matches,
colorGamut:
window.matchMedia("(color-gamut: rec2020)").matches ? "rec2020” :
window.matchMedia("(color-gamut: p3)").matches ? "p3” :
window.matchMedia("(color-gamut: srgb)").matches ? "srgb” :
“unknown”
}
};
return JSON.stringify(info, null, 4);
type or paste code here
when you click reload, is still there?
Sorry, I think it IS working (even with the error).
I didn’t double click the field to review the content, which does indeed show me all of the variables I could need, for the device I’m currently on - But that’s not what I’m after unfortunately, although I think you have it solved for me anyway!
I just needed to know the possible values so that I could use them without having to go to every device to find out what they were. You have listed them in your script so I’ll just extract from there 
I should add that the code is an awesome bit of compressing of all the columns though! Would I just do a ‘contains’ visibility condition for example to interrogate the content of that field?
P.S. I did just hit the copy button within the script pane in your first post btw - Hope I know how to copy and paste! 
Sometimes when you copy from Glide UI, it is getting extra markup symbols, that can break the code.
You can use JavaScript column to extract just the specific info that you need, and then do if else condition in the same code.
Tell me what are you trying to do, i can suggest better solutions.
Think I get you on ITF, will check later.
Recent use case was that I wanted to add some hint text about ‘ctrl+clicking’ to select individual, multiple files when uploading pics to an event. I wanted to switch to ‘cmd+clicking’ via an OS check.
I’m managing this requirement by just assuming that users with a physical keyboard would be “Windows” or “macOS” (I changed from “MacOS” > “macOS” just in case after a bit of research). I can’t actually test this easily personally so I was looking for a definitive list of the what the values could be to save me having to line up a load of testing on diff devices, browsers, etc.
Yes, i test copying from here and it is not always good… the first code works if you copy it using that icon, otherwise it will break.
OK, since it took me a few steps to get my head around your work, I thought it would be worth showing the steps to implement for a visibility condition + the results in case others find this post.
-
Create a JavaScript column, and copy/paste the script into the ‘JavaScript code’ field. Other fields can remain empty.
-
You might just see an open curly bracket. Double click the field to see it’s contents.
-
Add a visibility condition to your components. In my case, 2 text components. I suggest copying and pasting the element you are inspecting directly from the JavaScript columns result, as per the above image.
-
The result, as far as I can personally test right now.
I’ll obvs be cleaning up my app now to replace the existing 3 columns I’m using with just this one, and expanding to include other UX nuances that will be much easier now with this! 
Many thanks again @Code_X for providing this great bit of scripting!
from what i see, you can replace all your columns with just this one JS column:
const isMac = navigator.userAgentData? navigator.userAgentData.platform === "macOS": /Mac/.test(navigator.platform);
return isMac ? "Use control + click to select individual, multiple images before drag and drop" : "";