Automate OutSystems Application Screenshots with FreshShots: Keep Low-Code Documentation Current

Jan 15, 2025

OutSystems enables rapid application development, but documenting these fast-changing applications is a nightmare. Applications evolve daily, but screenshots in documentation lag behind by weeks. FreshShots automatically captures and updates screenshots so your OutSystems documentation stays current with your application releases.

The OutSystems Documentation Challenge

OutSystems’ rapid development cycles create unique documentation challenges:

Frequent releases: Applications change multiple times per week
Manual screenshot process: Screen capture → crop → upload → repeat
Documentation debt: Screenshots outdated within days of creation
Cross-environment complexity: Different screenshots for Dev/Test/Prod
Team coordination: Multiple developers = inconsistent documentation

How FreshShots Transforms OutSystems Documentation

FreshShots integrates seamlessly with OutSystems development workflows:

Automatic capture: Screenshots generate from live applications
Environment-aware: Separate workflows for each OutSystems environment
Release integration: Trigger updates during OutSystems deployments
Consistent quality: Same viewport and styling across all screenshots
Global accessibility: CDN-hosted images accessible anywhere

Complete Setup Guide: FreshShots + OutSystems

Step 1: Prepare Your OutSystems Application

Add data-freshshots-id attributes to key UI elements in your OutSystems screens:

In Expression Widgets:

<div data-freshshots-id="customer-dashboard" class="dashboard-container">

In Rich Widgets:

<section data-freshshots-id="order-management" class="orders-panel">

For Reactive Web Applications:

<!-- Main screen content -->
<div data-freshshots-id="app-homepage" class="home-screen">
  <!-- Your OutSystems content -->
</div>

<!-- Data grids and lists -->
<div data-freshshots-id="customer-list" class="table-records">
  <!-- TableRecords widget content -->
</div>

<!-- Forms and inputs -->
<form data-freshshots-id="user-registration" class="form-container">
  <!-- Input widgets -->
</form>

Step 2: Create Environment-Specific Workflows

Development Environment Workflow:

[
  {
    "action": "visit_page",
    "url": "https://dev-yourapp.outsystemscloud.com/YourApp/"
  },
  {
    "action": "take_screenshot",
    "selector": "app-homepage",
    "save_screenshot_to": "dev-homepage.png",
    "viewport_size": { "width": 1366, "height": 768 }
  },
  {
    "action": "visit_page",
    "url": "https://dev-yourapp.outsystemscloud.com/YourApp/customers"
  },
  {
    "action": "take_screenshot",
    "selector": "customer-list",
    "save_screenshot_to": "dev-customer-management.png"
  }
]

Production Environment Workflow:

[
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/"
  },
  {
    "action": "login_outsystems",
    "username": "[email protected]",
    "password": "secure_password"
  },
  {
    "action": "take_screenshot",
    "selector": "customer-dashboard",
    "save_screenshot_to": "prod-dashboard.png"
  },
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/orders"
  },
  {
    "action": "take_screenshot",
    "selector": "order-management",
    "save_screenshot_to": "prod-order-screen.png"
  }
]

Step 3: Document Different User Roles

OutSystems applications often have role-based access. Capture screenshots for each user type:

Admin User Documentation:

[
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/login"
  },
  {
    "action": "type_input",
    "selector": "Input_Email",
    "input_value": "[email protected]"
  },
  {
    "action": "type_input",
    "selector": "Input_Password",
    "input_value": "admin_password"
  },
  {
    "action": "click_element",
    "selector": "Button_Login"
  },
  {
    "action": "take_screenshot",
    "selector": "admin-dashboard",
    "save_screenshot_to": "admin-view.png"
  },
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/admin/users"
  },
  {
    "action": "take_screenshot",
    "selector": "user-management",
    "save_screenshot_to": "admin-user-management.png"
  }
]

End User Documentation:

[
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/login"
  },
  {
    "action": "type_input",
    "selector": "Input_Email",
    "input_value": "[email protected]"
  },
  {
    "action": "type_input",
    "selector": "Input_Password", 
    "input_value": "user_password"
  },
  {
    "action": "click_element",
    "selector": "Button_Login"
  },
  {
    "action": "take_screenshot",
    "selector": "user-dashboard",
    "save_screenshot_to": "enduser-view.png"
  }
]

Step 4: Integrate with OutSystems Deployment Pipeline

LifeTime Integration:

Add FreshShots to your OutSystems deployment process:

# In your CI/CD pipeline (Azure DevOps, Jenkins, etc.)
- name: Deploy to OutSystems
  run: |
    # Your OutSystems deployment commands
    outsystems-deploy --app YourApp --env Production
    
- name: Update Documentation Screenshots
  run: |
    # Wait for deployment to complete
    sleep 60
    
    # Trigger FreshShots workflows
    curl -X POST https://api.freshshots.io/v1/run/123 \
      -H "x-api-key: ${{ secrets.FRESHSHOTS_API_KEY }}" \
      -H "Content-Type: application/json" \
      -d '{"environment": "production"}'

OutSystems Forge Component Integration:

Create a custom component to trigger FreshShots:

// In your OutSystems application
public void TriggerDocumentationUpdate()
{
    var httpClient = new HttpClient();
    httpClient.DefaultRequestHeaders.Add("x-api-key", Site.Properties.FreshShotsApiKey);
    
    var response = httpClient.PostAsync(
        "https://api.freshshots.io/v1/run/" + Site.Properties.WorkflowId,
        new StringContent("{}", Encoding.UTF8, "application/json")
    ).Result;
    
    if (response.IsSuccessStatusCode)
    {
        // Log success or trigger notification
        Logger.Debug("Documentation screenshots updated successfully");
    }
}

Advanced OutSystems Documentation Techniques

Mobile App Screenshots

For OutSystems mobile applications:

{
  "action": "take_screenshot",
  "selector": "mobile-app-container",
  "save_screenshot_to": "mobile-dashboard.png",
  "viewport_size": { "width": 375, "height": 812 },
  "device_type": "mobile",
  "image_zoom": 2
}

Progressive Web App (PWA) Documentation

Capture PWA-specific features:

[
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/"
  },
  {
    "action": "simulate_offline",
    "enabled": true
  },
  {
    "action": "take_screenshot",
    "selector": "offline-message",
    "save_screenshot_to": "pwa-offline-state.png"
  },
  {
    "action": "simulate_offline",
    "enabled": false
  }
]

Form Validation Documentation

Document OutSystems form validation:

[
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/register"
  },
  {
    "action": "click_element",
    "selector": "Button_Submit"
  },
  {
    "action": "take_screenshot",
    "selector": "registration-form",
    "save_screenshot_to": "form-validation-errors.png"
  },
  {
    "action": "type_input",
    "selector": "Input_Email",
    "input_value": "[email protected]"
  },
  {
    "action": "type_input",
    "selector": "Input_Password",
    "input_value": "ValidPassword123"
  },
  {
    "action": "take_screenshot",
    "selector": "registration-form",
    "save_screenshot_to": "form-valid-state.png"
  }
]

Documentation Organization Strategies

Environment-Based Structure

# Application Documentation

## Development Environment
![Dev Dashboard](https://cdn.freshshots.io/1/dev-homepage.png)
*Development environment for testing new features*

## Staging Environment  
![Staging Dashboard](https://cdn.freshshots.io/1/staging-homepage.png)
*Pre-production testing environment*

## Production Environment
![Production Dashboard](https://cdn.freshshots.io/1/prod-homepage.png)
*Live application used by end users*

User Role Documentation

# User Guides by Role

## Administrator Guide
![Admin Dashboard](https://cdn.freshshots.io/1/admin-view.png)

### User Management
![User Management](https://cdn.freshshots.io/1/admin-user-management.png)

## End User Guide  
![User Dashboard](https://cdn.freshshots.io/1/enduser-view.png)

### Daily Workflows
![User Workflow](https://cdn.freshshots.io/1/user-daily-tasks.png)

Feature-Based Documentation

# Feature Documentation

## Customer Management
![Customer List](https://cdn.freshshots.io/1/customer-management.png)

### Adding New Customers
![Add Customer Form](https://cdn.freshshots.io/1/add-customer-form.png)

### Customer Details
![Customer Profile](https://cdn.freshshots.io/1/customer-details.png)

OutSystems-Specific Best Practices

Screen Naming Conventions

Follow OutSystems naming patterns in your screenshots:

Screen names: CustomerList_Screenshot.png
Action flows: CreateCustomer_Flow.png
Popup screens: CustomerDetail_Popup.png
Mobile screens: Mobile_CustomerList.png

Document specific OutSystems widgets:

{
  "action": "take_screenshot",
  "selector": "TableRecords_Customers",
  "save_screenshot_to": "tablerecords-widget.png",
  "highlight_element": true,
  "padding": 20
}

Theme and Style Guide Documentation

Capture your OutSystems theme implementation:

[
  {
    "action": "visit_page",
    "url": "https://yourapp.outsystemscloud.com/YourApp/styleguide"
  },
  {
    "action": "take_screenshot",
    "selector": "color-palette",
    "save_screenshot_to": "theme-colors.png"
  },
  {
    "action": "take_screenshot",
    "selector": "button-styles", 
    "save_screenshot_to": "theme-buttons.png"
  }
]

Integration with OutSystems Development Tools

Service Studio Integration

Add documentation reminders in Service Studio:

// Add as a comment in your screen logic
/*
DOCUMENTATION: 
Screenshot automatically captured by FreshShots
URL: https://cdn.freshshots.io/1/customer-dashboard.png
Last Updated: Automated via deployment pipeline
*/

Integration Studio Components

Create reusable components for documentation:

public class DocumentationHelper
{
    public static void TriggerScreenshotUpdate(string screenName)
    {
        // Trigger FreshShots workflow for specific screen
        var workflowId = GetWorkflowId(screenName);
        TriggerFreshShotsWorkflow(workflowId);
    }
    
    private static void TriggerFreshShotsWorkflow(string workflowId)
    {
        // Implementation to call FreshShots API
    }
}

Measuring Documentation ROI

Before FreshShots (OutSystems)

Documentation time: 8-12 hours per sprint
Accuracy: 40% of screenshots outdated
Developer overhead: 20% time on documentation
User training: Frequent confusion due to UI mismatches

After FreshShots (OutSystems)

Documentation time: 1 hour initial setup, then automated
Accuracy: 100% current screenshots
Developer focus: 95% time on feature development
User satisfaction: Seamless experience with current documentation

Troubleshooting OutSystems + FreshShots

Authentication Issues:

Verify OutSystems user credentials
Check session timeout settings
Ensure proper role assignments

Screen Loading Problems:

Add wait conditions for AJAX-heavy screens
Increase page load timeouts
Handle OutSystems loading indicators

Mobile App Challenges:

Use appropriate device viewports
Account for OutSystems mobile navigation
Handle app-specific gestures

Getting Started Checklist

Sign up for FreshShots (free tier available)
Add data attributes to 5-10 key OutSystems screens
Create workflows for each environment (Dev/Test/Prod)
Test screenshot capture on a sample screen
Integrate with deployment pipeline
Update documentation with CDN URLs
Train development team on new workflow
Set up monitoring for screenshot freshness

OutSystems-Specific Features

Reactive vs. Traditional Web

FreshShots works with both OutSystems application types:

Reactive Web: Modern responsive applications
Traditional Web: Classic server-side applications
Mobile Apps: Native and PWA applications

Multi-Tenant Applications

Capture screenshots across different tenants:

{
  "action": "visit_page",
  "url": "https://tenant1.yourapp.outsystemscloud.com/YourApp/",
  "tenant_context": "tenant1"
}

Custom CSS Integration

Document custom styling:

{
  "action": "take_screenshot",
  "selector": "custom-component",
  "save_screenshot_to": "custom-styles.png",
  "apply_css": ".highlight { border: 2px solid #007bff; }"
}

Ready to automate your OutSystems documentation? Start your free FreshShots account and eliminate manual screenshot management from your development workflow.

Need help integrating FreshShots with your specific OutSystems environment? Contact our team for enterprise support and custom setup assistance.