# Web User Interface

Complete documentation for the HANA CLI web application - a modern SAP UI5-based Fiori interface.

## Quick Start

Launch the Fiori Launchpad web interface:

```bash
hana-cli ui
# Starts server and opens http://localhost:3010/ui/#Shell-home automatically
```

By default, the web server runs on **port 3010**. Change it if needed:

```bash
hana-cli ui --port 3030
```

The server can also be accessed from other machines on your network:

```bash
hana-cli ui --host 0.0.0.0 --port 8080
```

## Overview

The web UI provides a graphical interface to all HANA CLI functionality:

- **Fiori Launchpad** - Unified navigation and app management
- **SAP UI5 Framework** - Enterprise-grade UI components
- **Real-time communication** - WebSocket connection to CLI backend
- **Responsive design** - Works on desktop and tablet devices
- **Light & dark themes** - Auto-detects system preference
- **Integrated help** - SAP Enable Now contextual assistance

## Web Applications

The Fiori Launchpad includes multiple specialized applications:

### Tables & Objects Browser

**Application ID:** `sap.hanacli.tables`  

The primary application for browsing and listing all types of database objects:

**Features:**

- List all tables in the current schema
- List all views and calculation views
- Browse all schemas
- Display HDI containers
- Show HANA data types
- List database functions
- Display indexes
- Cloud Foundry service instance listings:
  - HDI service instances
  - SBSS (Schema & Business Service) instances
  - Schema service instances
  - SecureStore service instances
  - User-Provided Service (UPS) instances

**Additional Features:**

- Search across objects
- View object properties and metadata
- Export object definitions
- Generate SQL statements
- Connection switching

**Available Routes:**

- `#tables-ui` - List all tables
- `#views-ui` - List all views
- `#schemas-ui` - List all schemas
- `#containers-ui` - List HDI containers
- `#certificates-ui` - List system certificates
- `#dataTypes-ui` - List HANA data types
- `#functions-ui` - List database functions
- `#indexes-ui` - List database indexes
- `#features-ui` - List HANA features
- `#featureUsage-ui` - List HANA feature usage
- `#hdi-ui` - List HDI service instances (Cloud Foundry)
- `#sbss-ui` - List SBSS service instances
- `#schemaInstances-ui` - List Schema service instances
- `#securestore-ui` - List SecureStore service instances
- `#ups-ui` - List user-provided service instances

### Inspect Tool

**Application ID:** `sap.hanacli.inspect`  

Provides detailed inspection capabilities for database objects:

**Features:**

- Inspect table structures, columns, and metadata
- Inspect view definitions and columns
- Execute and analyze SQL queries
- View object properties and attributes
- Export inspection results in multiple formats
- Table structure analysis
- View column mapping
- Data type review
- Constraints and indexes
- Column statistics
- Object metadata

**Available Routes:**

- `#inspectTable-ui` - Inspect table details
- `#inspectView-ui` - Inspect view details
- `#querySimple-ui` - Execute SQL queries

### Mass Converter

**Application ID:** `sap.hanacli.massConvert`  

Enables mass conversion of database tables to different formats:

**Features:**

- Convert multiple tables simultaneously
- Support for CDS (Core Data Services) format
- Generate `.hdbtable` files for HDI deployments
- Generate `.hdbmigrationtable` files for migrations
- Real-time progress tracking via WebSocket
- Configurable output options (HANA types, catalog definitions)
- Export to local folder
- Multi-table batch processing

**Configuration Options:**

- Output format selection (CDS, HDBTable, HDBMigrationTable)
- Use HANA-specific data types
- Use "pure" catalog definitions
- Target folder specification
- Connection parameter override

**Available Routes:**

- `#massconvert-ui` - Mass conversion interface

### System Information

**Application ID:** `sap.hanacli.systemInfo`  

Provides comprehensive system information about the connected HANA database:

**Features:**

- Current session details
- Database version information
- System ID and configuration
- Database name and host
- Start time and uptime
- System status overview
- Connection parameters
- Resource usage

**Available Routes:**

- `#systeminfo-ui` - System information dashboard

## Architecture

### Technology Stack

| Component | Purpose | Version |
| --- | --- | --- |
| SAP UI5 | UI Framework | 1.144.1 |
| Fiori Launchpad | App Container | Latest |
| Node.js Express | Backend API | Runtime |
| WebSockets | Real-time comms | Native |
| SAP DFA | Help system | Latest |

### Folder Structure

```bash
app/
├── resources/
│   ├── index.html           # Main Fiori Launchpad entry
│   ├── init.js              # Launchpad initialization
│   ├── WebAssistant.js      # SAP Enable Now integration
│   ├── favicon.ico          # Browser tab icon
│   ├── common/              # Shared components
│   │   ├── BaseController.js
│   │   ├── handler.js
│   │   ├── models.js
│   │   ├── Component.js
│   │   ├── index.js
│   │   ├── css/             # Shared stylesheets
│   │   ├── images/          # Common icons
│   │   ├── view/            # Shared XML fragments
│   │   │   ├── BusyDialog.fragment.xml
│   │   │   ├── Connection.fragment.xml
│   │   │   └── Debug.fragment.xml
│   │   ├── controller/      # Shared controllers
│   │   └── model/           # Extended models
│   ├── inspect/             # Inspect application
│   │   ├── Component.js
│   │   ├── manifest.json
│   │   ├── index.html
│   │   ├── controller/
│   │   ├── view/
│   │   └── i18n/
│   │       ├── inspect.properties
│   │       └── inspect_de.properties
│   ├── massConvert/         # Mass converter app
│   │   ├── Component.js
│   │   ├── manifest.json
│   │   ├── index.html
│   │   ├── controller/
│   │   ├── view/
│   │   └── i18n/
│   │       ├── massConvert.properties
│   │       └── massConvert_de.properties
│   ├── systemInfo/          # System info app
│   │   ├── Component.js
│   │   ├── manifest.json
│   │   ├── index.html
│   │   ├── controller/
│   │   ├── view/
│   │   └── i18n/
│   │       ├── systemInfo.properties
│   │       └── systemInfo_de.properties
│   └── tables/              # Tables browser app
│       ├── Component.js
│       ├── manifest.json
│       ├── index.html
│       ├── controller/
│       ├── view/
│       └── i18n/
│           ├── tables.properties
│           └── tables_de.properties
├── appconfig/
│   └── fioriSandboxConfig.json  # Launchpad configuration
├── dfa/
│   └── help/                # DFA help library
│       ├── library.js
│       ├── library-preload.js
│       ├── catalog/         # Help catalog
│       ├── context/         # Context-sensitive help
│       ├── utils/           # Help utilities
│       └── wpb/             # Web page builder
├── i18n/                    # i18n resource bundles
├── ui5.yaml                 # UI5 build config
├── ui5-local.yaml           # Local dev overrides
├── .gitignore               # Git ignore rules
└── README.md                # Detailed app docs
```

#### Core Files

**`resources/index.html`** - Main entry point for the Fiori Launchpad

- Loads UI5 framework from CDN `https://ui5.sap.com/<version>/`
- Configures the Fiori Launchpad sandbox environment
- Supports both light and dark themes (auto-detected based on system preferences)
- Registers resource roots for all UI5 applications

**`resources/init.js`** - Initialization script for the Launchpad

- Creates and renders the Fiori shell container
- Configures flexibility services for UI adaptation
- Sets up session storage connector for personalization

**`resources/WebAssistant.js`** - SAP Enable Now Web Assistant integration

- Provides contextual help and guided tours
- Loads from SAP productive environment
- Enables in-app learning and documentation

**`appconfig/fioriSandboxConfig.json`** - Complete Launchpad configuration

- Defines tile groups and layouts
- Configures navigation targets
- Sets up application routes
- Enables personalization and themes
- Configures DFA (Digital Foundation Adapter) integration
- Defines three main tile groups:
  - **List Objects** - Database object listings
  - **Admin** - Administrative functions
  - **CF/XS** - Cloud Foundry and XSA service instances

### Component Sharing

All applications use shared components from `/resources/common`:

**Controllers:**

- **BaseController.js** - Base class with common functionality for all app controllers
- **handler.js** - Shared event handlers and utility functions

**Views (XML Fragments):**

- **BusyDialog.fragment.xml** - Loading indicator dialog
- **Connection.fragment.xml** - Database connection configuration UI
- **Debug.fragment.xml** - Debug information display

**Models:**

- **models.js** - Shared data models and model creation utilities

**Additional Resources:**

- **Component.js** - Reusable component definition
- **index.js** - Common module exports
- **/css** - Shared stylesheets
- **/images** - Common images and icons
- **/view** - Additional shared view fragments
- **/model** - Extended model definitions
- **/controller** - Additional shared controllers

### WebSocket Communication

Web applications communicate with the backend via:

```javascript
// Frontend
const ws = new WebSocket('ws://localhost:3010');
ws.send(JSON.stringify({
  command: 'tables',
  args: { schema: 'MY_SCHEMA' }
}));

// Backend receives and executes CLI command
// Returns results as markdown table
```

## Features

### Real-time Updates

- Live command execution feedback
- Progress indicators during long operations
- Error messaging and troubleshooting
- Result streaming for large datasets

### Multi-theming

- **Light theme** - Professional business look
- **Dark theme** - Reduced eye strain
- **Auto-detect** - Follows system settings
- **Manual override** - User selection available

### Accessibility

- Keyboard navigation support
- Screen reader compatible
- High contrast mode
- WCAG compliance

### Internationalization

Supports multiple languages:

- **English** - Primary language
- **German**, **Spanish**, **French**, **Japanese**, **Korean**, **Portuguese**, **Simplified Chinese**, **Hindi**, **Polish** - Full translations
- **Extensible** - Easy to add more languages

Text files: `/resources/*/i18n/*.properties`

### Personalization

Users can personalize the Launchpad:

- Rearrange tiles
- Hide/show tile groups
- Change themes
- Customize content density (compact/cozy)
- Save layouts in session storage
- Remember window preferences
- Save connection configurations
- Retain search/filter states
- Session persistence

Changes are stored locally in browser session storage.

### Authentication

Currently, authentication is handled through the database connection configured in the CLI. The web interface inherits the same connection and credentials.

### Browser Compatibility

Supports modern browsers:

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

Requires JavaScript enabled and WebSocket support.

### DFA Help System

The application includes SAP Digital Foundation Adapter (DFA) help content integration:

**Structure:**

- `library.js` - Help library definition
- `library-preload.js` - Pre-loaded library bundle
- `/catalog` - Help catalog definitions
  - `massconvert-ui.json` - Help for mass convert app
  - `Shell-home.json` - Help for main launchpad
  - `Shell-home!whatsnew.json` - What's new information
- `/context` - Context-sensitive help mappings
- `/utils` - Help utility functions
- `/wpb` - Web page builder resources

**Features:**

- Contextual help overlay on UI5 applications
- Guided tours and walkthroughs
- Integration with SAP Enable Now
- What's New announcements
- Product documentation links

## Connected Operations

The web UI connects to the HANA CLI backend running locally:

```bash
┌─────────────────────────────────────────┐
│  Browser (Web UI)                       │
│  ├─ Tables App                          │
│  ├─ Inspect App                         │
│  ├─ Mass Converter App                  │
│  └─ System Info App                     │
└──────────────┬──────────────────────────┘
               │ WebSocket
               │ (ws://localhost:3010)
               ↓
┌──────────────────────────────────────────┐
│  Node.js Server (hana-cli)               │
│  ├─ Command routing                      │
│  ├─ Database connection                  │
│  ├─ Result formatting                    │
│  └─ Error handling                       │
└──────────────┬───────────────────────────┘
               │
               ↓
        ┌──────────────┐
        │  SAP HANA    │
        │  Database    │
        └──────────────┘
```

## Usage Scenarios

### Discover Database Schema

```bash
# Launch web UI
hana-cli tablesUI

# In browser:
# 1. Search for schema
# 2. Browse tables and views
# 3. View column details
# 4. Export table definitions
```

### Convert Tables for HDI

```bash
# Launch mass converter
hana-cli massConvertUI

# In browser:
# 1. Select tables to convert
# 2. Choose output format (CDS, HDBTable, etc)
# 3. Configure options
# 4. Start conversion
# 5. Download results
```

### Check System Status

```bash
# Launch system info
hana-cli systemInfoUI

# View:
# - Current connection info
# - Database version
# - System ID and hostname
# - Uptime and resources
```

## Configuration Files

### ui5.yaml

UI5 tooling configuration for development and build:

- **Specification Version:** 1.0
- **Application Name:** test1
- **Type:** Application
- **Default Theme:** sap_fiori_3_dark
- **Server Configuration:**
  - Fiori Tools Proxy middleware for backend connections
  - UI5 version management
  - App reload middleware for hot-reloading
  - Port: 35729
  - Resource paths for UI5 framework

### ui5-local.yaml

Local development overrides (automatically loaded when present)

### .gitignore

Git ignore rules for generated and temporary files

## Development

### Local Development Server

For development with hot-reload:

```bash
cd app
ui5 serve
```

The UI5 tooling will start a development server with automatic reloading on file changes.

### Building for Production

```bash
cd app
ui5 build
```

This generates optimized production builds in the `dist/` folder.

### Adding New Applications

To add a new UI5 application:

1. Create a new folder under `/resources`
2. Add `Component.js`, `manifest.json`, and views
3. Register the application in `/appconfig/fioriSandboxConfig.json`
4. Add tiles to appropriate groups
5. Define navigation targets

### Theme Support

The application supports automatic theme detection:

- Light mode: `sap_horizon`
- Dark mode: `sap_horizon_dark`

Theme is auto-selected based on system preferences and can be changed via user settings.

## Troubleshooting

### Application won't load

- Check that the backend server is running
- Verify port 3010 (or custom port) is not blocked
- Check browser console for errors
- Ensure default-env.json or connection configuration is valid

### WebSocket connection fails

- Verify firewall settings allow WebSocket connections
- Check that the backend server WebSocket endpoint is accessible
- Look for CORS-related errors in browser console

### Tiles not appearing

- Verify `/appconfig/fioriSandboxConfig.json` is valid JSON
- Check that application paths in config match actual folders
- Clear browser cache and reload

### Theme not applying correctly

- Hard refresh the browser (Ctrl+F5 / Cmd+Shift+R)
- Check browser console for CSS loading errors
- Verify UI5 CDN is accessible

## See Also

- [REST API Endpoint Map](../api-server/)
- [HTTP Routes Documentation](../../04-api-reference/http-routes) - Backend API endpoints
- [Getting Started](../../01-getting-started/)
- [Features Guide](../)
- [UI5 Documentation](https://ui5.sap.com/) - SAP UI5 framework reference
- [Fiori Design Guidelines](https://experience.sap.com/fiori-design-web/) - SAP Fiori design system