Back to ForgeZap
Documentation

Advanced Components

Explore advanced components and features for building sophisticated applications. These components provide powerful functionality for complex use cases.

Advanced Features

Advanced components offer specialized functionality for complex applications. They provide more control and customization options for experienced users.

Advanced Component Types

Custom Code

Embed custom HTML, CSS, and JavaScript code.

  • • HTML markup
  • • CSS styling
  • • JavaScript functionality
  • • External library integration

Component Groups

Group multiple components for organized layouts.

  • • Container grouping
  • • Shared properties
  • • Group-level styling
  • • Nested component organization

Dynamic Components

Create components that change based on data or conditions.

  • • Conditional rendering
  • • Data-driven components
  • • Dynamic styling
  • • State-based changes

Reusable Templates

Create and reuse component templates across applications.

  • • Template creation
  • • Parameter configuration
  • • Template sharing
  • • Version management

Integration Components

Connect to external services and APIs.

  • • Third-party integrations
  • • API connectors
  • • Webhook handlers
  • • Service adapters

Custom Code Component

HTML, CSS, and JavaScript

Embed custom code to extend functionality beyond built-in components:

HTML Structure

html
<!-- Custom HTML structure -->
<div class="custom-widget">
  <h3>{{title}}</h3>
  <div class="content">
    <p>{{description}}</p>
    <button onclick="handleClick()">Action</button>
  </div>
</div>

CSS Styling

css
/* Custom CSS styling */
.custom-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.custom-widget h3 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.custom-widget button {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

JavaScript Functionality

javascript
// Custom JavaScript functionality
function handleClick() {
  // Access ForgeZap data and functions
  const userData = window.forgezap.getData('user');
  const workflowData = window.forgezap.getWorkflowData();
  
  // Perform custom logic
  if (userData && userData.isAuthenticated) {
    // Trigger ForgeZap workflow
    window.forgezap.triggerWorkflow('custom-action', {
      userId: userData.id,
      timestamp: new Date().toISOString()
    });
  }
}

// Initialize component
document.addEventListener('DOMContentLoaded', function() {
  console.log('Custom component initialized');
});

Integration with ForgeZap

Custom code components can interact with ForgeZap's data and workflows:

Access application data and variables
Trigger workflows and actions
Update component properties
Handle user interactions

Component Groups

Organizing Components

Group related components together for better organization and management:

Group Configuration

json
// Component Group Configuration
{
  "type": "group",
  "name": "user-profile-section",
  "components": [
    "user-avatar",
    "user-name",
    "user-email",
    "user-actions"
  ],
  "properties": {
    "layout": "flex",
    "direction": "column",
    "spacing": "16px",
    "background": "#f8f9fa",
    "padding": "20px",
    "borderRadius": "8px"
  }
}

Shared Properties

json
// Apply properties to all components in group
{
  "groupProperties": {
    "fontFamily": "Inter, sans-serif",
    "color": "#333333",
    "margin": "0 0 8px 0"
  },
  "individualOverrides": {
    "user-name": {
      "fontSize": "24px",
      "fontWeight": "bold"
    }
  }
}

Group Benefits

Organization

  • • Logical component grouping
  • • Easier navigation and editing
  • • Reduced visual clutter
  • • Better component hierarchy

Efficiency

  • • Bulk property updates
  • • Shared styling and behavior
  • • Group-level interactions
  • • Template reusability

Dynamic Components

Conditional Rendering

Show or hide components based on data conditions:

Visibility Conditions

json
// Show component based on user role
{
  "component": "admin-panel",
  "visible": "{{user.role === 'admin'}}"
}

// Show component based on data
{
  "component": "order-summary",
  "visible": "{{order.items.length > 0}}"
}

// Show component based on multiple conditions
{
  "component": "premium-features",
  "visible": "{{user.subscription === 'premium' && user.status === 'active'}}"
}

Dynamic Content

json
// Change content based on data
{
  "component": "status-badge",
  "text": "{{order.status === 'completed' ? 'Completed' : 'In Progress'}}",
  "color": "{{order.status === 'completed' ? 'green' : 'blue'}}"
}

// Dynamic styling
{
  "component": "progress-bar",
  "width": "{{(completed / total) * 100}}%",
  "color": "{{(completed / total) > 0.8 ? 'green' : 'blue'}}"
}

Data-Driven Components

Create components that adapt based on data:

Dynamic form fields based on user type
Conditional navigation menus
Adaptive dashboard layouts
Context-sensitive help content

Reusable Templates

Creating Templates

Build reusable component templates for consistent design and functionality:

Template Definition

json
// Product Card Template
{
  "name": "product-card",
  "description": "Reusable product card component",
  "parameters": {
    "product": {
      "type": "object",
      "required": true,
      "description": "Product data object"
    },
    "showPrice": {
      "type": "boolean",
      "default": true,
      "description": "Whether to show price"
    },
    "onClick": {
      "type": "function",
      "description": "Click handler function"
    }
  },
  "components": [
    {
      "type": "image",
      "src": "{{product.image}}",
      "alt": "{{product.name}}"
    },
    {
      "type": "text",
      "content": "{{product.name}}"
    },
    {
      "type": "text",
      "content": "{{product.description}}",
      "visible": "{{product.description}}"
    },
    {
      "type": "text",
      "content": "{{formatCurrency(product.price)}}",
      "visible": "{{showPrice}}"
    }
  ]
}

Template Usage

json
// Using the product card template
{
  "type": "template",
  "template": "product-card",
  "parameters": {
    "product": "{{currentProduct}}",
    "showPrice": true,
    "onClick": "handleProductClick"
  }
}

Template Benefits

Consistent design across applications
Faster development with reusable components
Easy updates and maintenance
Team collaboration and sharing

Integration Components

External Service Integration

Connect to external services and APIs with specialized components:

Payment Integration

  • • Stripe payment forms
  • • PayPal integration
  • • Payment status tracking
  • • Receipt generation

Communication

  • • Email service integration
  • • SMS notifications
  • • Chat widget embedding
  • • Social media feeds

API Connectors

Pre-built connectors for popular services:

CRM system integration (Salesforce, HubSpot)
Analytics platforms (Google Analytics, Mixpanel)
Cloud storage (AWS S3, Google Drive)
Database connections (PostgreSQL, MongoDB)

Best Practices

Custom Code Security

When using custom code components, ensure proper input validation and sanitization. Avoid exposing sensitive data in client-side code.

Performance Optimization

Optimize custom code for performance. Use efficient algorithms, minimize DOM manipulations, and consider lazy loading for heavy components.

Maintenance

Document your custom components and templates thoroughly. Use clear naming conventions and provide examples for team members.

Next Steps

App Builder Guide

Learn how to use advanced components in the builder

Workflows

Integrate advanced components with workflows