Webview to single page WORKS

So i have a webview with my xano list and on click it goes to the single native page of bravo !

It’s nice like that we can add real front end filters

ScreenRecording_02-25-2025 11-34-38_1.mp4

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

<title>Allocations List</title>

<script src="https://cdn.tailwindcss.com"></script>

<style>

/* Prevent zooming and scrolling */

html, body {

overflow: hidden;

-webkit-user-select: none;

-webkit-touch-callout: none;

user-select: none;

}

</style>

</head>

<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-4">

<h1 class="text-2xl font-bold text-gray-800 mb-4">Allocations List</h1>

<div class="w-full max-w-md bg-white shadow-lg rounded-lg p-4 overflow-hidden">

<div id="allocations-container" class="divide-y divide-gray-200">

<p class="text-center text-gray-500">Loading...</p>

</div>

</div>

<script>

document.addEventListener("DOMContentLoaded", async function () {

const apiEndpoint = 'https://x8ki-letl-twmt.n7.xano.io/api:885n6KcD/loc';

const container = document.getElementById('allocations-container');

const bravoPageId = "01JMY8A2JVHQF33DGBASN665XS"; // Bravo Page ID

const bravoAppId = "01JMWVBCMGTTX4K3EVASJQFYSK"; // Bravo App ID

try {

const response = await fetch(apiEndpoint);

const data = await response.json();

container.innerHTML = ""; // Clear loading text

if (Array.isArray(data) && data.length > 0) {

data.forEach(allocation => {

if (allocation.id && allocation.Name && allocation.desc) {

const allocationDiv = document.createElement('div');

allocationDiv.className = 'p-4 hover:bg-gray-100 cursor-pointer';

allocationDiv.setAttribute('data-id', allocation.id);

allocationDiv.innerHTML = `

<p class="text-lg font-semibold text-gray-900">${allocation.Name}</p>

<p class="text-sm text-gray-600">${allocation.desc}</p>

`;

// Add click event for Bravo navigation

allocationDiv.addEventListener('click', function () {

const allocationId = this.getAttribute('data-id');

// Encode the ID in Base64 format for Bravo

const paramsObj = { allId: parseInt(allocationId) }; // Ensure it's a number

const paramsEncoded = btoa(JSON.stringify(paramsObj));

// Construct the Bravo URL with encoded params

const bravoUrl = `https://apps-service.bravostudio.app/devices/apps/${bravoAppId}/node/${bravoPageId}?params=${paramsEncoded}`;

// Send navigation message to Bravo

const message = {

action: "goto",

params: { href: bravoPageId, hrefRemote: bravoUrl }

};

console.log("Sending message to Bravo:", message);

if (window.bravo) {

window.bravo.postMessage(message);

} else {

console.warn("Bravo interface not found.");

}

});

container.appendChild(allocationDiv);

}

});

} else {

container.innerHTML = "<p class='text-center text-gray-500'>No allocations found.</p>";

}

} catch (error) {

console.error("Error fetching data:", error);

container.innerHTML = "<p class='text-center text-red-500'>Error loading allocations.</p>";

}

});

// Prevent zooming with fingers

document.addEventListener("gesturestart", function (e) {

e.preventDefault();

});

</script>

</body>

</html>