Forem: Bishal Thapaliya

🎨 Building a Random Gradient Generator with React (Step-by-Step Guide)

Bishal Thapaliya — Wed, 10 Sep 2025 09:42:17 +0000

If you’ve ever found yourself spending way too much time picking the perfect color combination for a design, this guide is for you. We’re going to build something fun, practical, and visually stunning. By the end of this step-by-step guide, you’ll be able to create a Random Gradient Generator using React.js, which will allow you to generate endless color gradients (linear, radial, and conic) with just one click, copy their CSS code, and use them to make your projects stand out.

This guide is beginner-friendly and explains every line of code so you can learn React while building something fun and practical.

🚀 What We’re Building

We’ll create a UI where users can:
Choose how many gradients to generate
Select the type of gradient (linear, radial, or conic)
Click a button to generate random gradients
Copy the CSS code for each gradient
Load more gradients when available

Here’s a sneak peek of how it will look

📂 Project Setup
First, make sure you have a React project ready. Then, create two files inside the src/components folder:

GradientGenerator.jsx
GradientGenerator.css

📝 Writing the Component
Let’s break the GradientGenerator.jsx step by step.
import { useEffect, useState } from "react";
import './GradientGenerator.css';

📝 We import React hooks (useState and useEffect) and the CSS file for styling.

1. Setting Up State

const [num, setNum] = useState(12);
const [type, setType] = useState('linear');
const [gradientCollections, setGradientCollections] = useState([]);
const [displayCount, setDisplayCount] = useState(12);

num → number of gradients to generate.
type → type of gradient (linear, radial, conic).
gradientCollections → stores all generated gradients.
displayCount → how many gradients to show at once.

We also calculate what to display:

const displayedGradients = gradientCollections.slice(0, displayCount);
const showLoadMore = displayCount < gradientCollections.length;

📝 👉 This helps us show only a part of gradients and reveal more with a “Load More Gradients” button.

2. Random Color Generator

const getHexColor = () => {
  const rgb = 255 * 255 * 255;
  const random = Math.floor(Math.random() * rgb);
  const hexValue = random.toString(16);
  const colorCode = hexValue.padEnd(6, '0');
  return `#${colorCode}`;
};

📝 This function creates a random HEX color code every time it’s called.

3. Generating Gradients

const generateGradients = () => {
  let colors = [];

  for (let i = 0; i < num; i++) {
    const degree = Math.floor(Math.random() * 360);
    const color1 = getHexColor();
    const color2 = getHexColor();

    if (type === 'linear') {
      colors.push({
        gradient: `linear-gradient(${degree}deg, ${color1}, ${color2})`,
        css: `background: linear-gradient(${degree}deg, ${color1}, ${color2})`
      });
    } else if (type === 'radial') {
      colors.push({
        gradient: `radial-gradient(circle, ${color1}, ${color2})`,
        css: `background: radial-gradient(circle, ${color1}, ${color2})`
      });
    } else {
      colors.push({
        gradient: `conic-gradient(from ${degree}deg, ${color1}, ${color2})`,
        css: `background: conic-gradient(from ${degree}deg, ${color1}, ${color2})`
      });
    }
  }

  setGradientCollections(colors);
  setDisplayCount(Math.min(12, num));
};

📝 Depending on the selected gradient type, we push a new gradient style into the colors array.

4. Load More Functionality

const loadMoreGradients = () => {
  const newCount = Math.min(displayCount + 12, gradientCollections.length);
  setDisplayCount(newCount);
}

📝 Each time we click the “Load More Gradients” button, it shows 12 more gradients.

5. Copying CSS to Clipboard

const copyCss = (css) => {
  navigator.clipboard.writeText(css);

  const toast = document.createElement('div');
  toast.textContent = 'Code Copied Successfully!';
  toast.className = 'toast-notification';
  document.body.appendChild(toast);

  setTimeout(() => {
    if (document.body.contains(toast)) {
      document.body.removeChild(toast);
    }
  }, 3000);
};

📝 This allows users to copy the gradient CSS with a single click, and a toast message confirms success. In this section, we're creating our own custom toast notification (without using any external library).

6. Auto-Generate Gradients on Page Load

useEffect(() => {
  generateGradients();
}, [type]);

📝 Every time the component first mounts or when the gradient type changes (linear, radial, or conic), the useEffect hook runs and triggers generateGradients(). This ensures fresh gradients are automatically generated without needing to click the button.

7. Rendering the UI

Now, let’s render the entire UI.

return (
  <section className="gradient-generator-container">
    <div className="background-elements">
      <div className="floating-element element-1"></div>
      <div className="floating-element element-2"></div>
      <div className="floating-element element-3"></div>
    </div>

    <div className="content-wrapper">

      <header className="gradient-header">
        <div className="logo-container">
          <div className="logo-icon">🎨</div>
        </div>
        <h1 className="main-title">Random Gradient Generator</h1>
        <p className="subtitle">
           Create stunning gradients for your next project with 
           just one click
        </p>
      </header>

      <div className="controls">
        <div className="control-group">
          <input 
             type="number" 
             value={num} 
             onChange={(e) => setNum(e.target.value)}
             className="number-input" />
        </div>

        <div className="control-group">
          <select 
             value={type} 
             onChange={(e) => setType(e.target.value)}
             className="select-input">
             <option value="linear">Linear</option>
             <option value="radial">Radial</option>
             <option value="conic">Conic</option>
          </select>
        </div>

        <button 
          onClick={generateGradients} 
          className="generate-button">
           ✨ Generate
        </button>
      </div>

      <div className="gradient-grid">
        {displayedGradients.map((color, index) => (
          <div 
            key={index} 
            className="gradient-card" 
            style={{ background: color.gradient, animationDelay:
            `${index * 0.01}s` }}>
            <div className="overlay"></div>
            <div className="gradient-info">
              <div className="gradient-type">{type}</div>
            </div>
            <button onClick={() => copyCss(color.css)}
              className="copy-button">
              📋 Copy
            </button>
          </div>
        ))}
      </div>

      {showLoadMore && (
        <div className="load-more-container">
          <button 
             onClick={loadMoreGradients} 
             className="load-more-button">
              Load More Gradients
          </button>
        </div>
      )}

      <div className="stats-container">
        <div className="stats-badge">
          <span className="stats-text">
            Showing 
            <span className="stats-number">{displayCount}</span> 
            of 
            <span className="stats-number">
              {gradientCollections.length}
            </span> gradients
          </span>
        </div>
      </div>
    </div>
  </section>
);

export default GradientGenerator;

📝 Here we:

Render the header
Add input controls
Display generated gradients in a grid
Add “Load More” and statistics section
Finally, export it

Complete code snippet

import { useEffect, useState } from "react";
import './GradientGenerator.css';

const GradientGenerator = () => {
  const [num, setNum] = useState(12);
  const [type, setType] = useState('linear');
  const [gradientCollections, setGradientCollections] = useState([]);
  const [displayCount, setDisplayCount] = useState(12);

  const displayedGradients = gradientCollections.slice(0, displayCount);
  const showLoadMore = displayCount < gradientCollections.length;

  const getHexColor = () => {
    const rgb = 255 * 255 * 255;
    const random = Math.floor(Math.random() * rgb);
    const hexValue = random.toString(16);
    const colorCode = hexValue.padEnd(6, '0');
    return `#${colorCode}`;
  };

  const generateGradients = () => {
    let colors = [];

    for(let i = 0; i < num; i++) {
      const degree = Math.floor(Math.random() * 360);
      const color1 = getHexColor();
      const color2 = getHexColor();

      if(type === 'linear') {
        colors.push({
          gradient: `linear-gradient(${degree}deg, ${color1}, ${color2})`,
          css: `background: linear-gradient(${degree}deg, ${color1}, ${color2})`
        });
      } else if(type === 'radial') {
        colors.push({
          gradient: `radial-gradient(circle, ${color1}, ${color2})`,
          css: `background: radial-gradient(circle, ${color1}, ${color2})`
        });
      } else {
        colors.push({
          gradient: `conic-gradient(from ${degree}deg, ${color1}, ${color2})`,
          css: `background: conic-gradient(from ${degree}deg, ${color1}, ${color2})`
        })
      }
    }

    setGradientCollections(colors);
    setDisplayCount(Math.min(12, num));
  };

  const loadMoreGradients = () => {
    const newCount = Math.min(displayCount + 12, gradientCollections.length);
    setDisplayCount(newCount);
  }

  const copyCss = (css) => {
    navigator.clipboard.writeText(css);

    const toast = document.createElement('div');
    toast.textContent = 'Code Copied Successfully!';
    toast.className = 'toast-notification';
    document.body.appendChild(toast);

    setTimeout(() => {
      if(document.body.contains(toast)) {
        document.body.removeChild(toast);
      }
    }, 3000);
  }

  useEffect(() => {
    generateGradients();
  }, [type]);

  return (
    <section className="gradient-generator-container">
      <div className="background-elements">
        <div className="floating-element element-1"></div>
        <div className="floating-element element-2"></div>
        <div className="floating-element element-3"></div>
      </div>

      <div className="content-wrapper">
        <header className="gradient-header">
          <div className="logo-container">
            <div className="logo-icon">🎨</div>
          </div>
          <h1 className="main-title">Random Gradient Generator</h1>
          <p className="subtitle">Create stunning gradients for your next project with just one click</p>
        </header>

        <div className="controls">
          <div className="control-group">
            <input type="number" value={num} onChange={(e) => setNum(e.target.value)} className="number-input"/>
          </div>

          <div className="control-group">
            <select value={type} onChange={(e) => setType(e.target.value)} className="select-input">
              <option value="linear">Linear</option>
              <option value="radial">Radial</option>
              <option value="Conic">Conic</option>
            </select>
          </div>

          <button onClick={generateGradients} className="generate-button">✨ Generate</button>
        </div>

        <div className="gradient-grid">
          { displayedGradients.map((color, index) => (
            <div key={index} className="gradient-card" style={{ background: color.gradient, animationDelay: `${index * 0.01}s`}}>
              <div className="overlay"></div>
              <div className="gradient-info">
                <div className="gradient-type">{type}</div>
              </div>
              <button onClick={() => copyCss(color.css)} className="copy-button">📋 Copy</button>
            </div>
          ))}
        </div>

        { showLoadMore && (
          <div className="load-more-container">
            <button onClick={loadMoreGradients} className="load-more-button">Load More Gradients</button>
          </div>
        )}

        <div className="stats-container">
          <div className="stats-badege">
            <span className="stats-text">
              Showing 
              <span className="stats-number">{displayCount}</span> of {' '} 
              <span className="stats-number">{gradientCollections.length}</span> gradient colors
            </span>
          </div>
        </div>
      </div>
    </section>
  )
}

export default GradientGenerator;

8. Styling with CSS 🎨

All the animations, hover effects, and responsive design come from the GradientGenerator.css file. It includes:
Background animations (floating cir

cles, glowing effects)
Grid layout for gradients
Hover states with smooth animations
A toast notification for copied code

📝 You can find the full CSS in the code here.

.gradient-generator-container {
  min-height: 100vh;
  background: linear-gradient(135deg, hsl(240, 10%, 3.9%) 0%, hsl(240, 10%, 3.9%) 50%, hsl(240, 10%, 6%) 100%);
  padding: 1rem;
  position: relative;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: hsl(0, 0%, 98%);
}

@media (min-width: 640px) {
  .gradient-generator-container {
    padding: 2rem;
  }
}

.background-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.floating-element {
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(40px);
  opacity: 0.2;
  animation: float 3s ease-in-out infinite;
}

.element-1 {
  top: 5rem;
  left: 2.5rem;
  background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(300, 80%, 65%));
  animation-delay: 0s;
}

.element-2 {
  top: 10rem;
  right: 2.5rem;
  background: linear-gradient(135deg, hsl(195, 100%, 60%), hsl(270, 80%, 60%));
  animation-delay: 2s;
}

.element-3 {
  bottom: -2rem;
  left: 5rem;
  background: linear-gradient(135deg, hsl(240, 80%, 55%), hsl(270, 80%, 60%));
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2.5rem);
  }
}

.content-wrapper {
  position: relative;
  max-width: 112rem;
  margin: 0 auto;
  z-index: 1;
}

.gradient-generator-container {
  text-align: center;
  animation: slide-up 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(300, 80%, 65%));
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 40px hsl(270, 80%, 60% / 0.3);
  animation: glow 2s ease-in-out infinite alternate;
}

.logo-icon {
  font-size: 2.5rem;
}

.main-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(195, 100%, 60%), hsl(270, 80%, 60%));
  background-size: 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  line-height: 1.2;
  animation: gradient-shift 8s ease-in-out infinite;
}

@media (min-width: 640px) {
  .main-title {
    font-size: 3.75rem;
  }
}

.subtitle {
  font-size: 1.25rem;
  color: hsl(240, 5%, 65%);
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.controls {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  animation: fade-in 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0.2s;
  animation-fill-mode: both;
  gap: 0.75rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.input-wrapper,
.select-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.number-input,
.select-input {
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid hsl(240, 10%, 15% / 0.5);
  background: hsl(240, 10%, 6% / 0.8);
  backdrop-filter: blur(12px);
  color: hsl(262, 93%, 12%);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: center;
  min-height: 2.5rem;
}

.number-input {
  width: 5rem;
}

.select-input {
  width: 10rem;
  appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
}

.number-input:focus,
.select-input:focus {
  border-color: hsl(270, 80%, 60%);
  box-shadow: 0 0 0 4px hsl(270, 80%, 60% / 0.2);
  background: hsl(240, 10%, 8% / 0.9);
}

.generate-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  background: linear-gradient(135deg, hsl(270, 80%, 60%), hsl(300, 80%, 65%));
  color: hsl(0, 0%, 98%);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 
    0 8px 25px -8px hsl(270, 80%, 60% / 0.4),
    0 0 0 1px hsl(270, 80%, 60% / 0.1);
  overflow: hidden;
}

.generate-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 12px 35px -8px hsl(270, 80%, 60% / 0.5),
    0 0 0 1px hsl(270, 80%, 60% / 0.2);
}

.generate-button:active {
  transform: translateY(0) scale(0.98);
}

.number-input:focus-visible,
.select-input:focus-visible,
.generate-button:focus-visible {
  outline: 2px solid hsl(270, 80%, 60%);
  outline-offset: 2px;
}

@media (max-width: 767px) {

  .generate-button {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
    max-width: 12rem;
  }

  .number-input,
  .select-input {
    padding: 0.875rem 1rem;
    min-height: 3rem;
  }

  .select-input {
    width: 9rem;
  }
}

.gradient-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .gradient-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gradient-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gradient-card {
  position: relative;
  height: 12rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 40px -12px hsl(240, 10%, 0% / 0.5);
  transition: all 0.5s ease;
  animation: scale-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  backdrop-filter: blur(8px);
  border: 1px solid hsl(240, 10%, 15% / 0.2);
  cursor: pointer;
}

.gradient-card:hover {
  transform: translateY(-0.5rem) scale(1.05);
  box-shadow: 0 0 40px hsl(270, 80%, 60% / 0.3);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: hsl(0, 0%, 0% / 0);
  transition: all 0.3s ease;
}

.gradient-card:hover .card-overlay {
  background: hsl(0, 0%, 0% / 0.2);
}

.copy-button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(0, 0%, 100% / 0.2);
  background: hsl(0, 0%, 100% / 0.1);
  backdrop-filter: blur(12px);
  color: rgb(15, 3, 95);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(0.5rem);
}

.gradient-card:hover .copy-button {
  opacity: 1;
  transform: translateY(0);
}

.copy-button:hover {
  background: hsl(0, 0%, 100% / 0.2);
}

.gradient-info {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateY(0.5rem);
}

.gradient-card:hover .gradient-info {
  opacity: 1;
  transform: translateY(0);
}

.gradient-type {
  background: hsl(0, 0%, 100% / 0.1);
  backdrop-filter: blur(12px);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid hsl(0, 0%, 100% / 0.2);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: capitalize;
}

/* Load more section */
.load-more-container {
  text-align: center;
  margin-bottom: 2rem;
  animation: fade-in 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.load-more-button {
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(240, 10%, 15% / 0.5);
  background: hsl(240, 10%, 6% / 0.5);
  backdrop-filter: blur(8px);
  color: hsl(260, 94%, 6%);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more-button:hover {
  background: hsl(240, 10%, 6% / 0.8);
  border-color: hsl(270, 80%, 60% / 0.5);
  transform: scale(1.05);
}

/* Stats section */
.stats-container {
  text-align: center;
  animation: fade-in 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: hsl(240, 10%, 6% / 0.3);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  border: 1px solid hsl(240, 10%, 15% / 0.2);
}

.stats-text {
  font-size: 0.875rem;
  color: hsl(240, 5%, 65%);
}

.stats-number {
  font-weight: 600;
  color: hsl(0, 0%, 98%);
}

/* Toast notification */
.toast-notification {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background: hsl(240, 10%, 6%);
  color: hsl(0, 0%, 98%);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(240, 10%, 15%);
  box-shadow: 0 20px 40px -12px hsl(240, 10%, 0% / 0.5);
  z-index: 1000;
  animation: toast-slide-in 0.3s ease-out;
}

/* Animations */
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow {
  0% {
    filter: brightness(1) drop-shadow(0 0 20px hsl(270, 80%, 60% / 0.3));
  }
  100% {
    filter: brightness(1.1) drop-shadow(0 0 30px hsl(270, 80%, 60% / 0.5));
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes toast-slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .gradient-card {
    height: 11.25rem;
  }

  .main-title {
    font-size: 2rem;
  }

  .floating-element {
    width: 12rem;
    height: 12rem;
  }
}

👉 Now you can import GradientGenerator.jsx in your App.jsx file and use it like any other React component.

💡 Key Learnings
We’ve built a Random Gradient Generator in React from scratch. This project helps you practice:

React state management (useState)
Lifecycle hooks (useEffect)
Dynamic rendering with .map()
Copying text to clipboard
Styling with CSS animations

Now you can:

Deploy it on Netlify or Vercel and share with friends 🎉

🚀 Wrapping Up

In this guide, we built a Random Gradient Generator in React that creates stunning gradients with just one click. From generating random HEX colors to copying CSS with a custom toast notification, we kept things simple and focused on the fundamentals. 🎨✨

The cool part? 💡 We did it all with the basics: useState, useEffect, some simple logic, and a bit of CSS magic. Nothing too fancy, but enough to make something that actually feels useful (and pretty cool to play with).

If you made it this far, I’d love to hear your thoughts, feedback, or suggestions for improvement.

Let’s keep learning, experimenting, and building awesome stuff together. 🚀

Happy Coding! 💻💖

🚀 Build an Infinite Scroll App in React like a Pro

Bishal Thapaliya — Fri, 16 May 2025 13:59:16 +0000

Infinite scrolling is probably one of the most widely used features in today's web applications. Rather than relying on traditional pagination, it loads further content dynamically when users scroll. In this tutorial, you will learn how to implement a basic and simple Infinite Scroll component in React JS by fetching GitHub users from the GitHub API.🎯

📝🔰 Perfect for beginners! This guide focuses on the core logic without overwhelming you with complex React patterns.

🎯What We Will Build

We will build a clean React application showing GitHub users as cards. When users scroll, additional users will be fetched automatically, providing an overall smooth browsing experience.

🛠 Tech Stack:
⚛️ useState to manage state

⚛️ useEffect to handle side effects like API calls and event listeners

🌐 fetch API to load data

📜 Step-by-Step Implementation

1️⃣ Project Setup and Initial Imports
Ensure your React project is set up.

📝 Tools like Vite ⚡️ make the process super fast.

Make a components directory inside the src folder, and create 2 files in it:

InfiniteScroll.jsx
InfiniteScroll.css

Import Essentials:
Open InfiniteScroll.jsx file and start with the following imports.

import React, { useEffect, useState } from 'react'
import './InfiniteScroll.css'

In the given code snippet above, we are importing useState and useEffect from React, and we are importing a CSS file to style the user cards later.

2️⃣ States Configuration
We shall manage three primary pieces of state:

👥 users – stores the fetched users.

📄 page – track the current page.

🔄 isLoading – prevents multiple simultaneous API calls.

const [users, setUsers] = useState([]);
const [page, setPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);

3️⃣ Fetch Users from GitHub API
We are creating an async function, which allows us to use the await keyword in it. Using async makes it easier to write asynchronous code, which improves readability.

The getUsersFromAPI() function makes an asynchronous request to the GitHub API to retrieve a list of users, using the current page number to paginate the results.
When the data is successfully received, it adds the new users to the existing list and sets the next page number for retrieval.
If there is any exception in the process, it catches the exception and logs it to the console for debugging.
The function always stops the loading indicator, whether it is successful or not, to update the user interface accordingly.

const getUsersFromAPI = async () => {
    try {
        setIsLoading(true);
        const response = await fetch(`https://api.github.com/users?since=${(page - 1) * 30}`);
        const data = await response.json();
        setUsers((prevUsers) => [...prevUsers, ...data]);
        setPage((prevPage) => prevPage + 1);
    } catch (error) {
        console.error(`Error while fetching users: ${error}`);
    } finally {
        setIsLoading(false);
    }
}

4️⃣ Handle Scroll Events

We will create a function called handleScroll, which checks if the user is near the bottom of the page. If yes, it will invoke the getUsersFromAPI() function to fetch more users.
It also ensures that, as a request is in progress, no new request is sent (isLoading prevents this).

const handleScroll = () => {
    if (isLoading) return;
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 10) {
        getUsersFromAPI();
    }
}

5️⃣ Setup Lifecycle with useEffect

The useEffect hook runs once when the component is mounted.

It makes a call to the getUsersFromAPI() method to load the first list of users.
Adds a scroll event listener.
Cleans the listener when the component is removed.

useEffect(() => {
    getUsersFromAPI();
    window.addEventListener('scroll', handleScroll);

    return () => {
        window.removeEventListener('scroll', handleScroll);
    }
}, []);

6️⃣ Render Users in Card Format

We iterate over the users array using the map() function and display each user in a stylish card layout. Each card displays the user's avatar, username, and account type (i.e., User or Organization), and a link to their GitHub profile is displayed when the card is hovered over.

{users.map((user) => (
    <div className="card" key={user.id}>
        <div className="image-container">
            <img src={user.avatar_url} alt={user.login} />
        </div>
        <div className="content-container">
            <div className="contentBx">
                <h3>
                    {user.login}<br />
                    <span>{user.type}</span>
                </h3>
            </div>
            <div className="sci">
                <a href={user.html_url} target='blank' rel='noopener noreferrer'>🔗 View Profile</a>
            </div>
        </div>
    </div>
))}

Complete code snippet

import React, { useEffect, useState } from 'react'
import './InfiniteScroll.css'


const InfiniteScroll = () => {
    const [users, setUsers] = useState([]);
    const [page, setPage] = useState(1);
    const [isLoading, setIsLoading] = useState(false);

    // function to fecth users from Github API
    const getUsersFromAPI = async () => {
        try {
            setIsLoading(true);
            const response = await fetch(`https://api.github.com/users?since=${(page - 1) * 30}`);
            const data = await response.json();
            setUsers((prevUsers) => [...prevUsers, ...data]);
            setPage((prevPage) => prevPage + 1);
        } catch (error) {
            console.error(`Error while fetching users: ${error}`);
        } finally {
            setIsLoading(false);
        }
    }

    // function to check scroll position and load more if needed
    const handleScroll = () => {
        if (isLoading) return;

        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 10) {
            getUsersFromAPI();
        }
    }

    // Initial load and attach scroll listener
    useEffect(() => {
        getUsersFromAPI();
        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        }
    }, []);

    return (
        <>
            <h1 className='page-title'>Github Users</h1>
            <section>
                <div className="container">
                    {users.map((user) => (
                        <div className="card" key={user.id}>
                            <div className="image-container">
                                <img src={user.avatar_url} alt={user.login} />
                            </div>

                            <div className="content-container">
                                <div className="content">
                                    <h3>
                                        {user.login}<br />
                                        <span>{user.type}</span>
                                    </h3>
                                </div>
                                <div className="social">
                                    <a href={user.html_url} target='blank' rel='noopener noreferrer'>View Profile</a>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </section>
        </>
    )
}
export default InfiniteScroll

7️⃣ Styling with CSS 💅🎨

CSS is essential for creating engaging user interfaces and enhancing the look and feel of your components.

For styling the InfiniteScroll component, simply copy the provided CSS code and paste it into your InfiniteScroll.css file.

Feel free to customize and experiment with the styles to match your app's design preferences. 🖌️

➡️ In this tutorial, I am using nested CSS, a modern and in-demand trend that improves code readability and maintains cleaner structures, especially when working on component-based designs.

However, if you prefer, you can always stick to the traditional flat CSS syntax, which works just as well. The choice depends on your project needs and personal preference. ✨

.page-title {
  text-align: center;
  margin: 20px;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;

  .card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 200px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 15px;

    &:hover .content-container {
      bottom: 0;
      transition-delay: 0s;
      cursor: pointer;
    }

    &:hover .content-container .content h3 {
        opacity: 1;
        transform: translateY(0px);
    }

    &:hover .content-container .social {
        transform: translateY(0px);
        opacity: 1;
        border: 1px solid #867cc1;
        padding: 5px;
        border-radius: 10px;
    }

    .image-container {
        position: relative;
        height: 100%;
        width: 100%;

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }


    .content-container {
      position: absolute;
      bottom: -135px;
      width: 100%;
      height: 125px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      flex-direction: column;
      backdrop-filter: blur(15px);
      box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: bottom 0.5s;
      transition-delay: 0.3s;


      .content {
        h3 {
        color: #fff;
        text-transform: capitalize;
        letter-spacing: 2px;
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        margin: 10px 0 5px;
        line-height: 1.1em;
        transition: 0.5s;
        opacity: 0;
        transform: translateY(-20px);
        transition-delay: 0.5s;
        }

        span {
            font-size: 12px;
            font-weight: 300;
            text-transform: initial;
        }
      }


      .social {
            position: relative;
            bottom: 0x;
            display: flex;
            transform: translateY(40px);
            opacity: 0;
            transition-delay: 0.3s;

            a {
                color: #d3d3d3;
                font-size: 15px;
                text-decoration: none;
            }
        }
    }
  }
}

💡 Key Learnings

✅ useState – To manage data, page number, and loading state
✅ useEffect – To handle side-effects and lifecycle events like API calls and scroll listeners
✅ fetch API – To make HTTP requests to the GitHub API
✅ map() – To dynamically render user cards
✅ Scroll Event – To detect when the user reaches to the bottom of the page

🚀 Wrapping Up

In this tutorial, we explored how to build a smooth infinite scroll feature in React JS, pulling real-time data from the GitHub API and presenting it in an elegant card layout. 🃏✨

The focus was on keeping the code clean and beginner-friendly, sticking to the core React hooks like useState and useEffect without diving into complex patterns.

By following along, you now have a solid understanding of how state management, side effects, and event listeners can work together to create engaging, dynamic user experiences. 💡

If you made it this far, I’d love to hear your feedback or if there's anything you think I could have explained better.

Let’s keep learning together! 🚀

Happy Coding! 👨‍💻👩‍💻💖

🚀 Build a Smooth & Performant Image Carousel in React – A Beginner’s Guide

Bishal Thapaliya — Thu, 01 May 2025 16:29:37 +0000

If you’re learning React and want to create a clean, responsive, and performant image carousel, you’re in the right place! In this guide, we’ll walk through building a React image carousel with auto-sliding functionality, navigation buttons, and efficient state management.

Whether you're enhancing your portfolio or contributing to a real-world project, understanding how to build this component will sharpen your skills in React, state, effects, and component re-rendering.

Let’s dive in! 🧠

🧱 Step 1: Project Setup and Imports

Before we dive in, I’ll assume that you already have your React development environment set up and your project is running smoothly. If you haven't started yet, Vite is an excellent tool to begin with.

📝 Note: create-react-app (CRA) is now officially deprecated and no longer recommended for new projects.

Once your React project is ready, follow these steps:

Inside your src folder, create a new folder named components.
Inside the components folder, create a new file: 👉 ImageCarousel.jsx
Create an ImageCarousel.css file in the same folder to handle styling.
Now, open ImageCarousel.jsx and start with the following imports:

import React, { useEffect, useState } from 'react';
import './ImageCarousel.css';

🔍 The importance of this is:

We import

useState to track the current image index.
useEffect allows us to handle the auto-slide behavior.
Separating CSS into ImageCarousel.css helps keep JSX clean and your styles modular, promoting maintainability and scalability.

🖼️Step 2: Prepare the Image Dataset

We’re using random high-resolution images from Pexels — a free stock photo website. Always remember to credit such sources when using their content, even in demos or projects.

const images = [
    { id: 1, url: "https://images.pexels.com/photos/29089597/pexels-photo-29089597/free-photo-of-stunning-autumn-beach-sunset-with-waves.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
    { id: 2, url: "https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg"},
    { id: 3, url: "https://images.pexels.com/photos/2049422/pexels-photo-2049422.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
    { id: 4, url: "https://images.pexels.com/photos/325044/pexels-photo-325044.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
    { id: 5, url: "https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
];

Each image object has:

An id: Used as a unique key for React.
A url: The direct link to the image.

By using an array of objects, you keep your code clean and make it easy to render the images dynamically using .map() function later. This structure makes it easy to loop through and render dynamically, which is more scalable than hardcoding images into JSX.

💡 Tip: Separating data into its own file is a best practice and usually recommended; however, this example keeps it together for convenience.

🎯 Step 3: Managing the Current Image State

const [currentImageIndex, setCurrentImageIndex] = useState(0);

Understanding the relevance:

Core Functionality: The useState React hook is used to manage the currentImageIndex, which determines the visible image.
Initial State: Setting currentImageIndex to 0 ensures the first image is displayed upon loading.
Dynamic Control: The setCurrentImageIndex function, provided by useState, allows for changing the displayed image due to user navigation or auto-play functionality.

⬅️➡️ Step 4: Previous & Next Navigation Handlers

const handlePreviousClick = () => {
    setCurrentImageIndex(
        currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1
    );
};

const handleNextClick = () => {
    setCurrentImageIndex((currentImageIndex + 1) % images.length);
};

🧠 Let’s break this down in simple terms:

The Previous button checks:
👉 “Am I on the first image (index 0)? If yes, go to the last image. If not, go one step back.”

The Next button uses the modulo operator (%), which is a super helpful trick:
👉 (currentIndex + 1) % totalImages ensures that when you’re at the last image, it loops back to the first one automatically.

🏆 Why it’s a best practice:

Avoids if-else chains and long logic blocks.
Makes sure the index never goes out of bounds, avoiding crashes or undefined behavior.
Keeps the carousel experience circular and smooth, especially important for user engagement.

⏱️ Step 5: Auto-Sliding with useEffect

useEffect(() => {
    const timer = setTimeout(() => {
        handleNextClick();
    }, 5000);

    return () => clearTimeout(timer);
}, [currentImageIndex]);

Explanation

useEffect is a React hook that runs every time the currentImageIndex changes.

Inside it, we:

Start a timer using setTimeout that waits for 5 seconds (5000ms).
After 5 seconds, it calls handleNextClick() function, moving to the next image.
We also return a cleanup function (clearTimeout) to cancel the old timer if the image changes before the timeout finishes.

🧠 Why this approach?

Using setTimeout inside useEffect lets us create controlled, one-time delays, which is safer and easier to debug than using setInterval, which repeats endlessly.
Cleanup prevents memory leaks and ensures only one timer runs at a time.
Makes your carousel auto-slide lightweight and reliable without draining performance.

🧩 Step 6: Rendering the JSX

return (
    <section>
        <h2>React Image Carousel</h2>

        <div className="image-container">
            <button className="nav-button left" onClick={handlePreviousClick}>&lt;</button>

            {images.map((image, index) => (
                <img 
                    src={image.url} 
                    alt="images" 
                    className={ currentImageIndex === index ? 'block' : 'hidden'}
                    key={image.id} 
                />
            ))}

            <button className="nav-button right" onClick={handleNextClick}>&gt;</button>
        </div>
    </section>
)

👇 Key Takeaways:

Navigation buttons on either side call their respective functions.
images.map() dynamically renders each image.

We use a conditional class:

Only the current image is set to display: block.
All others are hidden with display: none.
We use key={image.id} to help React track which items changed, improving performance.

Complete code snippet

import React, { useEffect, useState } from 'react';
import './ImageCarousel.css';

// images from pexels.com
const images = [
    { id: 1, url: "https://images.pexels.com/photos/29089597/pexels-photo-29089597/free-photo-of-stunning-autumn-beach-sunset-with-waves.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
    { id: 2, url: "https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg"},
    { id: 3, url: "https://images.pexels.com/photos/2049422/pexels-photo-2049422.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
    { id: 4, url: "https://images.pexels.com/photos/325044/pexels-photo-325044.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
    { id: 5, url: "https://images.pexels.com/photos/1485894/pexels-photo-1485894.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"},
]

const ImageCarousel = () => {
    const [currentImageIndex, setCurrentImageIndex] = useState(0);

    const handlePreviousClick = () => {
        setCurrentImageIndex(
            currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1
        );
    };

    const handleNextClick = () => {
        setCurrentImageIndex((currentImageIndex + 1) % images.length);
    };

    useEffect(() => {
        const timer = setTimeout(() => {
            handleNextClick();
        }, 5000);

        return () => clearTimeout(timer);
    }, [currentImageIndex]);

    return (
        <section>
            <h2>React Image Carousel</h2>

            <div className="image-container">
                <button className="nav-button left" onClick={handlePreviousClick}>&lt;</button>

                {images.map((image, index) => (
                    <img 
                        src={image.url} 
                        alt="images" 
                        className={ currentImageIndex === index ? 'block' : 'hidden'}
                        key={image.id} 
                    />
                ))}

                <button className="nav-button right" onClick={handleNextClick}>&gt;</button>

            </div>
        </section>
    )
}

export default ImageCarousel

💅 Step 7: Styling with CSS

For effective web development and UI enhancement, CSS is indispensable. The CSS provided is a custom implementation, and you have the flexibility to define your own styles.

For styling your image carousel, take the provided CSS code and paste it into the ImageCarousel.css file.

section {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9fafb;
    text-align: center;
}

h2 {
  font-size: 2rem;
  color: #1f2937;
  margin-bottom: 1.5rem;
}

.image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  height: 500px;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  border-radius: 0.75rem;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

img.hidden {
  display: none;
}

img.block {
  display: block;
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  padding: 0;
  line-height: 1;
  z-index: 1;
}

.nav-button.left {
  left: 1rem;
}

.nav-button.right {
  right: 1rem;
}

.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

🚀 Final Thoughts & Optimizations

✅ Best Practices Recap:

Clean state management with useState.
Safe and performant effects with useEffect.
Modular, dynamic rendering using .map().
Looping logic via the modulo operator for easy circular navigation.

🙌 Conclusion

This easy-to-understand image carousel is a great way to learn:

React Hooks (useState, useEffect)
Conditional rendering
Auto-slide behavior
Clean, modular component architecture

Feel free to try it and experiment with your own styles and animations!

If you've had a chance to read this carefully, I'd appreciate it if you could mention anything I might have missed explaining.

Happy coding 😀

Build a Custom Clock Widget in Bonita UI Designer

Bishal Thapaliya — Wed, 09 Jun 2021 13:54:44 +0000

A web widget is a component that can be used as a feature on a web page or application. In this article, I will explain how to create a custom analog clock widget in Bonita UI Designer. You’ll see how to create an analog clock widget, change the appearance of the widget when you drag and drop it onto the whiteboard in Bonita UI Designer, and how to add some CSS and JavaScript to make the clock widget functional to the end-users.

Create a clock widget and define its appearance

Step 1: Get started

Go to the Bonita UI Designer home page.
Click on the Create button.
Choose Custom widget.
Give an appropriate name to the widget (eg. AnalogClock).
Click on Create.

The custom widget editor window will appear. A custom widget is composed of six sections: Description, Template, Controller, Assets, Required angular modules, and Properties. For this custom widget, we will make some modifications in the Description, Template, Controller, and Assets sections only.

Step 2: Remove default information

Remove everything from all the sections. We are going to create this widget from scratch.
Now, the widget editor window looks like this:

Step 3: Set the description

In the description section, describe the widget and its behavior. This description will be shown when we hover over the widget in the custom widget list.

In the Description section, write the basic information about the widget. For example;

“This is a custom analog clock widget built with UI Designer which is useful to display the current time.”

Step 4: Define the Template section

In this step, we define how the widget will be displayed in the UI Designer whiteboard. We are going to add some HTML markup to display a clock SVG image only when the "environment" variable is defined, i.e. we are in the UID whiteboard.

In Step 8 we will add more HTML markup to deal with how the widget should be rendered at runtime, i.e. when the page is actually displayed in an application.

In the template section, write the following HTML and CSS codes:

HTML

<div ng-if="environment">
    <svg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 798.000000 794.000000' preserveAspectRatio='xMidYMid meet' style='&#10;'>
        <g transform='translate(0.000000,794.000000) scale(0.100000,-0.100000)' fill='#000' stroke='none'>
            <path d='M3680 7869 c-478 -39 -951 -166 -1378 -370 -187 -89 -294 -150 -482 -275 -221 -146 -400 -293 -595 -489 -322 -321 -571 -672 -764 -1077 -507 -1060 -507 -2296 0 -3356 89 -187 150 -294 275 -482 146 -221 293 -400 489 -595 321 -322 672 -571 1077 -764 1060 -507 2296 -507 3356 0 187 89 294 150 482 275 221 146 400 293 595 489 322 321 571 672 764 1077 507 1060 507 2296 0 3356 -89 187 -150 294 -275 482 -146 221 -293 400 -489 595 -321 322 -672 571 -1077 764 -609 291 -1316 423 -1978 370z m730 -214 c715 -85 1386 -375 1947 -840 138 -115 343 -320 458 -458 468 -564 753 -1228 842 -1957 24 -202 24 -638 0 -840 -52 -429 -162 -803 -349 -1190 -465 -965 -1316 -1672 -2358 -1960 -148 -41 -380 -86 -550 -107 -202 -24 -638 -24 -840 0 -429 52 -803 162 -1190 349 -965 465 -1672 1316 -1960 2358 -41 148 -86 380 -107 550 -24 202 -24 638 0 840 52 429 162 803 349 1190 465 965 1316 1672 2358 1960 207 58 479 103 735 124 109 8 536 -3 665 -19z'/>
            <path d='M3942 7218 c-17 -17 -17 -259 0 -276 7 -7 24 -12 38 -12 45 0 50 15 50 150 0 135 -5 150 -50 150 -14 0 -31 -5 -38 -12z'/>
            <path d='M3724 5860 c-32 -13 -64 -59 -64 -92 0 -16 45 -390 100 -831 56 -441 100 -815 98 -832 -2 -20 -8 -29 -18 -27 -8 1 -638 280 -1398 618 -761 339 -1390 613 -1398 610 -8 -3 -14 -14 -14 -24 0 -16 244 -128 1373 -631 l1372 -611 -1211 0 c-1160 0 -1212 -1 -1227 -18 -22 -24 -21 -65 1 -85 17 -16 119 -17 1258 -17 l1239 0 17 -30 c19 -33 86 -70 128 -70 42 0 108 37 130 72 42 68 35 139 -20 201 -27 32 -28 34 -129 857 -56 454 -106 836 -110 850 -8 27 -64 70 -90 69 -9 0 -26 -4 -37 -9z m316 -1775 c16 -9 36 -29 45 -45 31 -60 10 -137 -45 -165 -110 -57 -222 55 -165 165 29 55 105 76 165 45z'/>
            <path d='M742 4018 c-15 -15 -15 -61 0 -76 8 -8 53 -12 138 -12 135 0 150 5 150 50 0 45 -15 50 -150 50 -85 0 -130 -4 -138 -12z'/>
            <path d='M6942 4018 c-7 -7 -12 -24 -12 -38 0 -45 15 -50 150 -50 135 0 150 5 150 50 0 45 -15 50 -150 50 -85 0 -130 -4 -138 -12z'/>
            <path d='M3942 1018 c-17 -17 -17 -259 0 -276 7 -7 24 -12 38 -12 45 0 50 15 50 150 0 85 -4 130 -12 138 -15 15 -61 15 -76 0z'/>
        </g>
    </svg>
</div>

Note: In the HTML code above, ng-if=”environment” detects that the widget is displayed within the UI Designer whiteboard. This defines how the widget is displayed to the developer within the UI Designer (as opposed to now the widget displayed to the user within a web page at runtime). Additionally, the <svg></svg> tag is used as an SVG image container to draw the paths that generate a clock image.

CSS

<style>
    svg {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50%;
        width: 50%;
        margin: 0 auto;
    }
</style>

Note: The CSS codes must be written inside the <style></style> tag.

Click on the Save button.
We have successfully created a new analog clock widget.

Step 5: Pro tip - Define the widget icon (optional)

It is not mandatory, but useful, to give a realistic look and feel to the analog clock widget icon when it appears on the list of a custom widget. To do this:

Open the “customAnalogClockWidget.json” file located inside the Bonita workspace (eg. /workspace/My project/web_widgets/customAnalogClock/customAnalogClock.json).
Copy and paste the given code below after the “template” line inside the “customAnalogClock.json”.

SVG icon for the widget

"icon": "<svg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 798.000000 794.000000' preserveAspectRatio='xMidYMid meet' style='&#10;'><g transform='translate(0.000000,794.000000) scale(0.100000,-0.100000)' fill='#fff' stroke='none'><path d='M3680 7869 c-478 -39 -951 -166 -1378 -370 -187 -89 -294 -150 -482 -275 -221 -146 -400 -293 -595 -489 -322 -321 -571 -672 -764 -1077 -507 -1060 -507 -2296 0 -3356 89 -187 150 -294 275 -482 146 -221 293 -400 489 -595 321 -322 672 -571 1077 -764 1060 -507 2296 -507 3356 0 187 89 294 150 482 275 221 146 400 293 595 489 322 321 571 672 764 1077 507 1060 507 2296 0 3356 -89 187 -150 294 -275 482 -146 221 -293 400 -489 595 -321 322 -672 571 -1077 764 -609 291 -1316 423 -1978 370z m730 -214 c715 -85 1386 -375 1947 -840 138 -115 343 -320 458 -458 468 -564 753 -1228 842 -1957 24 -202 24 -638 0 -840 -52 -429 -162 -803 -349 -1190 -465 -965 -1316 -1672 -2358 -1960 -148 -41 -380 -86 -550 -107 -202 -24 -638 -24 -840 0 -429 52 -803 162 -1190 349 -965 465 -1672 1316 -1960 2358 -41 148 -86 380 -107 550 -24 202 -24 638 0 840 52 429 162 803 349 1190 465 965 1316 1672 2358 1960 207 58 479 103 735 124 109 8 536 -3 665 -19z'/><path d='M3942 7218 c-17 -17 -17 -259 0 -276 7 -7 24 -12 38 -12 45 0 50 15 50 150 0 135 -5 150 -50 150 -14 0 -31 -5 -38 -12z'/><path d='M3724 5860 c-32 -13 -64 -59 -64 -92 0 -16 45 -390 100 -831 56 -441 100 -815 98 -832 -2 -20 -8 -29 -18 -27 -8 1 -638 280 -1398 618 -761 339 -1390 613 -1398 610 -8 -3 -14 -14 -14 -24 0 -16 244 -128 1373 -631 l1372 -611 -1211 0 c-1160 0 -1212 -1 -1227 -18 -22 -24 -21 -65 1 -85 17 -16 119 -17 1258 -17 l1239 0 17 -30 c19 -33 86 -70 128 -70 42 0 108 37 130 72 42 68 35 139 -20 201 -27 32 -28 34 -129 857 -56 454 -106 836 -110 850 -8 27 -64 70 -90 69 -9 0 -26 -4 -37 -9z m316 -1775 c16 -9 36 -29 45 -45 31 -60 10 -137 -45 -165 -110 -57 -222 55 -165 165 29 55 105 76 165 45z'/><path d='M742 4018 c-15 -15 -15 -61 0 -76 8 -8 53 -12 138 -12 135 0 150 5 150 50 0 45 -15 50 -150 50 -85 0 -130 -4 -138 -12z'/><path d='M6942 4018 c-7 -7 -12 -24 -12 -38 0 -45 15 -50 150 -50 135 0 150 5 150 50 0 45 -15 50 -150 50 -85 0 -130 -4 -138 -12z'/><path d='M3942 1018 c-17 -17 -17 -259 0 -276 7 -7 24 -12 38 -12 45 0 50 15 50 150 0 85 -4 130 -12 138 -15 15 -61 15 -76 0z'/></g></svg>",

Note: The SVG code generates a clock icon for this widget. Make sure to keep the comma (,) at the end of the line.

Save the file.

We have now successfully changed the icon of the widget. Now, it's time to use this custom widget inside an application page and check if the clock widget has the correct icon and the display when it is placed onto the whiteboard.

Step 6: Check the widget

Go to the Bonita UI Designer home page.
Click on the Create button.
Choose Application page.
Name the page (eg. ClockPage).
Click on Create.
The ClockPage editor window will open.
Now, in the page editor window, click on the Custom widgets tab on the left.
The AnalogClock widget appears in the list and has a clock image as an icon.
Drag and drop the clock widget onto the whiteboard.

Output

The widget on the whiteboard will look like this:

We have completed the definition of the custom analog clock widget, and now we are going to make the clock widget functional to end-users.

Make the widget functional to the end-users

The implementation steps that follow are based on a large device screen resolution (i.e., screen width >= 1200px). You can change the responsiveness of the page by clicking on thedevice screen size icon that appears on the top right corner in Bonita UI Designer.

Step 7: Edit the widget

Click and select the custom AnalogClock widget on the whiteboard.
Click on the “...” button next to the widget name on the right.
Click on Edit.
The widget editor window will appear.

Step 8: Define the Template

In the template section in the widget editor window, write the HTML for the widget that will be displayed to the users at runtime. Write the following HTML code after the closing of <div ng-if=”environment”></div>

HTML

<div class="clockFace" ng-if="!environment">
    <div class="hour">
        <div class="hourHand"></div>
    </div>
    <div class="minute">
        <div class="minuteHand"></div>
    </div>
    <div class="second">
        <div class="secondHand"></div>
    </div>
</div>

Note: In the HTML code above, ng-if=”!environment” detects that the widget is to be displayed to the user within a web page at runtime.

Step 9: Add Assets

The Assets section is defined to import the resources (image, CSS, JS) required for the widget. For the clock widget, we will add only an image and a CSS file.

Clock face image

Download the clock image from this link here. (image source: Google)
Go to the AnalogClock widget editor window in the Bonita UI Designer and click on the Add button in the Assets section to upload the image file.

Note: This clock face image file will be used as a background-image property in the CSS clock class. You can use the image URL directly or download and add as an asset.

CSS

Create a CSS file somewhere on your computer (e.g., D:\analog-clock-widget.css) and copy the following CSS code into it:

.clock-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.clockFace {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
background-image: url(../img/clock-face.png);
    background-color: #0A4561;
    background-size: cover;
    border: 3px solid #fff;
    border-radius: 50%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 
             inset 0 10px 10px rgba(0, 0, 0, 0.3);
}

.clockFace:before {
    content: '';
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    z-index: 10000;
}
.clockFace .hour,
.clockFace .minute,
.clockFace .second {
    position: absolute;
}

.clockFace .hour,
.hourHand {
    height: 90px;
}

.clockFace .minute,
.minuteHand {
    height: 105px;
}

.clockFace .second,
.secondHand {
    height: 120px;
}

.hourHand,
.minuteHand,
.secondHand {
    display: flex;
    justify-content: center;
}

.hourHand:before {
    content: '';
    width: 6px;
    height: 50px;
    background: #B52A2A;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}

.minuteHand:before {
    content: '';
    width: 4px;
    height: 60px;
    background: #fff;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}

.secondHand:before {
    content: '';
    width: 2px;
    height: 80px;
    background: #fff;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

Note: Some CSS properties such as height, width, background-color, position, etc. can be defined as you wish. In the CSS code above, “.hr:before”, “mn-before”, and “.sc:before” are defined to create hour hand, minute hand, and second hand respectively.

Save the CSS file and close it.
Go to the AnalogClock widget editor window in the Bonita UI Designer and click on the Add button in the Assets section to upload this CSS file.
As we have added all the required resources, now the Assets section will look like this:

Step 10: Set the Controller

The Controller section is dedicated to implementing the javascript required to make the widget functional.

In the Controller section, write the following javascript code.

function ($scope) {
    setInterval(() => {
    const degree = 6;
    let day = new Date();
    let hour = day.getHours() * 30;
    let minute = day.getMinutes() * degree;
    let second = day.getSeconds() * degree;

document.getElementsByClassName('hourHand').item(0).style.transform = `rotate(${(hour)+(minute/12)}deg)`;
document.getElementsByClassName('minuteHand').item(0).style.transform = `rotate(${minute}deg)`;
document.getElementsByClassName('secondHand').item(0).style.transform = `rotate(${second}deg)`;
    });
}

Note: All the javascript code needs to be wrapped inside the function ($scope){} method that augments the AngularJS scope and exposes functions that we can use in the template.

In the code above, we are defining a variable called degree and assigning the value 6 to it, and using the variable to define the minute and second. It is used to rotate the minute hand and the second hand by 6 degrees. Similarly, the hour hand changes its position by 30 degrees when the hour changes.

Now the controller section will look like this:
Click on the Save button to save all the modifications applied to the widget.

Add the custom analog clock to a page

Step 11: Add and set the widget properties

Go back to the Bonita UI Designer home page.
Click on ClockPage (the page we created previously).
Clean the page if there is already a widget on it.
Drag and drop a Title widget onto the whiteboard and set the properties as shown below:
Text = Analog Clock Widget
Title level = Level 2
Alignment = Center
Drag and drop a container widget below the title widget and set the property Width = 4.
Click on the Custom widgets tab on the left.
The AnalogClock widget appears in the list, and the icon is a the clock that we defined in the pro-tip step.
Drag and drop the AnalogClock widget next to the container widget and set the properties:
Width = 4
CSS classes = clock-container
Drag and drop a container widget next to the clock widget and set the property Width = 4.
Save the page and click on Preview to see the result.

Output

When you click on the preview button, you will see a clock displaying the current time on your browser.

Congratulations, you have successfully built your own analog clock widget!

I will explain in another upcoming article how we can define some properties of the clock widget that will allow us to use the same widget to display the time based on different time zones.

I would love to know what other kinds of custom widgets you would like to implement with Bonita UI Designer. Please share your tips and examples.

Stay tuned. Have fun with Bonita!

Build a Custom Search Widget in Bonita UI Designer

Bishal Thapaliya — Thu, 15 Oct 2020 09:24:43 +0000

As a web developer, I love to provide users with good UX. In my opinion, this means, at the minimum, to have consistent pages, layouts, and consistent widgets within pages. When I can’t find the right widget in the toolkit provided, I create my own to be sure I can build a UX I can be proud of. As a side benefit, having widgets tailored to my needs saves my time and effort and allows me to be more efficient at my work.

In this article, I am going to explain how to create a custom search widget in Bonita UI Designer. This article has 2 parts. The first part explains how to create a search widget and change the appearance of the widget when we drag and drop it onto the whiteboard in Bonita UI Designer.

The second part explains how to add some CSS to make the search widget functional to the end-users.

Part I: Define the appearance of your custom widget

Step 1

Go to the Bonita UI Designer home page.
Click on the Create button.
Choose Custom widget in the Type section.
Give a proper name to the widget (eg. searchWidget).
Click on Create.

The custom widget editor window will appear. A custom widget is composed of six different sections: Description, Template, Controller, Assets, Required angular modules, and Properties. As we are creating a custom widget, we will make some modifications in the Template, Assets, and Properties sections.

Step 2

Remove everything from all the sections. We are going to create our widget from scratch.
Now, our widget editor window looks like this:

Define the Properties section

Step 3: Property 1: Value

Click on the Create button.
A "Create new property" dialog box will appear.
Set the properties:
- Name = value
- Label = Value
- Treat value as = Bidirectional bond
Click on Create.

Note: The value property saves the value we type in our widget.

Step 4: Property 2: Placeholder

Click on the Create button.
A "Create new property" dialog box will appear.
Set the properties:
- Name = placeholder
- Label = Placeholder
- Treat value as = Interpolation
Click on Create.

Note: This property sets a custom placeholder for our widget.

The Template section

In the template section, we will write some internal CSS as well as HTML codes, which means the code applies to change the look and feel of a widget that appears on the whiteboard.

Step 5

In the template section, write the following HTML and internal CSS codes:

HTML

<div ng-if="environment">
    <input class="search-input" />
    <span class="icon-container"><i class="glyphicon glyphicon-search"></i></span>
</div>

Note: in the HTML code above, ng-if="environment" detects that the widget is displayed within the UI Designer whiteboard. It allows us to define how the widget is displayed to the developer within the UI Designer (as opposed to now the widget displayed to the user within a web page at runtime).

CSS

<style>
.search-input {
    padding: 0 15px;
    height: 35px;
    border: 1px solid rgba(11,67,97,1);
    border-radius: 35px;
    outline: none;
    color: rgba(11,67,97,1);
    width: 100%;
    opacity: 1;
    background: #fff;
}

.icon-container {
    position: absolute;
    right: 17px;
    padding: 9px;
    height: 35px;
    width: 35px;
    border: 1px solid rgba(11,67,97,1);
    border-radius: 50%;
    z-index: 5;
    background: rgba(11,67,97,1);
}

.icon-container .glyphicon {
    font-size: 16px;
    color: #fff;
}
</style>

Note: All the CSS codes must be written inside the tag. Since Bootstrap is embedded by default in the UI Designer, we can easily use the bootstrap glyphicons.

Now, the widget editor looks like this:

Click on the Save button.
Bravo!!! We have created our search widget successfully.

Step 6 (optional)

Pro tip - Defining the widget icon

Since Bonita will ultimately provide an easy way for Bonitasoft users to define the widget icon as per their need, Step 6 is not mandatory. Nevertheless, to give a real look and feel to the custom search widget icon, you can try this pro tip:

Open the “customSearchWidget.json” file located inside your Bonita workspace (eg. /workspace/My project/web_widgets/customSearchWidget/customSearchWidget.json).
Copy and paste the given code below after the “template” line inside the “customSearchWidget.json”.

"icon" : "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#fff'><g transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)' fill='#fff' stroke='none'><path d='M1905 4794 c-512 -79 -967 -381 -1234 -817 -297 -485 -342 -1053 -124 -1570 160 -381 476 -715 848 -897 485 -237 1024 -237 1510 0 55 27 134 72 177 100 42 27 80 512 85 50 4 0 310 -301 678 -670 l670 -670 142 142 143 143 -667 667 c-665 665 -666 666 -650 690 9 13 48 66 87 118 124 169 241 432 284 641 79 384 26 776 -153 1127 -261 512 -751 865 -1312 947 -130 18 -361 18 -484 -1z m403 -195 c349 -38 647 -171 895 -399 390 -360 562 -928 445 -1469 -119 -555 -550 -1003 -1095 -1142 -169 -43 -265 -52 -463 -46 -307 10 -554 88 -801 252 -459 306 -709 829 -667 1399 58 801 700 1401 1511 1415 43 0 121 -4 175 -10z'/> </g> </svg>",

The SVG code generates a magnifying glass icon for our search widget.
Save the file and close it.

Hurray!!!!!!!! We have now successfully changed an icon of the widget. Now, it's time to use our custom widget inside an application page.

Step 7

Go to the Bonita UI Designer home page.
Click on the Create button.
Choose Application page.
Give a name to the page (eg. searchApplication).
Click on Create.
Now, in the page editor window, click on the Custom widgets tab on the left.
We can see now that the searchWidget appears on the list and has a magnifying glass as an icon.
Drag and drop the search widget onto the whiteboard.

Output

The widget on the whiteboard will be shown the same as in the image below;

We have completed the definition of the custom search widget, and now we are going to make the search widget functional to end-users.

The implementation steps that follow are based on a large device screen resolution (i.e., screen width >= 1200px). You can change the responsiveness of the page by clicking on the different device screen size icon that appears on the top right corner in Bonita UI Designer.

Part II: Implement the custom search widget controller

Step 8

Click and select the custom search widget on the whiteboard.
Click on the “...” button next to the widget name on the right.
Click on Edit.

The widget editor window will appear.

Step 9

In the Template section after the end of <div ng-if="environment"></div> tag, write the following HTML code:

HTML

<div ng-if="!environment" class="search-input-container">
    <input 
        type= " text "
        ng-model= " properties.value "
        placeholder= " {{properties.placeholder | uiTranslate}} "
        onfocus= " this.value= '' " 
    />
    <div class="search-icon"></div>
</div>
```


**Note:** In the HTML code above, `ng-if="!environment"` detects that the widget displayed to the user within a web page at runtime. Additionally, `ng-modal="properties.value"` stores the value entered in the widget, and `placeholder="{{properties.placeholder}}"` defines the placeholder for the widget.

- Now the Template section looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5k6vjvao52a70xi9iuj.png)

#### Step 10 ####
- Create a CSS file somewhere on your computer (e.g., D:\search-wideget.css) and copy the following CSS code into it:

*CSS*


```
.search-input-container {
    width: 100%;
    height: auto;
}

.search-input-container .search-icon {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 35px;
    height: 35px;
    background: rgba(11,67,97,1);
    border-radius: 50%;
    transition: all 1s;
    z-index: 5;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.4);
}

.search-input-container .search-icon:hover {
    cursor: pointer;
}

.search-input-container .search-icon::before {
    content: "";
    position: absolute;
    margin: auto;
    width: 8px;
    height: 3px;
    background: #fff;
    top: 12px;
    right: 0;
    bottom: 0;
    left: 12px;
    transform: rotate(45deg);
    transition: all .5s;
}

.search-input-container .search-icon::after {
    content: "";
    position: absolute;
    margin: auto;
    height: 15px;
    width: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    top: -5px;
    right: 0;
    bottom: 0;
    left: -5px;
    transition: all .5s
}

.search-input-container input {
    position: absolute;
    margin: auto;
    padding: 0 60px 0 15px;
    width: 35px;
    height: 35px;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(11,67,97,1);
    border-radius: 35px;
    background: #fff;
    outline: none;
    color: rgba(11,67,97,1);
    z-index: 6;
    opacity: 0;
    transition: all 1s;
}

.search-input-container input:hover {
    cursor: pointer;
}

.search-input-container input:focus {
    width: 90%;
    opacity: 1;
    cursor: text;
}

.search-input-container input:focus ~ .search-icon {
    right: calc(-90% + 35px);
    background: rgba(11,67,97,1);
    z-index: 6;
}

.search-input-container input:focus ~ .search-icon::before {
    width: 15px;
    top: 0;
    left: 0;
}

.search-input-container input:focus ~ .search-icon::after {
    height: 3px;
    width: 15px;
    border: none;
    border-radius: 0;
    transform: rotate(-45deg);
    background: #fff;
    top: 0;
    right: 0;
    left: 0;
}
```


**Note:** You can define the vertical and horizontal positioning properties such as; top, bottom, left, and right as you wish. In the CSS code above, `“.search-input-container .search-icon::before”` and `“.search-input-container .search-icon::after”` creates a magnifying glass icon. Similarly, `“.search-input-container input:focus ~ .search-icon::before”` and `“.search-input-container input:focus ~ .search-icon::after”` creates an “X” icon. 

- Now, save the CSS file and close it.

#### Step 11 ####
- In the widget editor window in the Bonita UI Designer, click on the *Add* button in the **Assets** section and upload the CSS file we created in the previous step.

![Step 11 image](https://dev-to-uploads.s3.amazonaws.com/i/qvqe8umk990soweiqonp.png)
- After uploading the CSS file, the Assets section should show the file in the list as shown below:

![Step 11-2 image](https://dev-to-uploads.s3.amazonaws.com/i/yf43d7zqsppqkiextlja.png)

- Click on the *Save* button to save all the modifications applied to the widget.

#### Step 12 ####
- Go back to the Bonita UI Designer home page.
- Click on *searchApplication* (the page we created in part 1).

![Step 12 image](https://dev-to-uploads.s3.amazonaws.com/i/x9gfugdsuts52deffdhv.png)
- Clean the page if there is already a widget on it.

#### Step 13 ####
- Drag and drop a title widget to the whiteboard and set the properties:
 - Width = 12
 - Text = Custom Search Widget
 - Title level = Level 3
 - Alignment = center

![Step 13 image](https://dev-to-uploads.s3.amazonaws.com/i/xmy4d41n55yig0dno2ln.png)

#### Step 14 ####
- Drag and drop a container widget below the title and set the width property = 4.

![Step 14 image](https://dev-to-uploads.s3.amazonaws.com/i/d9bdippdo2whkcs1qj7h.png)

#### Step 15 ####
- Click on the *Custom widget* tab on the left.
- Drag and drop the searchWidget next to the empty container and set the properties:
 - Width = 4
 - Placeholder = Search text goes here...

![Step 15 image](https://dev-to-uploads.s3.amazonaws.com/i/hyha7u0jneog9l3yq86q.png)

#### Step 16 ####
- Drag and drop another container widget right to the search widget and set the width = 4.
- Finally, save the page and see the preview.

![Step 16 image](https://dev-to-uploads.s3.amazonaws.com/i/obuos7ikrz6t047cxr8u.png)

#### Output ####
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ntfuzzkgeb44b8q2x0q.gif)

![Minnions with a girl image](https://dev-to-uploads.s3.amazonaws.com/i/tpmt80r0dhbljci9jatc.gif)

I would love to know what other kinds of custom widgets you would like to implement with Bonita UI Designer. Please share your tips and examples.

Have fun with **Bonita!**

Build Your First Custom Widget in Bonita UI Designer

Bishal Thapaliya — Wed, 30 Sep 2020 13:24:45 +0000

A web developer always wants to have just the right widget handy - and sometimes they have to create their own when they can’t find just the right one among the widgets provided. This article is to help new Bonita users especially, but is for anyone who wants to learn how to create a custom widget in Bonita UI Designer. In this article, I am going to explain how to create a custom Hello World! widget to use on our application page.

Prerequisite

Bonita Studio must be installed on your computer to launch the Bonita UI Designer. You can download Bonita Studio from here.

Step 1

In the Bonita UI Designer home page, click on the Create button.
Choose Custom widget in the Type section.
Define a name for the widget (eg. HelloWorldWidget).
Click on Create.
The editor window for the widget “HelloWorldWidget” will appear.

A custom widget is composed of six different sections: Description, Template, Controller, Assets, Required angular modules, and Properties. Since we are creating a simple custom widget to display a “Hello World!” text, we will make some modifications in the Template section only.

Step 2: Edit

First, remove everything from all the sections.
Now, our widget editor window looks like this:

Step 3: Create a template for the widget

In the template section, we write the HTML for the widget we want to build and it will be shown to the end-users when we see the preview.

In the template section, write the following HTML code;

HTML

<h2>Hello World!</h2>

Note: The <h2> tag creates a second-level heading in the HTML document.

Click on the Save button.

Step 4: Use the HelloWorldWidget into an application page

In the Bonita UI Designer homepage, click on the Create button.
Choose the Application page in the Type section.
Define a name for the page (eg. HelloWorld).
Click on Create.
A page editor window will open.
Click on the custom widgets tab on the left.
We can see now that HelloWorldWidget appears in the list.
Now, drag and drop the HelloWorld widget onto the whiteboard.
Set the width property to 12 columns.

Click on the Save button.
Click on the Preview button to see the output.

Output

We can now see Hello World! with a second-level heading format in the preview.

Now that you can create a simple custom Hello World! widget easily. In my other article, I have explained how to create a custom search widget, how to change the look and feel of a custom widget that appears on the whiteboard, and a pro tip on how to change the custom widget icon when it appears on the list. The custom search widget will be the same as shown in the image below. Click here to learn about building a custom search widget in Bonita UI Designer.

Stay tuned. Have fun with Bonita!

HOW TO CREATE A TYPING ANIMATION WITH CSS IN BONITA UI DESIGNER

Bishal Thapaliya — Mon, 27 Jul 2020 17:37:32 +0000

CSS allows us to add animation without using JavaScript to the HTML elements to change incrementally from one style to another as many times as we want. To add an animation to the elements, we need to specify the @keyframes. In this post, I will explain how to add a typing animation effect to the text-widget in Bonita UI Designer using CSS. (If you are using something other than the Bonita UI Designer for your interface design, you may write your own HTML and define the CSS classes for all the elements so that you can use the same CSS codes for this effect.)

Step 1

First, create a new application page in Bonita UI Designer.

Step 2

Drag and drop a container widget in the blank area on the page.
Set the properties:
- Width = 12
- CSS classes = main-container
Open style.css and write the following code and save it:

.main-container {
    display: inline-block;
    background-image: url('../img/background.png');
    background-size: cover;
    height: 100vh;
}

Note: for the background image, I have added an image file as an asset called "background.png". You can add a background image as per your requirement.

Step 3

Drag and drop a title widget inside the “main-container”.
Set the properties:
- Width = 12
- Text = Digital process automation for a competitive edge
- Title level = Level 1
- Alignment = left
Open style.css and write the following code and save it:

.main-container h1 {
    display: inline-block;
    margin-top: 15%;
    margin-left: 5%;
    font-size: 3vw;
    color: #cdd026;
}

Note: you can change the CSS properties as per your background image.

Step 4

Drag and drop a container widget below the title widget inside the “main-container”.
Set the properties:
- Width = 12
- CSS = typing-text-container
Open style.css and write the following code and save it:

.typing-text-container {
    width: 650px;
    margin-left: 5%;
}

Step 5

Drag and drop a text widget inside the “typing-text-container”.
Set the properties:
- Width = 12
- CSS = typing-text
- Text = Re-invent your business processes with Bonita platform
- Alignment = left
Open style.css and write the following code and save it:

.typing-text p{
    border-right: 2px solid #337ab7;
    font-size: 170%;
    white-space: nowrap;
    overflow: hidden;
    animation: typewriter 10s steps(54) forwards,
                blinkingCursor .8s step-end infinite ;
    animation-iteration-count: infinite;
    color: #fff;
}

Note: In the CSS, we need to define the properties for animation such as name, duration, delay, direction, iteration-count, etc. Similarly, the value 54 for steps in the animation property defines up to the number of characters (including white spaces) we want to add to an animation.

Step 6

Now we need to specify the keyframes for the animations such as typewriter and blinkingCursor.
Open style.css and write the following code and save it:

@keyframes typewriter {
        0% {width: 0;}
        30% {width: 95%;}
        80% {width: 95%;}
        90% {width: 0;}
        100% {width: 0;}
 }

@keyframes blinkingCursor {
        from, to {
                border-right-color: transparent;
        }
        50% {
                border-right-color: #337ab7;
        }
        to {
                border-right-color: transparent;
        }
 }

Output

Now, save the page and when we click on the preview we will see an output as shown in the picture below.

You can change the font color for the title and the text widgets to make it more readable against the background image.

I would love to know what other CSS animation effects you would like to implement with Bonita UI Designer. Please share your tips and examples.

Have fun with Bonita!

How to create a circle clip-path hover effect in Bonita UI Designer

Bishal Thapaliya — Tue, 21 Jul 2020 13:57:58 +0000

The CSS clip-path property allows us to set the area of an element we want to display. This cool property is very handy to create complex shapes in CSS, such as a circle, polygon, ellipse, star, pentagon, hexagon - and many more. In this post, I am going to show you how to create a cool circle clip-path effect on a mouse hover using Bonita UI Designer. Although this step by step is specific to the Bonita UI Designer, you can use the CSS for this effect in any user interface designer. (If you are using something other than the Bonita UI Designer for your interface design, you may write your own HTML and define the CSS classes for all the elements so that you can use the same CSS codes for this effect.)

Steps to follow

First of all, create a new application page in Bonita UI Designer.

Step 1

Drag and drop a container widget into the blank area on the page.
Set these properties:
- Width = 3
- CSS classes = card-container
Go to Assets > style.css (Click on the pencil icon to edit CSS)
Write the following code and save it.

.card-container {
    position: relative;
    width: 280px;
    height: 380px;
    margin: 20px 15px;
    box-sizing: border-box;
    overflow: hidden;
    }

Step 2

Drag and drop another container widget inside the “card-container”.
Set the properties:
- Width = 12
- CSS classes = image-container
Open style.css and write the following code:

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(380px at center 100px);
    -webkit-clip-path: circle(380px at center 100px);
    transition: 0.6s;
    transition-delay: 0.6s;
    padding: 0;
}
.card-container:hover .image-container {
    clip-path: circle(90px at center 100px);
    -webkit-clip-path: circle(90px at center 100px); 
    transition-delay: 0s;
}

Step 3

Go to Assets and add all the images you want to use on this page. Here, I am using some superhero images as examples and if you would like to use the same images, get it from here.
Now, drag and drop the image widget inside the “image-container”.
Set the properties as given below;
- Width = 12
- Source Type = Asset
- Asset Name = captain.jpg (asset name is an image file name which we added as an asset).
Open style.css and write the following code:

.image-container img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Step 4

Drag and drop another container widget just below the “image-container” inside “card-container”.
Set the properties:
- Width = 12
- CSS classes = card-content
Open style.css and write the following code:

.card-content {
    position: absolute; 
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55%;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
}

Step 5

Drag and drop a title widget inside the “card-content”.
Set the properties:
- Width = 12
- Text = Captain America
- Title level = Level 3
- Alignment = center

Step 6

Drag and drop a text widget inside the “card-content”.
Set the properties:
- Width = 12
- CSS classes = description
- Text = Captain America is an American superhero film based on the Marvel Comics character. Alignment = center
Open style.css and write the following code:

.card-content .description {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 55px;
}

Step 7

Drag and drop a Link widget just below the Text widget (description) inside “card-content”.
Set the properties:
- Width = 12
- Text = Read more
- Alignment = center
- Style = primary
Open style.css and write the following code:

.card-content h3,
.card-content .description,
.card-content a {
    opacity: 0;
    transition: 0.5s;
    transform: translateY(20px);
}
.card-container:hover .card-content h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
    margin: auto;
}
.card-container:hover .card-content .description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s
}
.card-container:hover .card-content a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s
}

Output

Now, you can repeat the steps above to create more and more cards as per your requirement.

I would love to know what other CSS clip-path examples you would like to implement with Bonita UI Designer. Please share your tips and examples.

Have fun with Bonita!

12 simple steps to build a neumorphic login page with Bonita UI Designer

Bishal Thapaliya — Fri, 22 May 2020 14:20:14 +0000

The interface style known as neumorphic (a combination of skeumorphic and realistic design) has been gaining in popularity, and I think we'll see it being used more and more in 2020.

One important aspect of neumorphism is about selecting the proper color palettes, and 3 shades of the same color are required for this.

i) Light Shadow should be done by using a light color. For example, rgba(255,255,255,1),

ii) The Main background and Element color should be in the mid-range. For example, rgba(235,245,252,1) for the background and element,

iii) Dark Shadow should be done by using a dark color. For instance, rgba(0,0,0,0.1).

Below are the 12 simple steps I followed to implement a login page using the Bonita UI Designer, inspired by https://neumorphism.io/.

First, create a new application page in UI Designer.

Step: 1
In the UI Designer whiteboard, drag & drop a container widget, give the CSS class name as “logo-box” and set the column width to 6. We will put our company logo in this container.

Step: 2
Inside the logo-box, place the logo and title as you want. Here I am using an image widget for the logo and a text widget for the company’s name. I have added the Bonitasoft logo in UI Designer as an image asset.

Now, set the properties as given below for the image widget:

Width = 12;
Source Type = Asset;
Asset Name = bonitasoftLogo.png

You can download the Bonitasoft logo from this link.

Set the properties as given below for the text widget:

Width = 12;
CSS classes = bonita;
Text = Bonita<span class=”soft”>soft</span> ;
Alignment = center

Note: Since the company logo and the title can be different, I suggest you write your own CSS for this part.

Step: 3
In the whiteboard outside the logo-box, drag & drop a form container widget next to the logo-box, give the CSS class name as “login-form” and set the column width to 6. We will use this form container to implement our login form.

Step: 4
Inside the login-form, create a title using title widget and set the properties as:

Width = 12; Text = Login; Title level = Level 2; Alignment = center

Step: 5
Below the title, drag & drop a new container, give the CSS class name as “input-container” and set the column width to 12.

Step: 6
Inside the input-container, drag & drop an input widget and set the properties as:

Width = 12; CSS classes = input-widget; Label = Username;
Placeholder = username@address.com (you can put whatever email address you want to);
Type = Email

Step: 7
Below the username, drag & drop another input widget and set the properties as:

Width = 12; CSS classes = input-widget; Label = Password
Placeholder = ……… ; Type = Password

Step: 8
Below the password widget, drag & drop a button widget and set the properties as:

Width = 12; CSS classes = input-widget; Label = Sign in;
Alignment = center;
Style = default;

Step: 9
Now, outside the input-container, drag & drop a container, give the CSS class name as “forget-password” and set the column width to 12.

Step: 10
Inside the forget-password container, drag & drop a text widget and set the properties as:

Width = 6; Text = Forgot password?; Alignment = right

Step: 11
Just to the right to the text widget, drag & drop a Link widget and set the properties as:

Widget = 6; Text = Click here; Alignment = left; Style = link

Step: 12
Go to Assets > style.css and write the CSS below:

.logo-box {
    height: 100vh;
    position: relative;
    text-align: center; 
    background: rgba(235,245,252,1);
} 
.logo-box img {
   width: 40%;
   margin: 0 auto;
   padding: 15% 0 0;
}
.bonita{
    font-size: 4em;
    color: #0A4561;
}
.bonita .soft {
    color: #B52A2A;
}
.login-form {
    height: 100vh;
    position: relative;
    padding: 40px 40px 60px;
    background: rgba(235,245,252,1);
    text-align: center;
}
.input-container {
    text-align: left;
    padding: 40px 40px 60px;
    margin-top: 40px;
    box-shadow: -5px -5px 10px  rgba(255,255,255,0.8),
                 5px 5px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.login-form h2 {
    color: #0A4561;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.input-container .input-widget {
    margin-top: 20px;
}
.input-container .input-widget label {
    display: block;
    color: #868686;
    margin-bottom: 5px;
    font-size: 18px;
}
.input-container .input-widget input,
.input-container .input-widget button {
    width: 100%;
    height: 50px;
    background: rgba(235,245,252,1);
    border: none;
    outline: none;
    border-radius: 40px;
    padding: 5px 15px;
    font-size: 18px;
    color: #32a3b1;
    box-shadow: inset -2px -2px   6px rgba(255,255,255,1),
                inset 2px 2px 6px rgba(0,0,0,0.1);
}
.input-container .input-widget input::placeholder {
    color: #bdcada;
    font-size: 18px;
}

.input-container .input-widget button {
    margin-top: 20px;
    box-shadow: -2px -2px 6px rgba(255,255,255,1),
          2px 2px 6px rgba(0,0,0,0.1);
}
.input-container .input-widget button:active{
    color: #006c9c;
    margin-top: 20px;
    box-shadow: inset -2px -2px 6px rgba(255,255,255,1),
  inset 2px 2px 6px rgba(0,0,0,0.1);
    outline: none;
}
.forget-password .component {
    margin-top: 30px;
    padding-right: 0;
    color: #0A4561;
}
.forget-password a {
    padding: 0;
    color: #B52A2A;
    text-decoration: none;
}

Finally, save the page and click on the preview. We will see a beautiful neumorphic login page as shown below;

Note: For a responsive page, Bonita Subscription users can define the size of the elements based on different screen sizes by clicking screen size icons to the top-right corner in the UI Designer.

Similarly, Bonita Community users can create a responsive login page by following the tutorial here.

I would love to know if you are into neumorphism as well. What are the colors you use? Please share your tips and examples.

And remember, have fun with Bonita!