PostGIS
Mobile
QGIS
MapBender
GeoServer
GeoNode
GeoNetwork
Novella
Solutions
249 lines
4.3 KiB
Markdown
249 lines
4.3 KiB
Markdown
# 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)
|
|
|
