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/zoid@9.0.85/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>

Did this page help you?