Examples Gallery

Examples Gallery

Real-world examples to help you get started quickly.

Table of Contents

• Simple Notification
• User Information Form
• Multi-Page Wizard
• Status Dashboard
• Data Report
• Interactive Menu
• Progress Tracker
• Chart Dashboard

---

Simple Notification

A basic notification card with an icon and message:

New-AdaptiveCard {
    New-CardColumnSet -Columns {
        New-CardColumn -Width "Auto" -Items {
            New-CardIcon -Icon "CheckmarkCircle" -Size 48 -Color "Good"
        }
        New-CardColumn -Width "Stretch" -Items {
            New-CardTextBlock -Text "Success!" -Size Large -Weight Bolder -Color Good
            New-CardTextBlock -Text "Your changes have been saved successfully." -Wrap
        }
    }
    
    New-CardActionSet -Actions {
        New-CardActionSubmit -Title "OK" -Style Positive
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 400

---

User Information Form

A complete form with validation:

$response = New-AdaptiveCard {
    New-CardTextBlock -Text "User Registration" -Size ExtraLarge -Weight Bolder
    New-CardTextBlock -Text "Please fill in your information" -Spacing Small
    
    New-CardInputText -Id "firstName" -Label "First Name" -IsRequired -Placeholder "Enter your first name"
    New-CardInputText -Id "lastName" -Label "Last Name" -IsRequired -Placeholder "Enter your last name"
    New-CardInputText -Id "email" -Label "Email" -Style Email -IsRequired -Placeholder "user@example.com"
    New-CardInputText -Id "phone" -Label "Phone" -Style Tel -Placeholder "+1 (555) 123-4567"
    
    New-CardInputDate -Id "birthDate" -Label "Date of Birth"
    
    New-CardInputToggle -Id "newsletter" -Title "Subscribe to newsletter" -Value "true"
    
    New-CardActionSet -Actions {
        New-CardActionSubmit -Title "Register" -Style Positive
        New-CardActionSubmit -Title "Cancel" -Style Default
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 500

if ($response) {
    Write-Host "Registration submitted:"
    Write-Host "Name: $($response.firstName) $($response.lastName)"
    Write-Host "Email: $($response.email)"
    Write-Host "Phone: $($response.phone)"
    Write-Host "Birth Date: $($response.birthDate)"
    Write-Host "Newsletter: $($response.newsletter)"
}

---

Multi-Page Wizard

A wizard with multiple pages and navigation:

$response = New-AdaptiveCard {
    # Page 1: Welcome
    New-CardContainer -Id "Page1" -Items {
        New-CardTextBlock -Text "Setup Wizard" -Size ExtraLarge -Weight Bolder
        New-CardTextBlock -Text "Step 1 of 3: Basic Information" -Size Medium -Color Accent
        
        New-CardInputText -Id "appName" -Label "Application Name" -IsRequired
        New-CardInputText -Id "appDescription" -Label "Description" -IsMultiline
        
        New-CardActionSet -Actions {
            New-CardActionToggleVisibility -Title "Next →" -TargetElements "Page1", "Page2" -Style Positive
        }
    }
    
    # Page 2: Configuration
    New-CardContainer -Id "Page2" -Hidden -Items {
        New-CardTextBlock -Text "Setup Wizard" -Size ExtraLarge -Weight Bolder
        New-CardTextBlock -Text "Step 2 of 3: Configuration" -Size Medium -Color Accent
        
        New-CardInputChoiceSet -Id "environment" -Label "Environment" -Style Compact -Choices @(
            New-CardChoice -Title "Development" -Value "dev"
            New-CardChoice -Title "Testing" -Value "test"
            New-CardChoice -Title "Production" -Value "prod"
        )
        
        New-CardInputToggle -Id "enableLogging" -Title "Enable logging" -Value "true"
        
        New-CardActionSet -Actions {
            New-CardActionToggleVisibility -Title "← Back" -TargetElements "Page1", "Page2" -Style Default
            New-CardActionToggleVisibility -Title "Next →" -TargetElements "Page2", "Page3" -Style Positive
        }
    }
    
    # Page 3: Review
    New-CardContainer -Id "Page3" -Hidden -Items {
        New-CardTextBlock -Text "Setup Wizard" -Size ExtraLarge -Weight Bolder
        New-CardTextBlock -Text "Step 3 of 3: Review and Confirm" -Size Medium -Color Accent
        
        New-CardTextBlock -Text "Please review your settings:" -Wrap
        
        New-CardActionSet -Actions {
            New-CardActionToggleVisibility -Title "← Back" -TargetElements "Page2", "Page3" -Style Default
            New-CardActionSubmit -Title "Complete Setup" -Style Positive
        }
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 600

---

Status Dashboard

System status with colored indicators:

New-AdaptiveCard {
    New-CardTextBlock -Text "System Status" -Size ExtraLarge -Weight Bolder
    New-CardTextBlock -Text "Last updated: $(Get-Date -Format 'yyyy-MM-dd HH:mm')" -Size Small -IsSubtle
    
    # API Status
    New-CardContainer -Style Good -Items {
        New-CardColumnSet -Columns {
            New-CardColumn -Width "Auto" -Items {
                New-CardIcon -Icon "CheckmarkCircle" -Size 32 -Color "Good"
            }
            New-CardColumn -Width "Stretch" -Items {
                New-CardTextBlock -Text "API Service" -Weight Bolder
                New-CardTextBlock -Text "All systems operational" -Size Small
            }
        }
    } -Separator
    
    # Database Status
    New-CardContainer -Style Warning -Items {
        New-CardColumnSet -Columns {
            New-CardColumn -Width "Auto" -Items {
                New-CardIcon -Icon "Warning" -Size 32 -Color "Warning"
            }
            New-CardColumn -Width "Stretch" -Items {
                New-CardTextBlock -Text "Database" -Weight Bolder
                New-CardTextBlock -Text "Performance degradation detected" -Size Small
            }
        }
    } -Separator
    
    # Storage Status
    New-CardContainer -Style Attention -Items {
        New-CardColumnSet -Columns {
            New-CardColumn -Width "Auto" -Items {
                New-CardIcon -Icon "ErrorCircle" -Size 32 -Color "Attention"
            }
            New-CardColumn -Width "Stretch" -Items {
                New-CardTextBlock -Text "Storage" -Weight Bolder
                New-CardTextBlock -Text "Critical: 95% capacity reached" -Size Small
            }
        }
    } -Separator
    
    New-CardActionSet -Actions {
        New-CardActionOpenUrl -Title "View Details" -Url "https://status.example.com"
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 500

---

Data Report

Displaying tabular data with charts:

New-AdaptiveCard {
    New-CardTextBlock -Text "Monthly Sales Report" -Size ExtraLarge -Weight Bolder
    New-CardTextBlock -Text "October 2025" -Size Medium -Color Accent
    
    # Summary Cards
    New-CardColumnSet -Columns {
        New-CardColumn -Items {
            New-CardTextBlock -Text "Total Sales" -Weight Bolder
            New-CardTextBlock -Text "$125,430" -Size ExtraLarge -Color Good
        }
        New-CardColumn -Items {
            New-CardTextBlock -Text "New Customers" -Weight Bolder
            New-CardTextBlock -Text "342" -Size ExtraLarge -Color Accent
        }
        New-CardColumn -Items {
            New-CardTextBlock -Text "Growth" -Weight Bolder
            New-CardTextBlock -Text "+23%" -Size ExtraLarge -Color Good
        }
    } -Separator
    
    # Chart
    New-CardChartDonut -ChartData @{
        labels = @("Product A", "Product B", "Product C", "Product D")
        datasets = @(
            @{
                data = @(45, 25, 20, 10)
                backgroundColor = @("#0078D4", "#00CC6A", "#FFB900", "#E74856")
            }
        )
    } -ChartTitle "Sales by Product" -Height 200 -Separator
    
    # Data Table
    New-CardFactSet -Facts @{
        "Best Seller" = "Product A"
        "Top Region" = "North America"
        "Avg Order Value" = "$367"
        "Conversion Rate" = "3.2%"
    } -Separator
    
    New-CardActionSet -Actions {
        New-CardActionOpenUrl -Title "Full Report" -Url "https://reports.example.com"
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 700

---

Interactive Menu

A menu with actions and sub-menus:

New-AdaptiveCard {
    New-CardTextBlock -Text "Server Management" -Size ExtraLarge -Weight Bolder
    New-CardTextBlock -Text "Select an action:" -Wrap
    
    New-CardActionSet -Actions {
        New-CardActionSubmit -Title "🔄 Restart Server" -Data @{ action = "restart" }
        New-CardActionSubmit -Title "🛑 Stop Server" -Data @{ action = "stop" }
        New-CardActionSubmit -Title "▶️ Start Server" -Data @{ action = "start" }
    } -Separator
    
    New-CardActionSet -Actions {
        New-CardActionSubmit -Title "📊 View Logs" -Data @{ action = "logs" }
        New-CardActionSubmit -Title "📈 Performance Metrics" -Data @{ action = "metrics" }
    } -Separator
    
    New-CardActionSet -Actions {
        New-CardActionSubmit -Title "⚙️ Settings" -Data @{ action = "settings" }
        New-CardActionSubmit -Title "❌ Cancel" -Data @{ action = "cancel" } -Style Default
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 400

---

Progress Tracker

Display progress with multiple steps:

New-AdaptiveCard {
    New-CardTextBlock -Text "Deployment Progress" -Size ExtraLarge -Weight Bolder
    
    # Step 1: Complete
    New-CardContainer -Style Good -Items {
        New-CardColumnSet -Columns {
            New-CardColumn -Width "Auto" -Items {
                New-CardIcon -Icon "CheckmarkCircle" -Size 24 -Color "Good"
            }
            New-CardColumn -Width "Stretch" -Items {
                New-CardTextBlock -Text "Build" -Weight Bolder
                New-CardTextBlock -Text "Completed successfully" -Size Small -Color Good
            }
        }
        New-CardProgressBar -Title "Build progress" -Value 100
    }
    
    # Step 2: In Progress
    New-CardContainer -Style Accent -Items {
        New-CardColumnSet -Columns {
            New-CardColumn -Width "Auto" -Items {
                New-CardIcon -Icon "CircleRing" -Size 24 -Color "Accent"
            }
            New-CardColumn -Width "Stretch" -Items {
                New-CardTextBlock -Text "Tests" -Weight Bolder
                New-CardTextBlock -Text "Running unit tests..." -Size Small
            }
        }
        New-CardProgressBar -Title "Test progress" -Value 67
    } -Separator
    
    # Step 3: Pending
    New-CardContainer -Items {
        New-CardColumnSet -Columns {
            New-CardColumn -Width "Auto" -Items {
                New-CardIcon -Icon "Circle" -Size 24 -Color "Default"
            }
            New-CardColumn -Width "Stretch" -Items {
                New-CardTextBlock -Text "Deploy" -Weight Bolder
                New-CardTextBlock -Text "Waiting..." -Size Small -IsSubtle
            }
        }
        New-CardProgressBar -Title "Deploy progress" -Value 0
    } -Separator
    
    New-CardActionSet -Actions {
        New-CardActionSubmit -Title "Cancel Deployment"
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 500

---

Chart Dashboard

Multiple chart types in one card:

New-AdaptiveCard {
    New-CardTextBlock -Text "Analytics Dashboard" -Size ExtraLarge -Weight Bolder
    
    # Donut Chart
    New-CardChartDonut -ChartData @{
        labels = @("Desktop", "Mobile", "Tablet")
        datasets = @(@{
            data = @(60, 30, 10)
            backgroundColor = @("#0078D4", "#00CC6A", "#FFB900")
        })
    } -ChartTitle "Traffic by Device" -Height 200 -Separator
    
    # Horizontal Bar Chart
    New-CardChartHorizontalBar -ChartData @{
        labels = @("Page A", "Page B", "Page C", "Page D")
        datasets = @(@{
            label = "Views"
            data = @(1200, 900, 600, 300)
            backgroundColor = "#0078D4"
        })
    } -ChartTitle "Top Pages" -Height 200 -Separator
    
    # Gauge Chart
    New-CardChartGauge -Value 78 -Max 100 -ChartTitle "Performance Score" -Height 150 -Separator
    
    New-CardActionSet -Actions {
        New-CardActionOpenUrl -Title "View Full Dashboard" -Url "https://analytics.example.com"
    }
} | Get-CardResponse -ViewMethod EdgeApp -WindowWidth 700 -AutoSize

---

More Examples

For more examples and templates, check:

• Module's Examples/ directory
• Advanced Topics for complex scenarios
• Function Reference for all available functions

---

← Back to Core Concepts | Next: Function Reference →