Quick View Example

This is a basic example of a Quick View index.html file.

The HTML body contains a single button called send-request.

Next, the Zoid script, a dependency for Quick Views, is loaded.

The remaining code shows how to use the JavaScript Quick View Messaging System to wire up a click event to the button that will make an authenticated API call.

<!DOCTYPE html>
<html>

<head>
  <title>Quick View Example</title>
  <meta charset="UTF-8" />
  
</head>

<body>
  <button id="send-request">Send Request</button>
  
  <script src='https://unpkg.com/[email protected]/dist/zoid.frameworks.js'></script>
  <script>
    window.onload = () => {
        window.zoid.create({
          tag: "Quick View Example", //This tag must match the Quick View Name in App Studio.
          url: window.location.href
        });
      }
      
      document.getElementById("send-request").addEventListener("click", () => {
        sendRequestViaProxy();
      });
      
      
      async function sendRequestViaProxy() {
        if (window.xprops) {
          const url = "http://api.example.com/v1/endpoint";
          const connection_id = window.xprops.connection_data[0].id;
          let response = await window.xprops.getDataViaProxy(url, connection_id, false);
          console.log(response);    
        } else {
            console.log("Xprops not defined.");
        }
      }
    </script>
</body>

</html>