Browser Component-Can we have detailed documentation?

Wappler General How To
#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?

Using the Go To URL Action

Check if Cookies are Enabled in Visitors’ Browsers

Detecting Device Orientation with DMXzone App Connect Browser

Show or Hide Elements Depending on Device Screen Size

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
Browser Component list of available objects?
Is there a way to get browser data such as referrer, source, medium etc. in Wappler?
Not redirecting after form submit
SPA open modal from external link
Retrieve current domain
#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(&quot;iPhone&quot;)}}">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).

14 Likes
"Current page/url is" condition
Change navbar background color on scroll
Inserting PHP Code Variable In Form
Dynamic Truncate text / length based on responsiveness Mobile/Laptop/Tablet breakpoints
Productivity Tips & Tricks
#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(&quot;iPhone&quot;)}}">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
Add class when mobile
#4

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
#5

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
#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.
(Edit: additions made - thanks Ben)

3 Likes
#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.
#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!

#9

Please check:


and

#10

Sweet, thank Teodor! This should work for my use case. Cheers!

#11

Thank you gentlemen. So simple - but valuable…