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>

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

  <button id="send-request">Send Request</button>
  <script src='https://unpkg.com/[email protected]/dist/zoid.frameworks.js'></script>
    window.onload = () => {
          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", () => {
      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);
        } else {
            console.log("Xprops not defined.");