Browser Component-Can we have detailed documentation?

Wappler General Need Help
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).

15 Likes