How to Get Navigator "userAgent" Property

hello, I would like to get the information contained in the Navigator userAgent Property.
I used the code provided by the w3schools.com website.
I put this one in a template node. On the screen on the dashboard of my phone for example it gives me the expected result :

Now, how can I get this response displayed and push it into the msg.payload to be processed in my flow?
Thanks for help.

(I looked at this post but I didn't understand how to do it)

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the user-agent header sent by the browser to the server.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = "User-agent header sent: " + navigator.userAgent;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

So basically you want to send data from the dashboard to the runtime. The built-in help of the ui_template node gives us an example how to do it. Basically you will need to use Angular stuff like ng-click and / or the scope object.

Try testing the following code inside an ui template node:

<script>
var value = navigator.userAgent;
this.scope.action = function() { return value; }
</script>

<md-button ng-click="send({payload:action()})">
    Send the Browser user Agent
</md-button>

If you want to send the information without clicking a button is even easier using below code inside the ui template node:

<script>
    (function(scope){ 
     var nav = navigator.userAgent;
     scope.send({payload:nav});
})(scope);
</script>
1 Like

Andrei, this is exactly what I'm looking for! :sunglasses:
To be able to show / Hide some menus depending on whether I'm on a PC or a phone.
This then allows me to display pages designed for small and large screens.
Your code works perfectly. It's a pity for me not to know the programming, but with the help of the forum and especially NR I always manage. It's TOP :boom:
Thank you.

From my phone:
image

or from my PC:
Capture d'écran Deepin_zone de sélection _20210923101418

This is usually done with CSS ...

/* Hide element on Desktop */
@media only screen and (min-width: 981px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Hide element on Tablet/Phone */
@media only screen and (max-width: 980px) {
    .hide-on-mobile-tablet {
        display: none !important;
    }
}
3 Likes

Whohh, Another solution.
Again I have to try to figure this out, can you just elaborate a little more so I can test this at home?
How to implement this in a flow, I understood the idea but with the lack of knowledge it's not obvious to make the link with NR.
This code is put in a template node and therefore in each page to display, right ?

If you set the UI template to head mode and wrap the CSS in style tags yes...

<style>
/* Hide element on Desktop */
@media only screen and (min-width: 981px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Hide element on Tablet/Phone */
@media only screen and (max-width: 980px) {
    .hide-on-mobile-tablet {
        display: none !important;
    }
}
</style>

You need to set the CSS selectors (e.g. hide-on-mobile-tablet) to target the things you want to show/hide

1 Like

Okay, I've got it.
Can I check a 2nd box for this solution :thinking: :grinning_face_with_smiling_eyes:
Gentlemen, you are amazing. This forum is a pleasure.

Mark the solution you end up using :slight_smile:

Actually, the topic asks how to get agent string so strictly speaking @Andrei answer is the correct solution

:slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.