Howard
January 23, 2019, 8:13pm
1
Hello-
Can we have some official documentation on how to use the Browser component with several action use cases as in the dmxzone app connect manual?
and how to run or not run script based on browser parameters.
I have read this This is how you could swap out images based on browser viewport width but complete documentation would be useful. If it's in the Wappler docs, i can't find it.
2 Likes
TomD
January 23, 2019, 9:37pm
2
Initially I didn’t realise the Browser component did much besides Go To URL. When I looked more closely, I could see many uses for it. I made a quick reference file containing most of the options (It’s not complete. I created it a while ago - perhaps before the current version of the components was released). Pasting this into a new file with AppConnect might be helpful.
<ul class="list-group mt-3 mb-3">
<main>
<div class="contentArea">
<p>Some of the Browser options</p>
<p dmx-show="{{browser1.userAgent.contains("iPhone")}}">I'm an iPhone!</p>
</div>
</main>
<li class="list-group-item list-group-item-primary">Browser Info</li>
<li class="list-group-item">Online: {{browser1.online}}</li>
<li class="list-group-item">Do not track: {{browser1.doNotTrack}}</li>
<li class="list-group-item">User Agent: {{browser1.userAgent}}</li>
<li class="list-group-item">Language: {{browser1.language}}</li>
<li class="list-group-item">Cookies enabled: {{browser1.cookieEnabled}}</li>
<li class="list-group-item">Referrer: {{browser1.referrer}}</li>
<li class="list-group-item">Hash: {{browser1.location.hash}}</li>
<li class="list-group-item">Host: {{browser1.location.host}}</li>
<li class="list-group-item">Host Name: {{browser1.location.hostname}}</li>
<li class="list-group-item">Href: {{browser1.location.href}}</li>
<li class="list-group-item">Origin: {{browser1.location.origin}}</li>
<li class="list-group-item">Pathname: {{browser1.location.pathname}}</li>
<li class="list-group-item">Port: {{browser1.location.port}}</li>
<li class="list-group-item">Protocol: {{browser1.location.protocol}}</li>
<li class="list-group-item">Search: {{browser1.location.search}}</li>
<li class="list-group-item">PathParts (array): {{browser1.location.pathparts[0]}}</li>
<li class="list-group-item">PathParts (array): {{browser1.location.pathparts[1]}}</li>
<li class="list-group-item">Viewport Width: {{browser1.viewport.width}}</li>
<li class="list-group-item">Viewport Height: {{browser1.viewport.height}}</li>
<li class="list-group-item">Device Pixel-ratio: {{browser1.device.pixelRatio}}</li>
<li class="list-group-item">Device Pixel-ratio: {{browser1.device.pixelRatio}}</li>
</ul>
I’ve added an example use at the beginning. You can use expressions like this in lots of situations. To provide complete documentation on every expression, in combination with formatters and all possible uses, would be an immense task (and not really very useful).
15 Likes
TomD
January 5, 2020, 9:00am
3
Here’s an updated list with a few more options and examples:
<ul class="list-group mt-4 mb-3">
<main>
<div class="contentArea">
<p><b>Browser component options</b></p>
<p dmx-show="{{browser1.userAgent.contains("iPhone")}}">I'm an iPhone!</p>
</div>
</main>
<li class="list-group-item list-group-item-primary">Browser Info</li>
<li class="list-group-item">Online: {{browser1.online}}</li>
<li class="list-group-item">Do not track: {{browser1.doNotTrack}}</li>
<li class="list-group-item">User Agent: {{browser1.userAgent}}</li>
<li class="list-group-item">Language: {{browser1.language}}</li>
<li class="list-group-item">Cookies enabled: {{browser1.cookieEnabled}}</li>
<li class="list-group-item">Referrer: {{browser1.referrer}}</li>
<li class="list-group-item list-group-item-primary">Location: </li>
<li class="list-group-item">Hash: {{browser1.location.hash}}</li>
<li class="list-group-item">Host: {{browser1.location.host}}</li>
<li class="list-group-item">Host Name: {{browser1.location.hostname}}</li>
<li class="list-group-item">Href: {{browser1.location.href}}</li>
<li class="list-group-item">Origin: {{browser1.location.origin}}</li>
<li class="list-group-item">Pathname: {{browser1.location.pathname}}</li>
<li class="list-group-item">Port: {{browser1.location.port}}</li>
<li class="list-group-item">Protocol: {{browser1.location.protocol}}</li>
<li class="list-group-item">Search: {{browser1.location.search}}</li>
<li class="list-group-item"><i>PathParts (array) examples -</i></li>
<li class="list-group-item">PathParts 1: {{browser1.location.pathparts[0]}}</li>
<li class="list-group-item">PathParts 2: {{browser1.location.pathparts[1]}}</li>
<li class="list-group-item">PathParts 3:</li>
<li class="list-group-item">PathParts - count: {{browser1.location.pathparts.count()}}</li>
<li class="list-group-item">PathParts - last: {{browser1.location.pathparts.last(1)}}</li>
<li class="list-group-item">PathParts - join: {{browser1.location.pathparts.join("|")}}</li>
<li class="list-group-item">PathParts - slice: {{browser1.location.pathparts.slice(1, 3)}}</li>
<li class="list-group-item">PathParts - reverse: {{browser1.location.pathparts.reverse()}}</li>
<li class="list-group-item">PathParts - reverse,last: {{browser1.location.pathparts.reverse().last(1)}}</li>
<li class="list-group-item">PathParts - top, 1: {{browser1.location.pathparts.reverse().top(1)}}</li>
<li class="list-group-item list-group-item-primary">ScrollX: </li>
<li class="list-group-item">Offset: {{browser1.scrollX.offset}}</li>
<li class="list-group-item">direction: {{browser1.scrollX.direction}}</li>
<li class="list-group-item">Position: {{browser1.scrollX.position}}</li>
<li class="list-group-item list-group-item-primary">ScrollY: </li>
<li class="list-group-item">Offset: {{browser1.scrollY.offset}}</li>
<li class="list-group-item">direction: {{browser1.scrollY.direction}}</li>
<li class="list-group-item">Position: {{browser1.scrollY.position}}</li>
<li class="list-group-item list-group-item-primary">Viewport: </li>
<li class="list-group-item">Viewport Width: {{browser1.viewport.width}}</li>
<li class="list-group-item">Viewport Height: {{browser1.viewport.height}}</li>
<li class="list-group-item list-group-item-primary">Device: </li>
<li class="list-group-item">Width: {{browser1.device.width}}</li>
<li class="list-group-item">Height: {{browser1.device.height}}</li>
<li class="list-group-item">Pixel-ratio: {{browser1.device.pixelRatio}}</li>
<li class="list-group-item">Orientation: {{browser1.device.orientation}}</li>
<li class="list-group-item list-group-item-primary">Document: </li>
<li class="list-group-item">Width: {{browser1.document.width}}</li>
<li class="list-group-item">Height: {{browser1.document.height}}</li>
<li class="list-group-item">Hidden: {{browser1.document.hidden}}</li>
<li class="list-group-item">Visibility: {{browser1.document.visibility}}</li>
</ul>
14 Likes
Thanks Tom for the awesome example reference list! We definitely need more of these to uncover the power and ease of use inside the Wappler treasure chest!
1 Like
Add these to the end
<li class="list-group-item list-group-item-primary">Document: </li>
<li class="list-group-item">Width: {{browser1.document.width}}</li>
<li class="list-group-item">Height: {{browser1.document.height}}</li>
<li class="list-group-item">Hidden: {{browser1.document.hidden}}</li>
<li class="list-group-item">Visibility: {{browser1.document.visibility}}</li>
2 Likes
TomD
April 16, 2020, 8:24am
6
Thanks. I wonder if I missed these options or if they were added later. I tried to edit the list above but don’t seem to be able to.
3 Likes
Akayy
April 30, 2020, 9:19am
7
I’m looking into using the recently added dynamic events of the browser component - Wappler 2.6.4 Released
From v2.6.4 release log, for your reference!
App Connect Browser Control 2.1.0
Implemented Dynamic Events for Scroll, Resize, Online, Offline, Pop State, Visibility Change and Orientation Change of the user browser, so you can run any actions or App Connect Flows when those events change. You can even specify debounce so that your actions doesn’t run too often and after certain amount of time.
Akayy
April 30, 2020, 9:46am
8
@George , thanks for implementing the dynamic events for browser component.
Are you able to clarify what triggers the online and offline events? And are they related to the browser's document.visibility?
My page connects & consumes web socket updates (javascript) and I'm experiencing what @patrick advised in the other thread , where my page stops consuming the socket updates when my display sleeps (when I go to bed).
Basically, when my display wakes up (when I wake up & click my trackpad), I want my page to trigger a reconnection attempt to connect to the socket and go-live. Is this trigger possible with the online event of the browser component (added to my page)? Thanks in advance!
Akayy
April 30, 2020, 9:57am
10
Teodor:
Window: online event
Sweet, thank Teodor! This should work for my use case. Cheers!
Thank you gentlemen. So simple - but valuable…