Application Designer Guide

Build interactive, data-driven applications with drag-and-drop components, version control, and multi-source data integration.

Table of Contents

1. Overview
2. Creating an Application
3. The Application Editor
4. Components & Data Sources
5. Version Management
6. Permissions & Menu Organization
7. Execution Logs
8. Report Generation
9. Mobile Support
10. Best Practices

1. Overview

The Application Designer allows you to create interactive, data-driven applications without writing code. Applications can display data from lookup tables, scripts, and ODBC queries in customizable layouts with tables, charts, forms, and report panels.

Key Features:

• Visual Builder — Drag-and-drop component layout with tabs and filters
• Multiple Data Sources — Lookup tables, Script Engine, and ODBC queries
• Version Control — Full version history with rollback capability
• Inline Reports — Render document templates and generate PDFs directly
• Execution Logging — Track all component executions with performance metrics
• Permission-Based Access — Control who can view each application
• Mobile Ready — Toggle mobile visibility per application
• Embeddable — Embed apps in other pages via iframe with viewer HTML fragments

2. Creating an Application

Step 1: Navigate to Application Designer

Go to DataMagik → Application Designer in the main menu.

Step 2: Click "New Application"

Click the New Application button to create a new app.

Step 3: Configure Settings

Step 4: Open the Editor

After creation, click Edit to open the visual layout editor.

3. The Application Editor

The editor provides a visual interface for building your application layout.

Layout Structure

Applications are built from these structural elements:

• Components — Individual UI elements (data tables, charts, forms, cards, report panels)
• Tabs — Organize components into multiple views
• Filters — Add interactive controls for data filtering

Component Types

Configuring a Component

Each component requires a data source configuration:

4. Components & Data Sources

Lookup Table Data Source

Connect a component to a User Defined Table for fast key-value lookups.

• Client-Side Mode — Loads all data at once, filtering/sorting handled in browser
• Server-Side Mode — Paginated with server-side search, sorting, and filtering

Server-side pagination supports:

• Page and page size controls
• Full-text search across all fields
• Column sorting (ascending/descending)
• Parameter-based filtering
• Total count for pagination UI

Script Data Source

Use a DataMagik script to fetch, transform, and return data for the component. The script receives filter parameters in the context object.

ODBC Query Data Source

Execute saved SQL queries against external databases. Supports parameterized queries with configurable timeout (default 30 seconds).

Inline Table Editing

Data tables support inline row editing with two save modes:

• Direct — Updates the lookup table entry directly
• Callback Script — Invokes a script for custom save logic and validation

5. Version Management

Every save creates a new version of the application layout, providing a complete change history.

Saving a Version

1. Make changes in the editor
2. Click Save
3. Optionally add a change description (e.g., "Added sales data table")
4. A new version is created with an auto-incremented version number

Viewing Version History

Open the Versions panel to see all versions with:

• Version number
• Change description
• Who created it and when

Rolling Back

To restore a previous version:

1. Open the Versions panel
2. Select the version to restore
3. Click Rollback
4. A new version is created with the old layout (previous versions are preserved)

Note: Rollback does not delete intermediate versions — it creates a new version with the restored layout.

6. Permissions & Menu Organization

Access Control

• No Permission Set — App is visible to all authorized users in the company
• Permission Assigned — Only users with that specific permission can access the app

Menu Folders

Organize applications into folders for easier navigation:

• Create folders to group related applications
• Assign apps to folders or leave at root level
• Folders appear in the application menu as a hierarchical tree

Active/Inactive State

Toggle Is Active to show or hide an application without deleting it. Inactive apps are hidden from all menus and screens.

7. Execution Logs

The Application Designer automatically logs all component executions for debugging and monitoring.

What's Logged

Log Statistics

View aggregate metrics for each application:

• Total executions
• Success and failure counts
• Average execution duration

Access execution logs from the app's Logs dashboard. Filter by status and component name.

8. Report Generation

Applications can render document templates inline and generate PDFs.

Inline Report Rendering

Add a Report Panel component to your app. At runtime, it:

1. Loads the selected document template
2. Merges your data with the template HTML/CSS
3. Displays the rendered document inline in the application

PDF Generation

Generate downloadable PDFs from report panels:

1. Click the Generate PDF button on a report panel
2. The system queues an asynchronous PDF generation job
3. Poll for completion using the returned request ID
4. Download the PDF when ready

9. Mobile Support

Applications can be made available on mobile devices:

• Toggle Show on Mobile in the app settings
• Mobile clients display apps with this flag enabled
• Apps render using responsive HTML fragments suitable for mobile viewports
• Embed mode (?embed=true) provides a minimal layout for native app webviews

10. Best Practices

Application Design

• Keep apps focused — One app per workflow or use case
• Use tabs — Organize complex apps into logical sections
• Add descriptions — Help users understand what each app does
• Choose meaningful icons and colors — Makes apps easy to identify in the menu

Data Sources

• Use lookup tables for simple data — Fast, paginated, no external dependencies
• Use scripts for complex logic — Transform and combine data from multiple sources
• Use ODBC for direct database access — When you need real-time data from external databases

Version Management

• Add change descriptions — Document what you changed and why
• Test before saving — Verify your layout works with real data
• Use rollback sparingly — Roll back to a known good state when needed

Performance

• Use server-side pagination — For large datasets in data tables
• Limit components per tab — Too many simultaneous data loads slows the app
• Set appropriate ODBC timeouts — Avoid long-running queries blocking the UI