Since SAP Analytics Cloud (SAC) Analytic Application Designer (AAD) is a specialized environment, we can't fully replicate its backend capabilities with plain HTML and JavaScript. However, I can create a mock SAC AAD-like application in HTML, CSS, and JavaScript using sample data. This will showcase how interactivity, scripting, and visualizations work in an analytic application.
Scenario:
We'll create a Sales Performance Dashboard with:
- A dropdown to select a year
- A bar chart to display sales per region
- A table to show sales details
- Dynamic updates based on user selection
Code Implementation
Save the following as index.html and open it in a browser:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SAC AAD Sample - Sales Performance Dashboard</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; text-align: center; background-color: #f4f4f4; } .container { max-width: 900px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } select { padding: 10px; margin: 10px; } canvas { margin: 20px auto; max-width: 100%; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { padding: 10px; border: 1px solid #ddd; } th { background-color: #0073e6; color: white; } </style> </head> <body> <div class="container"> <h1>SAC AAD - Sales Performance Dashboard</h1> <label for="yearSelect">Select Year:</label> <select id="yearSelect" onchange="updateDashboard()"> <option value="2023">2023</option> <option value="2024" selected>2024</option> </select> <h2>Sales by Region</h2> <canvas id="salesChart"></canvas> <h2>Sales Data Table</h2> <table> <thead> <tr> <th>Region</th> <th>Year</th> <th>Sales ($M)</th> </tr> </thead> <tbody id="salesTableBody"> </tbody> </table> </div> <script> // Sample data const salesData = { "2023": [ { region: "North America", sales: 120 }, { region: "Europe", sales: 95 }, { region: "Asia", sales: 130 }, { region: "South America", sales: 75 } ], "2024": [ { region: "North America", sales: 140 }, { region: "Europe", sales: 110 }, { region: "Asia", sales: 150 }, { region: "South America", sales: 85 } ] }; let chartInstance = null; function updateDashboard() { const selectedYear = document.getElementById("yearSelect").value; const data = salesData[selectedYear]; // Update Table const tableBody = document.getElementById("salesTableBody"); tableBody.innerHTML = ""; // Clear previous entries data.forEach(entry => { let row = `<tr> <td>${entry.region}</td> <td>${selectedYear}</td> <td>$${entry.sales}M</td> </tr>`; tableBody.innerHTML += row; }); // Update Chart updateChart(data); } function updateChart(data) { const ctx = document.getElementById("salesChart").getContext("2d"); if (chartInstance) { chartInstance.destroy(); } chartInstance = new Chart(ctx, { type: "bar", data: { labels: data.map(entry => entry.region), datasets: [{ label: "Sales ($M)", data: data.map(entry => entry.sales), backgroundColor: ["#0073e6", "#ffcc00", "#ff5733", "#33cc33"] }] }, options: { responsive: true, scales: { y: { beginAtZero: true } } } }); } // Initialize dashboard updateDashboard(); </script> </body> </html> How This Mimics SAP AAD Capabilities
- Dynamic Interaction: The dashboard updates when a user selects a year, similar to how SAC AAD applications respond to user inputs.
- Charts and Visuals: Uses
Chart.jsto display a bar chart, just like SAC AAD allows visualization components. - Table Representation: Displays sales data in a table that updates dynamically.
- JavaScript Scripting: Mimics how scripting in SAC AAD modifies visuals and tables based on user actions.
How to Use This for Business Demonstration
- Explain that SAC AAD applications work similarly but have a more powerful backend for fetching live SAP data.
- Show how event-driven scripting updates visuals dynamically.
- Highlight that this is a basic example—SAC AAD allows integration with SAP S/4HANA, BW, and more.
Next Steps
- Want to enhance this further?
- Add filters (e.g., by product category).
- Implement drill-down (click on a bar to see details).
- Use real SAP data via APIs.
Would you like me to help with a more advanced version or integrate it with a dataset you have?
No comments:
Post a Comment