Visual analytics on feedback forms

Feedback is a vital metric for gauging performance, user satisfaction, and areas of improvement—whether it’s for a product, course, service, or event. In Power Pages (formerly Power Apps Portals), you can collect, analyze, and visually present feedback data using Dataverse, Chart.js, Liquid, and optionally Power BI. This guide walks you through creating visual analytics dashboards for feedback forms.

---

Step 1: Structure Your Feedback System in Dataverse

First, design your feedback collection schema using Dataverse.

Recommended Tables:

• Feedback
  • User (Lookup to Contact or Employee)
  • Date Submitted (Date Only)
  • Rating (Number or Choice: 1 to 5)
  • Category (Choice: Product, Service, Support, etc.)
  • Comments (Multiline Text)
• Feedback Type / Source
  • Optional: Track form version or channel (Web, App, Email)

---

Step 2: Build Feedback Forms in Power Pages

Create a Feedback Submission Page:

• Add a Basic Form linked to the Feedback table.
• Set entity permissions for Create access.
• Add logic to auto-fill user details via Liquid.

Optional Enhancements:

• Use conditional visibility (e.g., show comment box only for low ratings).
• Include validation and user-friendly UI elements.

---

Step 3: Set Up the Visual Analytics Page

Create a new page (e.g., /feedback-dashboard) to display feedback analytics.

Use a Web Template or Content Snippet to insert HTML/JS code:

• Include Canvas elements for charts
• Use Liquid to inject data dynamically

---

Step 4: Use Liquid to Fetch and Format Feedback Data

Below is a simplified Liquid script for pulling ratings and categories:

{% assign feedbacks = entities.feedback %}
{% assign categories = "Product,Service,Support" | split: "," %}
{% assign ratings = "1,2,3,4,5" | split: "," %}

{% assign dataProduct = feedbacks | where: "category", "Product" %}
{% assign dataService = feedbacks | where: "category", "Service" %}
{% assign dataSupport = feedbacks | where: "category", "Support" %}

{% assign productRatings = "" %}
{% for rating in ratings %}
  {% assign count = dataProduct | where: "rating", rating | size %}
  {% assign productRatings = productRatings | append: count | append: "," %}
{% endfor %}

Repeat similar logic for other categories, or use Power Automate to preprocess and cache the data into a summary table.

---

Step 5: Integrate Chart.js for Interactive Charts

Load Chart.js:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Create Canvas Elements:

<canvas id="feedbackChartProduct"></canvas>
<canvas id="feedbackChartService"></canvas>

Render Charts with JavaScript:

<script>
  const ctxProduct = document.getElementById('feedbackChartProduct').getContext('2d');
  const feedbackProductChart = new Chart(ctxProduct, {
    type: 'bar',
    data: {
      labels: ['1 Star', '2 Stars', '3 Stars', '4 Stars', '5 Stars'],
      datasets: [{
        label: 'Product Feedback',
        data: [{{ productRatings }}],
        backgroundColor: 'rgba(75, 192, 192, 0.6)'
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Repeat for other categories (Service, Support, etc.).

---

Step 6: Add Summary KPIs

Add quick stats for:

• Total feedback submitted
• Average rating per category
• Most common comment keywords (using Power Automate or AI Builder)

Use simple HTML blocks or cards:

<div class="kpi-card">
  <h3>Total Feedback</h3>
  <p>{{ feedbacks.size }}</p>
</div>

---

Step 7: Filtering and Segmentation

Allow filters on:

• Date Range
• Feedback Category
• Rating

Use query string parameters (?category=Product) or dropdowns with JavaScript to filter chart data dynamically. Advanced filters can be handled with Liquid conditions and dynamic chart generation.

---

Step 8: Admin Permissions and Security

Use Web Roles and Entity Permissions to:

• Show full dashboard to admins
• Allow users to see only their own submissions (if needed)

Example:

{% if user.roles contains "Admin" %}
  {# show all feedback charts #}
{% else %}
  {# show only the user’s feedback summary #}
{% endif %}

---

Step 9: Power BI Integration (Optional)

For advanced analytics:

• Export feedback data into a Power BI dataset
• Use Power BI Embedded in Power Pages
• Create charts with sentiment analysis, trends over time, heatmaps

Use Power BI iFrame or Power BI Tile inside your portal page.

---

Step 10: Enhance User Experience

Tips:

• Use tooltips and labels to explain metrics
• Show trend lines for average satisfaction over months
• Offer downloadable reports in PDF/Excel using Power Automate
• Show real-time updates using polling or refresh intervals

---

Use Case Scenarios

• Product Feedback: Analyze satisfaction per feature or product.
• Support Feedback: Identify agents or teams with poor response ratings.
• Event Surveys: Visualize attendee impressions post-event.
• Employee Feedback: Track workplace satisfaction over time.