# Web Apps

Create multi-page web applications with custom layouts and content.

## Overview

Web Apps allow you to build custom multi-page applications with unique URLs (slugs). Each app can have multiple pages with different content types including maps, datasets, tables, and charts.

## Creating Web Apps

### Access

- Navigate to Web Apps management (`web_apps.php`)
- Only admins can create and manage web apps
- Apps are accessible via unique slug URLs

### App Structure

Web apps consist of:
- **App Configuration**: Name, slug, description, active status
- **Pages**: Multiple pages with different content
- **Widgets**: Content widgets on each page
- **Navigation**: Page navigation system

## App Configuration

### Basic Settings

- **Name**: Display name of the app
- **Slug**: URL-friendly identifier (e.g., `my-app`)
- **Description**: App description
- **Active Status**: Enable/disable app

### Access

Apps are accessed via:
```
/app.php?slug={app_slug}
```

Or with specific page:
```
/app.php?slug={app_slug}&page={page_id}
```

## Pages

### Page Types

Each page can contain different content types:

- **Map**: Interactive map display
- **Dataset**: Dataset viewer
- **Table**: Data table
- **Chart**: Data visualization

### Page Configuration

- **Title**: Page title
- **ID**: Unique page identifier
- **Content Type**: Map, dataset, table, or chart
- **Widgets**: Content widgets on the page

## Widgets

### Map Widget

Interactive map with layers.

**Configuration**:
- Dataset selection
- Basemap selection
- Layer styling
- Initial extent

### Dataset Widget

Dataset viewer widget.

**Configuration**:
- Dataset selection
- View mode (data/map/chart)
- Display options

### Table Widget

Data table display.

**Configuration**:
- Dataset selection
- Columns to display
- Sorting and filtering
- Pagination

### Chart Widget

Data visualization.

**Configuration**:
- Dataset selection
- Chart type
- X/Y axis configuration
- Styling options

## Building Web Apps

### Step 1: Create App

1. Navigate to Web Apps
2. Click "New Web App"
3. Enter name and slug
4. Set description
5. Save app

### Step 2: Add Pages

1. Open app editor
2. Add new page
3. Configure page settings
4. Select content type
5. Save page

### Step 3: Configure Widgets

1. Select page
2. Add widgets
3. Configure widget settings
4. Link to datasets
5. Save configuration

### Step 4: Publish

1. Set app to active
2. Test app via slug URL
3. Share app URL
4. Monitor usage

## Use Cases

### Public Applications

- Public data portals
- Community applications
- Information systems
- Data exploration tools

### Internal Tools

- Internal dashboards
- Workflow applications
- Data entry systems
- Reporting tools

### Custom Solutions

- Client-specific applications
- Project-specific tools
- Specialized interfaces
- Branded applications

## App Management

### Editing

- Edit app configuration
- Modify pages
- Update widgets
- Change permissions

### Publishing

- Activate/deactivate apps
- Set public/private access
- Configure permissions
- Monitor usage

### Maintenance

- Update content
- Refresh data
- Modify layouts
- Add new pages

## Permissions

### Access Control

- **Public**: Accessible without authentication
- **Private**: Requires authentication
- **Group-based**: Access by user groups
- **User-specific**: Individual user access

### Editing Permissions

- Only admins can create/edit apps
- App creators can edit their apps
- Permissions can be delegated

## Example Web App

A typical web app might include:

1. **Home Page**: Overview with map and key statistics
2. **Data Page**: Dataset browser and viewer
3. **Analysis Page**: Analysis tools and results
4. **About Page**: Information and documentation

## API Access

Web apps can be accessed programmatically:

```bash
# Access app
GET /app.php?slug={app_slug}

# Access specific page
GET /app.php?slug={app_slug}&page={page_id}
```

## Best Practices

### Design

- Keep navigation simple
- Use consistent layouts
- Optimize for mobile
- Test across browsers

### Content

- Organize content logically
- Use clear page titles
- Provide navigation aids
- Include help text

### Performance

- Optimize widget loading
- Use efficient queries
- Cache when appropriate
- Monitor performance

## Related Documentation

- [Dashboard](dashboard.md)
- [Accordion Stories](accordion.md)
- [UI Components](../ui/index.md)