How to Add Animated Views in Zoho Creator Pages Using HTML Snippets


Creating visually appealing, interactive dashboards or custom pages in Zoho Creator is a great way to enhance your app’s usability. One powerful technique is to use HTML snippets with CSS animations and JavaScript to create engaging views that communicate information effectively.

In this tutorial, we’ll show you how to build a dynamic, animated welcome view in a Zoho Creator Page using custom HTML, CSS, and JavaScript.

✅ Why Add Animated Views?

  • Provides a better user experience

  • Makes data visualization attractive

  • Guides users dynamically

  • Highlights important information

🔧 Step-by-Step Implementation

1️⃣: Create a New Page in Zoho Creator

  • Go to your Zoho Creator App → Pages → Add Page → Choose Blank Page.

  • Give it a meaningful name (e.g., "Dashboard Welcome").

2️⃣: Insert an HTML Snippet

Inside the Page editor, choose Add HTML snippet and paste the following complete code:

<%{
    // Get logged-in user email
    userEmail = zoho.loginuser;
    userIdPart = userEmail;
    if(userEmail != null && userEmail.contains("@"))
    {
        userIdPart = userEmail.toList("@").get(0);
    }
    displayName = userIdPart.replaceAll("\\."," ").replaceAll("_"," ");
%>

<style>
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

  .welcome-wrap {
    margin: 10px auto 16px;
    max-width: 1000px;
    border-radius: 16px;
    padding: 20px 22px 30px;
    color: #0b1220;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#fef6e4 0%, #e0f2fe 50%, #f1f5f9 100%);
    box-shadow: 0 10px 25px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.6);
  }

  .welcome-title {
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .chip {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffffb8;
    border: 1px solid #e5e7eb;
    backdrop-filter: blur(4px);
  }

  .svg-wrap { position: absolute; right: -15px; bottom: -10px; width: 230px; opacity: .9; }
  .roller { animation: spin 6s linear infinite; transform-origin: center; }
  .belt { animation: belt 2s linear infinite; }

  .truck-wrap { position: absolute; bottom: 35px; right: -200px; width: 180px; opacity: .95; }
  .truck { animation: driveLeft 14s linear infinite; }

  .loader-wrap { position: absolute; bottom: 5px; right: -180px; width: 150px; opacity: .95; }
  .loader { animation: moveLoader 20s linear infinite; }

  .wheel { animation: wheelSpin 2s linear infinite; transform-origin: center; }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes belt { 0% { transform: translateX(0); } 100% { transform: translateX(-40px); } }
  @keyframes driveLeft { 0% { transform: translateX(1400px); } 100% { transform: translateX(-1400px); } }
  @keyframes moveLoader { 0% { transform: translateX(1200px); } 100% { transform: translateX(-1200px); } }
  @keyframes wheelSpin { to { transform: rotate(360deg); } }

  @media(max-width:700px){
    .svg-wrap{ opacity:.25; width:180px; }
    .truck-wrap{ display:none; }
    .loader-wrap{ display:none; }
  }
</style>

<div class="welcome-wrap">
  <div class="welcome-title">
    <span id="greet">Welcome</span>, <strong><%=displayName%></strong> 
    <i class="fa-solid fa-hard-hat"></i>
  </div>

  <div class="badge-row">
    <span class="chip" id="todayChip">Today</span>
    <span class="chip">Plant: <b>Primary Crusher</b></span>
    <span class="chip">Shift: <b id="shiftChip">Auto</b></span>
    <span class="chip">Status: <b>Online</b></span>
  </div>

  <!-- Crusher Machine Animation SVG -->
  <svg class="svg-wrap" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 180 C60 140, 120 160, 180 150 C220 145, 250 165, 300 150 L300 200 L0 200 Z" fill="#e2e8f0"/>
    <rect x="110" y="95" width="80" height="60" rx="8" fill="#0ea5e9" opacity=".85"/>
    <circle class="roller" cx="120" cy="160" r="14" fill="#111827"/>
    <circle class="roller" cx="180" cy="160" r="14" fill="#111827"/>
    <rect class="belt" x="110" y="155" width="80" height="10" fill="#334155"/>
  </svg>

  <!-- Truck Animation SVG -->
  <svg class="truck-wrap" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <g class="truck">
      <rect x="30" y="35" width="90" height="30" rx="4" fill="#0ea5e9"/>
      <circle class="wheel" cx="50" cy="70" r="12" fill="#111827"/>
      <circle cx="50" cy="70" r="5" fill="#9ca3af"/>
    </g>
  </svg>

  <!-- Loader Animation SVG -->
  <svg class="loader-wrap" viewBox="0 0 180 100" xmlns="http://www.w3.org/2000/svg">
    <g class="loader">
      <rect x="20" y="40" width="90" height="25" rx="4" fill="#facc15"/>
      <circle class="wheel" cx="40" cy="70" r="12" fill="#111827"/>
    </g>
  </svg>
</div>

<script>
(function(){
  const now = new Date();
  const opts = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
  document.getElementById('todayChip').textContent = now.toLocaleDateString(undefined, opts);

  const h = now.getHours();
  let greet = 'Welcome';
  if(h < 12) greet = 'Good morning';
  else if(h < 17) greet = 'Good afternoon';
  else greet = 'Good evening';
  document.getElementById('greet').textContent = greet;

  const shift = (h >= 6 && h < 14) ? 'A' : (h >= 14 && h < 22) ? 'B' : 'C';
  document.getElementById('shiftChip').textContent = shift;
})();
</script>

<% } %>




✅ Features Enabled by the Snippet:

  • Dynamic User Greeting: Based on time of day.

  • Live Date and Shift Display.

  • Animated SVGs:

    • Crusher Machine Roller spinning

    • Truck driving across the screen

    • Loader vehicle moving continuously

  • Fully Responsive Design

⚡️ Pro Tips

  • Use Font Awesome Icons for professional iconography.

  • The animation is fully customizable via CSS @keyframes.

  • Combine with Zoho Creator's scripting to make the view dynamic (e.g., showing status, logged-in user details).

🎯 Conclusion

With simple HTML, CSS, and JavaScript integrated into Zoho Creator’s custom pages, you can vastly improve the look and feel of your applications, giving users a richer, more intuitive experience. This method is fully customizable and doesn’t require external tools besides standard web libraries.

Feel free to adjust the animations or SVGs to suit your business use case!

Comments

Post a Comment

Popular posts from this blog

How I Built an Interactive Employee Attendance Tracker in Zoho Creator

Image
Attendance tracking is a core part of running any business — but let’s be honest — most attendance systems are either too rigid or too plain . I wanted something different: ✅ A modern-looking interface ✅ Real-time updates to Zoho Creator ✅ Visual feedback with charts ✅ Simple controls to mark employees Present or Absent ✅ Smart logic to prevent repeated updates within 9 hours So, I built a custom Zoho Creator Widget that does exactly that. In this post, I’ll take you through the entire step-by-step process — from fetching data to updating records — so you can implement it in your own Creator apps. 1. Tools & Libraries Used Before we dive in, here’s what powers the widget: Zoho Creator Widget SDK v1 – to interact with Creator data ( getAllRecords , updateRecord ) Chart.js – to visualize attendance with a pie chart HTML, CSS & JavaScript – for structure, styling, and logic <script src="https://cdn.jsdelivr.net/npm/chart.js"></scr...
Read more

Auto-Generating Serial Numbers with Custom Number Series in Zoho Creator

Image
 When working with business applications, it’s often necessary to generate unique identifiers for records such as requests, invoices, or assets. While Zoho Creator provides a default auto-number field, it doesn’t always allow the flexibility businesses need—such as custom prefixes, ranges, or increments. Inspired by the Number Series functionality in Microsoft Dynamics 365 Business Central , I developed a custom auto-numbering system in Zoho Creator that gives full control over serial number generation. Why Custom Number Series? Different organizations have different requirements for numbering their records. For example: A Prefix to represent the type of record (e.g., REQ_ for requests). A Starting Number to decide where the series begins (e.g., start at 1000). An Increment to skip numbers in a defined pattern (e.g., +1, +5, etc.). An Ending Number to enforce a limit (e.g., stop at 9999). This flexibility makes it easier to manage records, avoid duplicatio...
Read more