ngx-admin

Training Manual

Generated by Inkwell Forge — automated codebase documentation analysis. Subject matter expert review is recommended before distribution.

Document Date: May 2026

About This Document

This Training Manual covers 100 screen(s) of the ngx-admin application.

Screens covered in this assessment:

Earning Card, D3, Chartjs, Tiny Mce (theme component), Dashboard, Charts, Footer, Search Input, Header, Echarts, Temperature Dragger, Solar, E Commerce, Status Card, Chart Panel Summary, Country Orders, Room Selector, Traffic, Weather, Chart Panel Header, Contacts, Rooms, Player, Chart (Country Orders), Electricity Chart, Kitten, Temperature, Ckeditor, User Activity, Front Side (Profit Card), Visitors Analytics, Slide Out, Traffic Cards Header, Traffic Bar, Back Side (Traffic Reveal Card), Front Side (Traffic Reveal Card), Progress Section, Back Side (Profit Card), Form Layouts, Spinner Sizes, Progress Bar, Spinner, Interactive Progress Bar, Buttons, Spinner Color, Spinner In Buttons, Forms, Spinner In Tabs, Datepicker, Maps, Bubble, Form Inputs (Forms), Dialog Name Prompt, Window, Window Form, Smart Table, Toastr, Tooltip, Grid, Ui Features, Tables, Showcase Dialog, Search Map, Icons, Pages, Tree Grid, Popovers, Typography, Charts Panel, Extra Components, Visitors Analytics Chart, Electricity, Map (Country Orders), Security Cameras, Nebular Select, Charts (E-Commerce Charts Panel), Modal Overlays, Back Side (Earning Card), Legend Chart, Alert, Traffic Reveal Card, Map (Search Map), Front Side (Earning Card), Calendar, Calendar Kit, Visitors Statistics, Miscellaneous, Profit Card, Search (Search Map), Editors, Chat, Search Fields, Tiny Mce (Editors), Day Cell, Leaflet, Month Cell, Not Found, Form Inputs (Extra Components), Dialog, Gmaps

Screens and features not included in the assessed documentation are outside the scope of this document.

Note: This document reflects a partial view of the application in the sense that not all screens represent end-to-end production workflows — many are UI component showcases. Additional workflow screens (such as authentication, user profile management, and checkout flows) should be assessed for comprehensive coverage of production use cases.

How to Use This Manual {#how-to-use-this-manual}

This manual is organized as a guided learning journey. You will move through Foundation Skills first, then progress through Modules from basic orientation to advanced features.

Structure of each module:

• Learning Objectives — what you will be able to do after completing the module
• Estimated Time — how long the module should take
• Lessons — each lesson teaches one discrete skill

Structure of each lesson:

1. What You'll Learn — the skill and when you'll use it
2. Before You Begin — any prerequisites
3. Walkthrough — step-by-step instructions
4. Try It Yourself — a practice exercise with specific values
5. Knowledge Check — self-assessment questions
6. Tips & Gotchas — practical advice and common mistakes

Estimated total time: Approximately 12–16 hours for the complete manual, depending on your pace.

Tracking your progress: Use the Skills Checklist at the end of this document. After completing each lesson, check off the corresponding skill. When all boxes in a module are checked, you have completed that module.

Recommended approach: Work through the Foundation Skills section before starting Module 1. Within each module, complete lessons in order, as later lessons sometimes build on earlier ones.

Prerequisites {#prerequisites}

Before starting this training, ensure you have the following:

• Account access: A valid username and password for the ngx-admin application. Contact your system administrator if you do not have credentials.
• Browser: A modern web browser (Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari). The application is not optimized for Internet Explorer.
• Network access: A stable internet connection. Some features (maps, chart tiles) require external network access.
• Screen resolution: A minimum screen width of 768 pixels is recommended for the best experience. Some features adapt their layout on smaller screens.
• Permissions: Your user account must have access to the sections you intend to use. If you cannot see certain menu items, contact your administrator.
• No prior data required: The application uses demonstration data for most screens. You do not need to create records before starting.

Foundation Skills {#foundation-skills}

Before diving into the modules, complete these foundation skill exercises. They cover controls and patterns that appear throughout the application. Completing them now will save you time later.

FS-1: Understanding the Application Shell (Header, Sidebar, Footer) {#fs-1-understanding-the-application-shell}

What it is: The application shell is the persistent frame that surrounds every page — the header bar at the top, the sidebar navigation on the left, and the footer at the bottom. Understanding these elements lets you navigate the application confidently from any screen.

Where you'll encounter it: Every screen in the application.

Walkthrough

The Header Bar

The header bar runs across the top of every page and contains:

• Sidebar Toggle Button (left side): A button that collapses or expands the left navigation sidebar. Clicking it compacts the sidebar to show only icons, or expands it to show full labels.
• Home/Logo Link (left side): Clicking this navigates you to the application's home page (the E-commerce dashboard).
• Theme Selector (center or right): A dropdown that lets you switch between four visual themes: Default, Dark, Cosmic, and Corporate. See FS-2: Switching Themes for details.
• User Display (right side): Shows your user avatar and name. On smaller screens, only the avatar is shown. Clicking it opens a context menu with Profile and Log out options.

The Sidebar Navigation

The sidebar on the left contains the full navigation menu, organized into sections:

• E-commerce and IoT Dashboard — top-level dashboard links
• FEATURES — a section divider (not clickable)
• Layout, Forms, UI Features, Modal & Overlays, Extra Components, Maps, Charts, Editors, Tables & Data, Miscellaneous, Auth — expandable groups containing sub-pages

Click any group name to expand or collapse its sub-items. Click any sub-item to navigate to that page.

The Footer

The footer appears at the bottom of every page and contains:

• An attribution link to Akveo (the framework creator)
• Social media icon links (GitHub, Facebook, Twitter, LinkedIn)

[Screenshot: Full application shell showing header, sidebar, and footer]

Practice Exercise

1. Click the Sidebar Toggle Button in the header to collapse the sidebar. Notice that the menu items shrink to icons only.
2. Click the Sidebar Toggle Button again to expand the sidebar back to full labels.
3. In the sidebar, click Forms to expand the Forms group. You should see sub-items appear below it.
4. Click Forms again to collapse the group.
5. Click the Home/Logo Link in the header to navigate to the home page.

Verify: You are back on the E-commerce dashboard (the default home page).

Knowledge Check

• What happens when you click the Sidebar Toggle Button?
• How do you navigate to a sub-page within a group like "Forms"?

Tips & Gotchas

• Tip: If you ever feel lost, click the Home/Logo Link in the header to return to the E-commerce dashboard.
• Gotcha: The social media links in the footer currently point to placeholder destinations and may not navigate to real social profiles.

FS-2: Switching Themes {#fs-2-switching-themes}

What it is: The application supports four visual themes that change the color scheme of every page simultaneously. Switching themes is a global action that affects the entire application.

Where you'll encounter it: The theme selector in the header bar.

Walkthrough

1. Locate the Theme Selector in the header bar. It typically appears as a dropdown showing the current theme name (e.g., "Default").
2. Click the Theme Selector to open the dropdown.
3. You will see four options: Default, Dark, Cosmic, and Corporate.
4. Click any theme name to apply it immediately. The entire application re-renders with the new color palette.

What changes with each theme:

Note: Some components (such as device status cards on the Dashboard) change their color assignments when you switch to the Corporate theme. This is intentional design behavior.

Practice Exercise

1. From any page, open the Theme Selector in the header.
2. Select Dark. Observe how the background and text colors change across the entire application.
3. Navigate to the Dashboard using the sidebar. Notice how the status cards appear in the Dark theme.
4. Switch back to Default using the Theme Selector.

Verify: The application returns to its light background with blue accents.

Knowledge Check

• How many themes are available in the application?
• Does switching themes affect only the current page, or the entire application?

Tips & Gotchas

• Tip: Your theme preference is not saved between sessions. Each time you reload the application, it starts in the Default theme.
• Tip: If chart colors look unexpected, try switching themes — some charts are specifically designed to look best in certain themes.

FS-3: Working with Data Tables {#fs-3-working-with-data-tables}

What it is: Several screens in the application display data in interactive tables. These tables support sorting, filtering, and pagination. Understanding how to use them will help you find and manage records efficiently.

Where you'll encounter it: Smart Table (/tables/smart-table), Tree Grid (/tables/tree-grid), and data displays throughout the E-commerce section.

Walkthrough

Sorting

• Click any column header to sort the table by that column in ascending order.
• Click the same header again to sort in descending order.
• A sort indicator (arrow icon) appears next to the active sort column.

Filtering

• Below the column headers, each column has a filter input field.
• Type text into a filter field to narrow the displayed rows to only those matching your input.
• Filtering is applied immediately as you type — no need to press Enter.
• To clear a filter, delete the text from the filter field.

Pagination

• If the table has more rows than fit on one page, pagination controls appear at the bottom.
• Click the page number buttons or next/previous arrows to navigate between pages.

Row Actions

• Each row may have action buttons on the right side: an Edit button (pencil icon) and a Delete button (trash icon).
• Clicking Edit transforms the row into an editable form.
• Clicking Delete initiates a deletion workflow (see Lesson 3.3).

[Screenshot: Smart Table with column headers, filter row, and pagination controls visible]

Practice Exercise

1. Navigate to Tables & Data > Smart Table in the sidebar.
2. Click the Last Name column header to sort the table alphabetically by last name.
3. In the Email filter field below the column header, type @ to filter for rows containing an email address.
4. Clear the filter by deleting the @ character.
5. Click the First Name column header to sort by first name.

Verify: The table re-sorts and the filter narrows the results as expected.

Knowledge Check

• How do you sort a table column in descending order?
• Does filtering require you to press Enter, or does it apply automatically?

Tips & Gotchas

• Tip: You can apply filters on multiple columns simultaneously to narrow results further.
• Gotcha: Changes made to records in the Smart Table (add, edit, delete) are stored only in memory for your current session. Refreshing the page resets all changes to the original data.

FS-4: Reading Charts and Visualizations {#fs-4-reading-charts-and-visualizations}

What it is: The application uses several charting libraries to display data visually. Most charts share common interaction patterns regardless of which library powers them.

Where you'll encounter it: Dashboard, E-Commerce section, Charts section, and various widget cards throughout the application.

Walkthrough

Hover Tooltips

• Move your mouse cursor over any data point, bar, or line segment on a chart.
• A tooltip appears showing the exact value at that point, often formatted with units (e.g., "120 MB", "$ 42").
• Move your cursor away to dismiss the tooltip.

Legend Interaction

• Most charts display a legend identifying each data series by color and label.
• On some charts (particularly Chart.js charts), clicking a legend item toggles the visibility of that data series. Click it again to show it again.

Zoom and Pan (Maps and some charts)

• On map-based visualizations, you can scroll to zoom in and out, and click and drag to pan.
• On most standard charts, zoom and pan are not enabled.

Period/Time Selectors

• Some chart panels include period selector buttons (e.g., Week, Month, Year) above the chart.
• Clicking a period button refreshes the chart data for that time range.

[Screenshot: Example chart with tooltip visible on hover]

Practice Exercise

1. Navigate to Charts > Echarts in the sidebar.
2. Hover your mouse over one of the data points on the stacked area chart. Read the tooltip values.
3. Click one of the legend items at the top of the chart to hide that data series.
4. Click the same legend item again to show it.

Verify: The data series disappears and reappears as expected.

Knowledge Check

• How do you see the exact value of a data point on a chart?
• What happens when you click a legend item on a Chart.js chart?

Tips & Gotchas

• Tip: If a chart appears blank or unstyled, try switching to a different theme and back. Some charts require the theme to fully load before rendering.
• Gotcha: Chart data on demonstration pages is randomly generated on each page load. Values will differ every time you visit.

FS-5: Understanding Status Indicators and Color Coding {#fs-5-understanding-status-indicators}

What it is: Throughout the application, colors are used consistently to communicate status and severity. Understanding this color system helps you interpret information at a glance.

Where you'll encounter it: Status cards on the Dashboard, progress bars, alert components, toast notifications, buttons, and form inputs throughout the application.

Walkthrough

The application uses five semantic color statuses:

These colors appear on:

• Status Cards — the card border or icon color indicates the device's assigned status type
• Progress Bars — color changes based on the current value (e.g., red when low, green when high)
• Toast Notifications — the notification color indicates its severity
• Buttons — button color indicates the action's intent
• Form Inputs — border color indicates validation state

Note: When the Corporate theme is active, the color assignments for some Dashboard status cards change. For example, the Light card uses Warning (orange) instead of Primary (blue) in the Corporate theme.

Practice Exercise

1. Navigate to Extra Components > Progress Bar in the sidebar.
2. Find the Interactive Progress Bar demonstration.
3. Click the decrease button several times until the bar reaches its lowest value. Note the color.
4. Click the increase button several times until the bar reaches its highest value. Note the color change.

Verify: The progress bar changes from red (Danger) at low values through orange (Warning) and blue (Info) to green (Success) at high values.

Knowledge Check

• What color indicates a "Danger" or critical status?
• If a progress bar is showing orange, what status does that represent?

Tips & Gotchas

• Tip: When in doubt about what a color means, refer to this table. The color system is consistent across all components.
• Gotcha: The Corporate theme reassigns some colors on the Dashboard status cards. If you switch themes and the card colors change, this is expected behavior.

FS-6: Using Modal Overlays (Dialogs, Windows, Toasts) {#fs-6-using-modal-overlays}

What it is: Modal overlays are UI panels that appear on top of the current page. The application uses three types: Dialogs (centered blocking panels), Windows (floating draggable panels), and Toasts (brief notification messages). Understanding how to interact with each type prevents confusion when they appear.

Where you'll encounter it: Modal Overlays section, and triggered by various actions throughout the application.

Walkthrough

Dialogs

• Dialogs appear centered on the screen with a dark backdrop behind them.
• To dismiss a dialog: click the backdrop (the dark area outside the dialog), press the Escape key, or click a Cancel/Dismiss button inside the dialog.
• Some dialogs are configured to stay open even if you click the backdrop or press Escape — in those cases, you must use the button inside the dialog.

Windows

• Windows appear as floating panels that can be dragged around the screen.
• Windows do not block interaction with the rest of the page (unless a backdrop is configured).
• Close a window using the X button in the window's title bar.

Toasts

• Toasts are brief notification messages that appear in a corner of the screen (configurable).
• They automatically disappear after a set duration.
• If Destroy by Click is enabled, you can dismiss a toast early by clicking on it.
• Toasts are color-coded using the status color system.

Practice Exercise

1. Navigate to Modal & Overlays > Dialog in the sidebar.
2. Click the button that opens the basic dialog. The dialog appears with a title.
3. Press the Escape key to dismiss it.
4. Click the button again. This time, click the dark backdrop area outside the dialog to dismiss it.
5. Navigate to Modal & Overlays > Toastr.
6. Click Make Toast to trigger a toast notification. Observe where it appears and how long it stays visible.

Verify: The dialog dismisses on Escape and backdrop click. The toast appears and auto-dismisses.

Knowledge Check

• What are two ways to dismiss a standard dialog?
• How is a Window overlay different from a Dialog overlay?

Tips & Gotchas

• Tip: If a dialog does not close when you press Escape or click the backdrop, look for a Cancel or Close button inside the dialog — it may be configured to require explicit dismissal.
• Gotcha: Some dialogs are intentionally configured with closeOnEsc: false or closeOnBackdropClick: false for demonstration purposes. This is shown in the Dialog showcase page.

FS-7: Using Progress Bars and Spinners {#fs-7-using-progress-bars-and-spinners}

What it is: Progress bars show completion percentage for a task or metric. Spinners indicate that a loading or processing operation is in progress. Both appear throughout the application.

Where you'll encounter it: Extra Components section, E-Commerce progress section, and loading states throughout the application.

Walkthrough

Progress Bars

• A progress bar is a horizontal track with a filled portion indicating the current value (0–100%).
• The fill color changes based on the value: red (Danger) at low values, orange (Warning) in the middle range, blue (Info) above halfway, and green (Success) near completion.
• Some progress bars are interactive — they have Increase and Decrease buttons to change the value.

Spinners

• A spinner is an animated circular indicator that signals an operation is in progress.
• Spinners appear in different sizes (tiny, small, medium, large, giant) and colors.
• Spinners can be embedded inside buttons to indicate that a button's action is being processed.
• Spinners disappear automatically when the operation completes.

Practice Exercise

1. Navigate to Extra Components > Spinner in the sidebar.
2. Click the toggle loading animation button. A spinner appears for 3 seconds, then disappears.
3. Navigate to Extra Components > Progress Bar.
4. Find the Interactive Progress Bar and click the increase button four times to reach 100%.
5. Click the decrease button once to bring it back to 75%.

Verify: The spinner activates and deactivates. The progress bar reaches 100% (green) and then returns to 75% (Info/blue).

Knowledge Check

• What does a spinner indicate to the user?
• At what percentage value does the interactive progress bar turn green?

Tips & Gotchas

• Tip: When you see a spinner on a button, wait for it to disappear before clicking the button again.
• Gotcha: The spinner demonstration uses a simulated 3-second delay. In real application use, spinners appear during actual data loading operations.

Module 1: Getting Oriented — The Dashboard and Navigation {#module-1-getting-oriented}

Learning Objectives

After completing this module, you will be able to:

• Navigate to any section of the application using the sidebar menu
• Identify the key widgets and panels on the main Dashboard
• Toggle device status cards on and off
• Read solar energy and electricity consumption data
• Control temperature and humidity settings
• Browse rooms and control media playback
• View security camera feeds
• Access the contacts and recent users list

Estimated Time: 60–75 minutes

Lesson 1.1: Navigating the Application Shell {#lesson-1-1-navigating-the-application-shell}

What You'll Learn: How to use the header, sidebar, and footer to move around the application. This is the most fundamental skill — you'll use it every time you open the application.

Before You Begin: Complete FS-1: Understanding the Application Shell before this lesson.

Walkthrough

1. Open the application in your browser. You should land on the E-commerce Dashboard (the default home page).
2. Look at the header bar at the top. Identify the sidebar toggle button on the left, the theme selector, and the user avatar on the right.
3. In the sidebar, locate the navigation menu. You will see top-level items and expandable groups.
4. Click Forms in the sidebar to expand the Forms group. Sub-items appear below it: Form Inputs, Form Layouts, Buttons, Datepicker.
5. Click Form Layouts to navigate to that page. The main content area changes to show the Form Layouts page.
6. Click the Home/Logo Link in the header to return to the E-commerce Dashboard.
7. Click the Sidebar Toggle Button in the header. The sidebar collapses to show only icons.
8. Click the Sidebar Toggle Button again to expand the sidebar.

You should now see the E-commerce Dashboard with the full sidebar visible.

[Screenshot: Sidebar expanded showing all navigation groups]

Try It Yourself

Navigate to the Charts > D3 page using the sidebar. Then navigate to Tables & Data > Tree Grid. Finally, use the Home/Logo Link to return to the E-commerce Dashboard.

Vary the path: Instead of clicking the Home link, use the sidebar to navigate back to the Dashboard by clicking E-commerce at the top of the sidebar menu.

Verify: You are on the E-commerce Dashboard and the sidebar shows E-commerce as the active (highlighted) menu item.

Knowledge Check

• What is the quickest way to return to the home page from any screen?
• How do you navigate to a sub-page within a group like "Charts"?

Tips & Gotchas

• Tip: The currently active page is highlighted in the sidebar menu, making it easy to see where you are.
• Gotcha: If you click a group name (like "Forms") and nothing happens, the group may already be expanded. Look for the sub-items below it.

Lesson 1.2: Exploring the Main Dashboard {#lesson-1-2-exploring-the-main-dashboard}

What You'll Learn: How to identify and understand the key panels on the main Dashboard. The Dashboard gives you an at-a-glance view of home automation device states and energy data.

Before You Begin: Complete Lesson 1.1.

Walkthrough

1. Navigate to the Dashboard by clicking E-commerce (or the Home link) in the sidebar. The Dashboard is the default landing page.
2. Observe the Status Cards Panel — a row of four cards representing home devices: Light, Roller Shades, Wireless Audio, and Coffee Maker. Each card shows the device name, an icon, and an ON/OFF status.
3. Locate the Solar Energy widget. It displays a donut chart showing current solar energy consumption (6.421 kWh out of 8.421 kWh) alongside a percentage visualization.
4. Scroll down to find additional dashboard widgets including Traffic, Temperature, Electricity, Rooms, Contacts, Security Cameras, and Weather panels.
5. Notice that the color of each status card may change if you switch themes (see FS-2: Switching Themes).

[Screenshot: Main Dashboard showing status cards and solar widget]

Try It Yourself

Switch to the Corporate theme using the theme selector in the header. Observe how the status card colors change compared to the Default theme. Then switch back to Default.

What to look for: In the Corporate theme, the Light card changes from blue (Primary) to orange (Warning), and the Wireless Audio card changes from teal (Info) to red (Danger).

Verify: After switching back to Default, the Light card is blue and the Wireless Audio card is teal.

Knowledge Check

• How many device status cards are shown on the Dashboard?
• What does the Solar Energy widget display?

Tips & Gotchas

• Tip: The Dashboard is designed to give you a quick overview. For detailed data on any widget, look for dedicated sub-pages in the sidebar.
• Gotcha: The solar energy values (6.421 kWh and 8.421 kWh) are demonstration values and do not update in real time in this version of the application.

Lesson 1.3: Interacting with Device Status Cards {#lesson-1-3-interacting-with-device-status-cards}

What You'll Learn: How to toggle device status cards between ON and OFF states. This is the primary interactive element on the Dashboard's device panel.

Before You Begin: Complete Lesson 1.2.

Walkthrough

1. Navigate to the Dashboard.
2. Locate the Status Cards Panel with the four device cards: Light, Roller Shades, Wireless Audio, and Coffee Maker.
3. Find the Roller Shades card. It currently shows ON in green text.
4. Click anywhere on the Roller Shades card. The card immediately changes to show OFF and the card visually dims (reduced color intensity).
5. Click the Roller Shades card again. It returns to the ON state with full color.
6. Try clicking the Coffee Maker card to toggle it off, then on again.

Each click inverts the current state — ON becomes OFF, OFF becomes ON.

[Screenshot: Status card showing ON state vs. OFF state side by side]

Try It Yourself

Toggle the Light card to the OFF state. Then toggle the Wireless Audio card to the OFF state. You should now have two cards showing OFF and two showing ON.

What-if variation: Switch to the Dark theme and toggle the Coffee Maker card off. Does the visual dimming effect look different in the Dark theme compared to Default?

Verify: The Light and Wireless Audio cards show OFF with dimmed styling. The Roller Shades and Coffee Maker cards show ON with full color.

Knowledge Check

• What happens visually when you toggle a status card to OFF?
• Does toggling a card save the state permanently, or does it reset when you reload the page?

Tips & Gotchas

• Tip: The toggle is purely a local UI state change. Refreshing the page resets all cards to their default ON state.
• Gotcha: The entire card is the click target — you don't need to click a specific button. Clicking anywhere on the card toggles it.

Lesson 1.4: Monitoring Solar Energy and Electricity Data {#lesson-1-4-monitoring-solar-energy-and-electricity-data}

What You'll Learn: How to read the Solar Energy widget and the Electricity consumption panel on the Dashboard. These widgets give you an overview of energy usage.

Before You Begin: Complete Lesson 1.2. If you haven't already, complete FS-4: Reading Charts and Visualizations.

Walkthrough

Solar Energy Widget

1. On the Dashboard, locate the Solar Energy Consumption card. It is a small card with a donut chart.
2. The donut chart shows the consumed portion (filled arc) versus the remaining capacity.
3. Below the chart, read the two values: the current consumption (6.421 kWh) and the total capacity (out of 8.421 kWh).
4. The percentage shown in the center of the donut corresponds to the proportion consumed.

Electricity Panel

1. Scroll down on the Dashboard to find the Electricity panel, or navigate to it via the sidebar if it has a dedicated link.
2. The electricity panel shows a time-series chart of electricity consumption in kWh over time.
3. Use the period selector (Week / Month / Year) to switch between different time ranges.
4. Hover over any point on the chart to see the exact kWh value in a tooltip.
5. The list panel alongside the chart shows monthly breakdowns with delta indicators — an up or down arrow showing whether consumption increased or decreased compared to the previous period.

[Screenshot: Electricity panel showing chart and monthly list with delta indicators]

Try It Yourself

On the Electricity panel, switch the period selector to Month. Find the month with the highest consumption value in the list. Then switch to Year view and hover over the highest point on the chart to read its exact value.

Verify: The chart updates when you switch periods, and the tooltip shows a value formatted as {number} kWh.

Knowledge Check

• What unit is used to measure electricity consumption in this panel?
• What does a downward arrow (delta indicator) next to a month's data mean?

Tips & Gotchas

• Tip: The delta indicator color and direction tell you at a glance whether energy usage is trending up or down. A downward arrow typically means consumption decreased, which is a positive outcome.
• Gotcha: The solar energy values are static demonstration data. The electricity chart data is also demonstration data and will look the same on every visit.

Lesson 1.5: Using the Temperature and Humidity Controls {#lesson-1-5-using-the-temperature-and-humidity-controls}

What You'll Learn: How to read and interact with the Temperature and Humidity control panels on the Dashboard. These panels let you view current readings and toggle the control units on or off.

Before You Begin: Complete Lesson 1.2.

Walkthrough

1. On the Dashboard, scroll to find the Temperature panel. It contains two side-by-side control widgets: one for temperature and one for humidity.
2. Each widget displays:
   • A circular arc slider (the Temperature Dragger) showing the current value on a visual scale
   • The current numeric value in the center
   • A power toggle button to turn the unit on or off
   • A mode selector (e.g., Cool / Heat)
3. To change the temperature value, click and drag the thumb (the circular handle) along the arc. Drag clockwise to increase the value, counterclockwise to decrease it.
4. To toggle the temperature unit off, click the power toggle button. The arc dims and dragging is disabled.
5. Click the power toggle again to turn the unit back on. The previous value is restored.
6. The humidity widget works identically — it has its own arc slider, power toggle, and mode selector.

[Screenshot: Temperature panel showing both temperature and humidity arc sliders]

Try It Yourself

On the Humidity widget, click the power toggle to turn it off. Observe that the arc dims. Then click the toggle again to restore it. Next, drag the temperature arc slider to a higher value than its current position.

Verify: The humidity widget dims when toggled off and restores when toggled on. The temperature value updates as you drag the slider.

Knowledge Check

• What happens to the arc slider when you toggle the power off?
• In which direction do you drag the arc slider to increase the value?

Tips & Gotchas

• Tip: If the slider jumps unexpectedly when you click, try clicking closer to the current thumb position before dragging.
• Gotcha: The temperature and humidity values are demonstration data. Changes you make do not persist after a page reload.

Lesson 1.6: Browsing Rooms and Using the Media Player {#lesson-1-6-browsing-rooms-and-using-the-media-player}

What You'll Learn: How to select a room from the floor plan and use the embedded media player. This panel simulates a smart home audio system.

Before You Begin: Complete Lesson 1.2.

Walkthrough

Selecting a Room

1. On the Dashboard, scroll to find the Rooms panel. It displays an SVG floor plan of a residential unit.
2. The floor plan shows four rooms: Kitchen, Bedroom, Living Room, and Hallway. The Living Room is pre-selected by default (shown with a highlighted pattern).
3. Click on the Kitchen area in the floor plan. The Kitchen becomes highlighted and the player panel updates.
4. Click on the Bedroom area. The Bedroom becomes highlighted.
5. Click the same room (Bedroom) again. The player panel expands to show the full media player.

Using the Media Player

Once the player is expanded, you will see:

• Track information: Song title, artist name, and album art
• Progress bar: Shows current playback position. Click or drag to seek.
• Play/Pause button: Starts or pauses playback
• Previous/Next buttons: Navigate to the previous or next track
• Shuffle toggle: Enables random track selection
• Loop toggle: Repeats the current track
• Volume slider: Controls playback volume (0–100)

6. Click the Play/Pause button to start playback.
7. Click the Next button to advance to the next track.
8. Click the Shuffle toggle to enable shuffle mode.
9. Click the collapse arrow (downward arrow icon at the top of the player) to collapse the player view.

[Screenshot: Rooms panel with floor plan and expanded media player]

Try It Yourself

Select the Hallway room by clicking it on the floor plan. Then click the Hallway again to expand the player. Start playback, then use the volume slider to set the volume to approximately 50%. Finally, enable Loop mode and click Next — the same track should restart.

Verify: The volume slider moves to approximately the midpoint. With Loop enabled, clicking Next restarts the current track instead of advancing to the next one.

Knowledge Check

• How do you expand the media player for a selected room?
• What does the Loop toggle do when enabled?

Tips & Gotchas

• Tip: The player initializes with a randomly selected track each time the page loads.
• Gotcha: In Shuffle mode, clicking "Previous" does not return to the last played track — it selects a new random track.

Lesson 1.7: Viewing Security Cameras {#lesson-1-7-viewing-security-cameras}

What You'll Learn: How to browse the security camera feeds and switch between the multi-camera grid view and a focused single-camera view.

Before You Begin: Complete Lesson 1.2.

Walkthrough

1. On the Dashboard, scroll to find the Security Cameras panel. It displays a grid of camera tiles, each showing a camera name and its video feed.
2. In the multi-camera grid view, you can see all available cameras at once.
3. Click on any camera tile to switch to the single-camera view, which enlarges that camera's feed.
4. In single-camera view, look for a back control or button to return to the multi-camera grid.

Note: The exact layout of the return control is defined in the template file, which was not fully available for documentation. Steps 3–4 could not be fully verified from available documentation. See Appendix B for details.

5. The first camera in the list is automatically pre-selected when the panel loads.

[Screenshot: Security cameras panel showing multi-camera grid view]

Try It Yourself

Click on the second camera in the grid to switch to single-camera view. Then use the available control to return to the multi-camera grid view.

Verify: The second camera's feed fills the panel in single-camera view, and you can return to the grid.

Knowledge Check

• What happens when you click a camera tile in the grid view?
• Which camera is pre-selected when the Security Cameras panel first loads?

Tips & Gotchas

• Tip: The camera feeds are demonstration data. In a production deployment, these would show live video streams.
• Gotcha: Refreshing the page always returns to the multi-camera grid view — the selected camera is not saved in the URL.

Lesson 1.8: Checking Contacts and Recent Users {#lesson-1-8-checking-contacts-and-recent-users}

What You'll Learn: How to view the Contacts panel and the Recent Users list on the Dashboard. These panels give you a quick view of your contact network and recent activity.

Before You Begin: Complete Lesson 1.2.

Walkthrough

1. On the Dashboard, scroll to find the Contacts panel.
2. The panel displays two sections:
   • Contacts list: Shows each contact's avatar, name, and relationship type (e.g., "friend", "colleague")
   • Recent Users list: Shows users who have been recently active, with their avatar, name, type, and a timestamp indicating when they were last active
3. Both lists are read-only — you can view the information but cannot edit contacts from this panel.
4. The data loads automatically when the Dashboard opens. If the lists appear empty, the data may still be loading.

Try It Yourself

Scroll through the Contacts list and identify how many contacts are shown. Then look at the Recent Users list and find the contact who was most recently active (the one with the most recent timestamp).

Verify: Both lists are populated with contact data including names, avatars, and type labels.

Knowledge Check

• What information is shown for each entry in the Recent Users list that is NOT shown in the Contacts list?
• Can you edit a contact's information from this panel?

Tips & Gotchas

• Tip: The Contacts panel is a read-only display. To manage contacts, you would need a dedicated contacts management screen (not included in this assessment).
• Gotcha: If both lists appear blank, wait a moment for the data to load. If they remain blank, try refreshing the page.

Module 2: E-Commerce Analytics Dashboard {#module-2-e-commerce-analytics}

Learning Objectives

After completing this module, you will be able to:

• Navigate the E-Commerce section and identify its key analytics widgets
• Read and flip the Earning Card to view earnings breakdowns
• Interpret the Profit Card's front and back views
• Analyze traffic data using the Traffic Reveal Card
• Explore country-level order statistics on the interactive map
• Read visitor analytics charts and statistics
• Monitor user activity across different time periods
• Use the Charts Panel to compare orders and profit data
• Toggle the slide-out statistics panel
• Interpret progress bar metrics in the Progress Section

Estimated Time: 60–80 minutes

Lesson 2.1: Navigating the E-Commerce Section {#lesson-2-1-navigating-the-e-commerce-section}

What You'll Learn: How to access the E-Commerce dashboard and understand its overall layout. The E-Commerce section is the primary analytics hub for store performance data.

Before You Begin: Complete Module 1.

Walkthrough

1. In the sidebar, click E-commerce at the top of the navigation menu (or click the Home/Logo Link in the header). This takes you to the E-Commerce dashboard.
2. The E-Commerce dashboard is a collection of analytics widgets arranged in a responsive grid. Scroll down to see all available widgets.
3. Identify the following major sections:
   • Earning Card — shows earnings data with a flip animation
   • Profit Card — shows profit metrics with a flip animation
   • Traffic Reveal Card — shows traffic data with a reveal animation
   • Country Orders — shows a geographic map of order distribution
   • Visitors Analytics — shows visitor trend charts
   • User Activity — shows user engagement metrics
   • Charts Panel — shows orders and profit charts with period selectors
   • Progress Section — shows KPI progress bars
   • Legend Chart — shows a color-coded legend for chart series

[Screenshot: E-Commerce dashboard overview showing all major widget sections]

Try It Yourself

Scroll through the entire E-Commerce dashboard from top to bottom. Count how many distinct widget cards you can identify. Then scroll back to the top.

Verify: You can identify at least 8 distinct widget sections on the dashboard.

Knowledge Check

• What is the primary purpose of the E-Commerce section?
• Name three widgets you can find on the E-Commerce dashboard.

Tips & Gotchas

• Tip: The E-Commerce dashboard is the default home page. You can always return to it quickly using the Home link in the header.
• Gotcha: All data on the E-Commerce dashboard is demonstration data. Values are pre-set and do not reflect real business data.

Lesson 2.2: Reading the Earning Card {#lesson-2-2-reading-the-earning-card}

What You'll Learn: How to read the Earning Card widget and flip it to see the earnings breakdown pie chart. This card gives you a summary of earnings with two different views.

Before You Begin: Complete Lesson 2.1.

Walkthrough

1. On the E-Commerce dashboard, locate the Earning Card widget.
2. The front face of the card is visible by default. It shows a live-updating chart of earnings data for the selected cryptocurrency, along with the daily income figure and a delta indicator (up or down arrow showing the trend direction).
3. At the top of the front face, you will see currency selector tabs: Bitcoin, Tether, and Ethereum.
4. Click Tether to switch the displayed data to Tether earnings. The chart and income figure update.
5. Click Ethereum to switch to Ethereum data.
6. Locate the flip toggle control on the card (a button or icon that triggers the flip animation).
7. Click the flip toggle. The card animates and flips to show the back face.
8. The back face displays a pie chart showing the proportional breakdown of earnings by category, with a legend showing each slice's name, value, and color.
9. Hover over a pie slice to see its details highlighted in the info display area.
10. Click the flip toggle again to return to the front face.

[Screenshot: Earning Card front face showing chart and currency tabs] [Screenshot: Earning Card back face showing pie chart breakdown]

Try It Yourself

On the Earning Card, switch to Bitcoin using the currency tabs. Note the daily income value shown. Then flip the card to the back face and identify which category has the largest slice in the pie chart. Flip back to the front face.

Verify: The front face shows Bitcoin data. The back face shows a pie chart with labeled slices.

Knowledge Check

• How many cryptocurrency options are available in the Earning Card?
• What does the back face of the Earning Card show?

Tips & Gotchas

• Tip: The front face chart updates every 200 milliseconds with simulated live data. The values will change slightly while you watch.
• Gotcha: Switching currencies resets the live data stream. There may be a brief moment where the chart appears empty before the new data loads.

Lesson 2.3: Analyzing the Profit Card {#lesson-2-3-analyzing-the-profit-card}

What You'll Learn: How to read the Profit Card widget and flip between its front (bar chart) and back (area chart) views.

Before You Begin: Complete Lesson 2.1. If you haven't already, complete FS-4: Reading Charts and Visualizations.

Walkthrough

1. On the E-Commerce dashboard, locate the Profit Card widget.
2. The front face shows an animated bar chart with two data series: Transactions (first series) and Orders (second series). The bars animate in with a bouncing effect when the page loads.
3. Hover over any bar to see a tooltip showing the value formatted as $ {value} (e.g., "$ 42").
4. Locate the flip toggle control on the card.
5. Click the flip toggle to flip to the back face.
6. The back face shows a smooth area chart with a gradient fill, displaying profit trend data over time. Hover over the chart to see dollar-formatted tooltip values.
7. Click the flip toggle again to return to the front face.

Try It Yourself

Flip the Profit Card to the back face. Hover over the highest point on the area chart to read its dollar value. Then flip back to the front face and hover over the tallest bar in the Orders series to read its value.

Verify: Both faces show dollar-formatted values in their tooltips.

Knowledge Check

• What two data series are shown on the front face of the Profit Card?
• How are values formatted in the Profit Card tooltips?

Tips & Gotchas

• Tip: The animated bar entrance effect only plays once when the page loads. If you want to see it again, refresh the page.
• Gotcha: The front and back faces show different types of data visualizations — the front shows a comparison (two series), while the back shows a single trend line.

Lesson 2.4: Exploring the Traffic Reveal Card {#lesson-2-4-exploring-the-traffic-reveal-card}

What You'll Learn: How to use the Traffic Reveal Card to view traffic metrics, switch time periods, and toggle between the summary list and bar chart views.

Before You Begin: Complete Lesson 2.1.

Walkthrough

1. On the E-Commerce dashboard, locate the Traffic Reveal Card widget.
2. The card has a period selector at the top with three options: Week, Month, and Year. The default is Week.
3. The front face shows a traffic summary list with:
   • A date label for the current period
   • A total traffic value
   • A delta indicator (up or down arrow with a value showing the change)
   • A comparison section showing the previous and next period's dates and values
4. Click Month in the period selector. The data refreshes to show monthly traffic figures.
5. Click Year to see annual traffic data.
6. Locate the reveal toggle button on the card (a button that flips between front and back).
7. Click the reveal toggle to switch to the back face, which shows a bar chart of traffic data with labels.
8. Click the reveal toggle again to return to the front face.

Try It Yourself

Switch the Traffic Reveal Card to Year view. Note the total traffic value shown. Then toggle to the back face to see the bar chart for the year. Switch back to Week view on the front face.

Verify: The data updates when you switch periods. The back face shows a bar chart corresponding to the selected period.

Knowledge Check

• What does the delta indicator on the Traffic Reveal Card front face tell you?
• What are the three available time periods for the Traffic Reveal Card?

Tips & Gotchas

• Tip: The delta indicator's direction (up or down) tells you whether traffic increased or decreased compared to the equivalent prior period.
• Gotcha: Switching the period always refreshes both the front and back face data simultaneously.

Lesson 2.5: Viewing Country Order Statistics {#lesson-2-5-viewing-country-order-statistics}

What You'll Learn: How to use the Country Orders map to explore order distribution by country and view per-country order category breakdowns.

Before You Begin: Complete Lesson 2.1. If you haven't already, complete FS-4: Reading Charts and Visualizations.

Walkthrough

1. On the E-Commerce dashboard, locate the Country Orders Statistics card.
2. The card contains an interactive world map and a horizontal bar chart below it.
3. The map defaults to showing USA as the selected country (highlighted).
4. The bar chart below the map is initially empty — it populates when you select a country.
5. Click on a country on the map (for example, click on Germany in Europe). The country highlights on the map.
6. The bar chart below updates to show order category data for Germany, with the country name displayed above the chart.
7. Hover over any bar in the chart to see the exact order count for that category.
8. Click on a different country (for example, France) to update the chart for that country.

[Screenshot: Country Orders card showing map with a selected country and populated bar chart]

Try It Yourself

Click on Canada on the map. Read the country name shown above the bar chart to confirm it updated. Then hover over the longest bar to read its value. Finally, click on Brazil and compare the bar chart values.

Verify: The bar chart title updates to show the selected country name, and the bar values change for each country.

Knowledge Check

• What happens to the bar chart when you first load the Country Orders card (before clicking any country)?
• Can you deep-link to a specific country's data by modifying the URL?

Tips & Gotchas

• Tip: The map is responsive — on smaller screens, the card switches to a larger size to keep the map usable.
• Gotcha: The bar chart starts empty until you click a country. The USA is highlighted on the map by default, but its data is not pre-loaded in the chart.

Lesson 2.6: Reading Visitors Analytics {#lesson-2-6-reading-visitors-analytics}

What You'll Learn: How to interpret the Visitors Analytics widget, which shows Unique Visitors and Page Views trends alongside a pie chart of visitor composition.

Before You Begin: Complete Lesson 2.1. If you haven't already, complete FS-4: Reading Charts and Visualizations.

Walkthrough

1. On the E-Commerce dashboard, locate the Visitors Analytics widget.
2. The widget contains:
   • A chart legend showing two color-coded entries: Unique Visitors and Page Views
   • A composite line chart with two overlapping line series (one for each metric)
   • A pie/donut chart showing the ratio of New Visitors to Return Visitors
3. In the line chart, hover over any data point to see the value in a tooltip.
4. The legend colors correspond to the line colors in the chart — use the legend to identify which line is which.
5. In the pie/donut chart, the filled arc represents New Visitors as a percentage of total visitors. The remaining arc represents Return Visitors.
6. The legend below the pie chart shows the color and label for each segment.

Try It Yourself

In the Visitors Analytics widget, hover over the highest point on the Unique Visitors line (the line corresponding to the first legend color). Read the tooltip value. Then look at the pie chart and estimate what percentage of visitors are new versus returning.

Verify: The tooltip shows a numeric value. The pie chart shows two distinct arcs with different colors.

Knowledge Check

• What two metrics are shown in the Visitors Analytics line chart?
• What does the pie/donut chart in the Visitors Analytics widget represent?

Tips & Gotchas

• Tip: Use the legend colors to identify which line is Unique Visitors and which is Page Views before reading the chart.
• Gotcha: All data in this widget is demonstration data. The values do not reflect real visitor traffic.

Lesson 2.7: Monitoring User Activity {#lesson-2-7-monitoring-user-activity}

What You'll Learn: How to use the User Activity widget to view engagement metrics and switch between weekly, monthly, and yearly views.

Before You Begin: Complete Lesson 2.1.

Walkthrough

1. On the E-Commerce dashboard, locate the User Activity widget.
2. The widget displays a list or table of activity entries, each showing:
   • A date label
   • A pages visited count (number of pages viewed)
   • A new visits count
   • A delta indicator (up or down arrow) showing whether the metric improved or declined
3. At the top of the widget, find the period selector with three options: Week, Month, and Year. The default is Month.
4. Click Week to switch to weekly data. The list updates with weekly entries.
5. Click Year to see annual data.
6. The delta indicator direction tells you whether the metric improved (up arrow) or declined (down arrow) compared to the equivalent prior period.

Try It Yourself

Switch the User Activity widget to Year view. Find the entry with the highest pages visited count. Note whether its delta indicator points up or down. Then switch to Week view and compare the scale of values.

Verify: The data updates when you switch periods. Delta indicators are visible on each entry.

Knowledge Check

• What does a downward delta indicator mean in the User Activity widget?
• What is the default time period shown when the User Activity widget first loads?

Tips & Gotchas

• Tip: The delta indicator is a quick way to spot trends without reading exact numbers.
• Gotcha: Switching periods always fetches fresh data. There is no loading indicator, so the list may briefly show old data before updating.

Lesson 2.8: Reading the Charts Panel {#lesson-2-8-reading-the-charts-panel}

What You'll Learn: How to use the Charts Panel to compare orders and profit data across different time periods, and how to switch between the Orders and Profit chart tabs.

Before You Begin: Complete Lesson 2.1. If you haven't already, complete FS-4: Reading Charts and Visualizations.

Walkthrough

1. On the E-Commerce dashboard, locate the Charts Panel widget. It has a header with a period selector and a chart legend.
2. The chart legend in the header shows three color-coded entries: Payment, Canceled, and All orders.
3. The period selector offers three options: Week, Month, and Year. The default is Week.
4. The chart area has two tabs: Orders and Profit.
5. The Orders tab (default) shows a multi-line area chart with three overlapping series corresponding to the legend colors.
6. Hover over any data point to see a tooltip with the rounded integer value.
7. Click the Profit tab to switch to the grouped bar chart showing profit data.
8. Click Month in the period selector. Both the Orders and Profit charts update with monthly data.
9. Click the Orders tab to return to the orders view.

[Screenshot: Charts Panel showing Orders tab with period selector and legend]

Try It Yourself

Switch the Charts Panel to Year view. Click the Profit tab and hover over the tallest bar to read its value. Then switch back to Week view and click the Orders tab.

Verify: The chart data updates when you switch periods. The Profit tab shows a bar chart, and the Orders tab shows a line/area chart.

Knowledge Check

• What three data series are shown in the Charts Panel legend?
• What type of chart is shown on the Profit tab?

Tips & Gotchas

• Tip: When switching tabs, the chart may briefly appear blank while it resizes to fit the newly visible container. This is normal behavior.
• Gotcha: The period selector affects both the Orders and Profit tabs simultaneously — switching to Month updates both charts.

Lesson 2.9: Using the Slide-Out Statistics Panel {#lesson-2-9-using-the-slide-out-statistics-panel}

What You'll Learn: How to toggle the slide-out visitors statistics panel in the E-Commerce section. This panel reveals additional statistics alongside the main content.

Before You Begin: Complete Lesson 2.1.

Walkthrough

1. On the E-Commerce dashboard, locate the Slide Out widget or section.
2. By default, the statistics panel is hidden — only the main content area is visible.
3. Locate the toggle button that controls the slide-out panel (a button or icon in the widget).
4. Click the toggle button. The visitors statistics panel slides into view alongside the main content.
5. The statistics panel shows visitor-related metrics.
6. Click the toggle button again. The panel slides back out of view.

Note: The exact label and position of the toggle button is defined in the template file, which was not fully available for documentation. Steps 3–6 could not be fully verified from available documentation.

Try It Yourself

Toggle the slide-out panel open, then closed, then open again. Observe the animation as the panel slides in and out.

Verify: The panel appears and disappears with each click of the toggle button.

Knowledge Check

• What is the default state of the slide-out statistics panel when the page loads?
• Does the panel state (open/closed) persist if you refresh the page?

Tips & Gotchas

• Tip: The panel state is not saved in the URL. Refreshing the page always starts with the panel closed.
• Gotcha: Rapid repeated clicking of the toggle may cause the panel to appear mid-animation. This is a known behavior with no debounce applied.

Lesson 2.10: Reading the Progress Section {#lesson-2-10-reading-the-progress-section}

What You'll Learn: How to interpret the Progress Section widget, which shows key e-commerce metrics as labeled progress bars.

Before You Begin: Complete Lesson 2.1. If you haven't already, complete FS-7: Using Progress Bars and Spinners.

Walkthrough

1. On the E-Commerce dashboard, locate the Progress Section widget.
2. The widget displays a list of metrics, each shown as a labeled progress bar. Each entry includes:
   • A title (the metric name, e.g., "Marketplace")
   • A value (the numeric figure for that metric)
   • A progress bar showing the active progress as a percentage fill
   • A description providing context for the metric
3. Read each metric's title and value to understand what is being measured.
4. The fill level of each progress bar visually represents the activeProgress percentage — a fuller bar means a higher percentage.
5. This widget is read-only — you cannot interact with the progress bars.

Try It Yourself

In the Progress Section, identify the metric with the highest progress bar fill level. Read its title, value, and description. Then identify the metric with the lowest fill level.

Verify: You can identify the highest and lowest metrics by comparing the visual fill levels of the progress bars.

Knowledge Check

• Can you interact with the progress bars in the Progress Section, or are they read-only?
• What four pieces of information does each metric entry in the Progress Section show?

Tips & Gotchas

• Tip: The progress bar fill level is a visual representation of the activeProgress percentage, not necessarily the raw value. Two metrics with similar values might have very different fill levels if their scales differ.
• Gotcha: All data in the Progress Section is demonstration data.

Module 3: Working with Data Tables {#module-3-working-with-data-tables}

Learning Objectives

After completing this module, you will be able to:

• Sort, filter, and paginate the Smart Table
• Add new records using the inline add form
• Edit existing records inline
• Delete records with confirmation
• Navigate and sort the Tree Grid
• Expand and collapse tree rows in the Tree Grid

Estimated Time: 40–50 minutes

Lesson 3.1: Using the Smart Table — Viewing and Filtering Records {#lesson-3-1-using-the-smart-table}

What You'll Learn: How to view, sort, and filter records in the Smart Table. This is the primary data grid in the application and supports full CRUD operations.

Before You Begin: Complete FS-3: Working with Data Tables.

Walkthrough

1. In the sidebar, navigate to Tables & Data > Smart Table.
2. The table displays a list of person records with six columns: ID, First Name, Last Name, Username, E-mail, and Age.
3. Below each column header is a filter input field. Type in any filter field to narrow the displayed rows.
4. Click the First Name column header to sort the table alphabetically by first name (ascending). An arrow indicator appears next to the header.
5. Click the First Name header again to sort in descending order.
6. In the Last Name filter field, type s to show only records where the last name contains the letter "s". The table updates immediately.
7. Clear the filter by deleting the s from the Last Name filter field.
8. If the table has more than one page of results, use the pagination controls at the bottom to navigate between pages.

[Screenshot: Smart Table with filter applied showing filtered results]

Try It Yourself

Sort the Smart Table by Age in descending order (oldest first). Then apply a filter in the Username field by typing a to show only usernames containing the letter "a". Count how many records match.

Verify: The table is sorted by Age descending, and only records with "a" in the username are shown.

Knowledge Check

• Does filtering in the Smart Table require pressing Enter, or does it apply automatically?
• How do you sort a column in descending order?

Tips & Gotchas

• Tip: You can combine filters across multiple columns. For example, filter by Last Name AND Username simultaneously.
• Gotcha: All changes to the Smart Table (add, edit, delete) are in-memory only. Refreshing the page resets everything to the original dataset.

Lesson 3.2: Adding and Editing Records in the Smart Table {#lesson-3-2-adding-and-editing-records}

What You'll Learn: How to add new records and edit existing records using the Smart Table's inline editing features.

Before You Begin: Complete Lesson 3.1.

Walkthrough

Adding a New Record

1. On the Smart Table page, locate the Add New button (a plus icon) in the table toolbar at the top.
2. Click the Add New button. A blank row appears at the top of the table with editable input fields for all columns.
3. Click the ID field in the new row and type 999.
4. Click the First Name field and type Training.
5. Click the Last Name field and type User.
6. Click the Username field and type traininguser.
7. Click the E-mail field and type training@example.com.
8. Click the Age field and type 30.
9. Click the checkmark (Save) button to confirm the new record. The row is added to the table.

Editing an Existing Record

10. Find any existing row in the table. Click the Edit button (pencil icon) on that row.
11. The row transforms into an editable form with the current values pre-filled.
12. Change the First Name field to a different value.
13. Click the checkmark (Save) button to save the change.
14. To cancel an edit without saving, click the X (Cancel) button instead.

[Screenshot: Smart Table with inline add row visible]

Try It Yourself

Add a new record with the following values: ID = 777, First Name = Practice, Last Name = Record, Username = practicerecord, E-mail = practice@test.com, Age = 25. After adding it, find the record in the table and edit the Age field to 26.

Verify: The new record appears in the table with Age = 26 after editing.

Knowledge Check

• Where does the new blank row appear when you click Add New?
• How do you cancel an edit without saving changes?

Tips & Gotchas

• Tip: No validation is enforced on the input fields. You can enter any text in any field, including non-numeric values in the Age and ID fields.
• Gotcha: There is no auto-generated ID. You must manually enter a unique ID for each new record. The table does not prevent duplicate IDs.

Lesson 3.3: Deleting Records from the Smart Table {#lesson-3-3-deleting-records}

What You'll Learn: How to delete records from the Smart Table using the confirmation dialog. This lesson also covers the error recovery process if you accidentally initiate a deletion.

Before You Begin: Complete Lesson 3.2. You should have at least one record in the table (the one you added in the previous lesson).

Walkthrough

1. On the Smart Table page, find the record you added in Lesson 3.2 (First Name: "Practice", Last Name: "Record").
2. Click the Delete button (trash icon) on that row.
3. A browser confirmation dialog appears with the message: "Are you sure you want to delete?"
4. Click OK to confirm the deletion. The row is removed from the table.
5. Now try the cancellation flow: click the Delete button on any other row.
6. When the confirmation dialog appears, click Cancel instead of OK.
7. The row is preserved — no deletion occurs.

Try It Yourself

Add a new record: ID = 888, First Name = Delete, Last Name = Me, Username = deleteme, E-mail = delete@test.com, Age = 20. Then delete it using the Delete button and confirm with OK.

What-if variation: Try clicking Delete on a record and then clicking Cancel in the confirmation dialog. Confirm the record is still in the table.

Verify: The "Delete Me" record disappears after confirming deletion. Records survive when you cancel the deletion.

Knowledge Check

• What message appears in the confirmation dialog when you click Delete?
• What happens if you click Cancel in the deletion confirmation dialog?

Tips & Gotchas

• Tip: The confirmation dialog is your safety net against accidental deletions. Always read it before clicking OK.
• Gotcha: Once you click OK in the confirmation dialog, the deletion is immediate and cannot be undone (within the current session). There is no undo function.

Lesson 3.4: Navigating the Tree Grid {#lesson-3-4-navigating-the-tree-grid}

What You'll Learn: How to navigate the Tree Grid, which displays hierarchical file system data with expandable parent rows (directories) and nested child rows (files).

Before You Begin: Complete FS-3: Working with Data Tables.

Walkthrough

1. In the sidebar, navigate to Tables & Data > Tree Grid.
2. The table displays a file system structure with four columns: Name, Size, Kind, and Items.
3. Rows with a toggle arrow (expand/collapse icon) are directories — they can contain child rows.
4. Rows with a file icon are files — they have no children.
5. Click the toggle arrow on any directory row to expand it. Child file rows appear below the directory.
6. Click the toggle arrow again to collapse the directory and hide its children.
7. Click the Name column header to sort the table by name. An arrow indicator shows the sort direction.
8. Click the Size column header to sort by file size.
9. Click the Name header again to reverse the sort order.

[Screenshot: Tree Grid with one directory expanded showing child file rows]

Try It Yourself

Expand the first directory in the Tree Grid. Count how many files it contains. Then sort the table by Kind column. Finally, collapse the directory.

Verify: The directory expands to show its child files. The table re-sorts when you click the Kind column header.

Knowledge Check

• How do you tell the difference between a directory row and a file row in the Tree Grid?
• Can you sort the Tree Grid by clicking column headers?

Tips & Gotchas

• Tip: The Tree Grid uses static demonstration data (a mock file system). The data does not change.
• Gotcha: On narrower screens, some columns may be hidden to fit the available width. This is intentional responsive behavior.

Module 4: Working with Forms and Input Controls {#module-4-working-with-forms}

Learning Objectives

After completing this module, you will be able to:

• Identify and describe the available form layout patterns
• Use various form input controls (text, radio, rating)
• Select dates using the datepicker with min/max constraints
• Identify button variants by status, shape, and size
• Use the Nebular Select dropdown to choose options

Estimated Time: 35–45 minutes

Lesson 4.1: Exploring Form Layout Patterns {#lesson-4-1-exploring-form-layout-patterns}

What You'll Learn: How to identify the different form layout patterns available in the application's design system. This knowledge helps you recognize and use consistent form structures across the application.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Forms > Form Layouts.
2. The page displays multiple form layout examples, each demonstrating a different structural pattern.
3. Scroll through the page and identify the following layout types:
   • Horizontal layout: Labels appear to the left of input fields on the same row
   • Vertical/stacked layout: Labels appear above input fields
   • Inline layout: Multiple fields appear on a single row
   • Grid-based layout: Fields are arranged in a multi-column grid
4. Each layout section is typically wrapped in a card with a descriptive header.
5. The form fields shown are for demonstration — you can type in them, but the data is not submitted anywhere.

Try It Yourself

On the Form Layouts page, find the horizontal layout example. Type a sample name in the first text field. Then find the vertical layout example and type a different value in its first field. Observe how the label positioning differs between the two layouts.

Verify: You can type in the fields. The label appears to the left of the field in horizontal layout and above the field in vertical layout.

Knowledge Check

• In a horizontal form layout, where does the label appear relative to the input field?
• Are the form fields on this page connected to any data submission logic?

Tips & Gotchas

• Tip: Use this page as a reference when you need to decide which layout pattern to use for a new form in the application.
• Gotcha: The Form Layouts page is a showcase only. No data entered here is saved or submitted.

Lesson 4.2: Using Form Input Controls {#lesson-4-2-using-form-input-controls}

What You'll Learn: How to interact with the various form input controls demonstrated on the Form Inputs page, including star ratings, heart ratings, and radio button groups.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Forms > Form Inputs.
2. The page displays various input control demonstrations.
3. Locate the Star Rating control. It shows a row of star icons with 2 stars pre-selected (highlighted).
4. Click on the 4th star to change the rating to 4. The stars update immediately.
5. Locate the Heart Rating control. It shows heart icons with 4 hearts pre-selected.
6. Click on the 2nd heart to change the rating to 2.
7. Locate the Radio Button Group. One option is pre-selected (the second option, "This is value 2").
8. Click on a different radio option to change the selection. Only one option can be selected at a time.

Try It Yourself

Set the Star Rating to 5 stars (click the last star). Set the Heart Rating to 1 heart (click the first heart). In the Radio Button Group, select the first option.

Verify: The star rating shows 5 filled stars. The heart rating shows 1 filled heart. The first radio option is selected.

Knowledge Check

• How many stars are pre-selected in the Star Rating control when the page first loads?
• Can you select multiple options in a Radio Button Group?

Tips & Gotchas

• Tip: Rating controls update immediately on click — no submit button is needed.
• Gotcha: The Form Inputs page is a showcase. The values you set are not saved anywhere.

Lesson 4.3: Using the Datepicker {#lesson-4-3-using-the-datepicker}

What You'll Learn: How to use the Nebular datepicker to select dates, including understanding the min/max date constraints that restrict which dates are selectable.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Forms > Datepicker.
2. The page displays several datepicker demonstrations.
3. Locate a datepicker with min/max constraints. This datepicker only allows selecting dates within a 10-day window centered on today (5 days before today to 5 days after today).
4. Click on the datepicker input field to open the calendar popup.
5. The calendar displays the current month. Dates outside the allowed range appear grayed out and cannot be clicked.
6. Click on a valid date (within the allowed range, shown in normal color) to select it. The date populates the input field.
7. Try clicking on a grayed-out date outside the range. Nothing happens — the date is disabled.
8. Click outside the calendar popup to close it without selecting a date.
9. Locate the date range picker demonstration. Click the input field to open it.
10. Click a start date, then click an end date. The range is highlighted between the two selected dates.

[Screenshot: Datepicker open showing grayed-out disabled dates outside the allowed range]

Try It Yourself

Open the datepicker with min/max constraints. Select a date that is 3 days from today (within the allowed range). Verify the date appears in the input field. Then try to click a date that is 10 days from today (outside the range) and confirm it cannot be selected.

Verify: The valid date populates the input field. The out-of-range date cannot be clicked.

Knowledge Check

• What is the allowed date range for the constrained datepicker on this page?
• What visual indicator shows that a date is outside the allowed range?

Tips & Gotchas

• Tip: The allowed date range is calculated relative to today's date when the page loads. If you leave the page open overnight, the range does not update automatically.
• Gotcha: The datepicker is a demonstration. Selected dates are not submitted or saved anywhere.

Lesson 4.4: Using Buttons {#lesson-4-4-using-buttons}

What You'll Learn: How to identify the different button variants available in the application's design system, organized by status, shape, and size.

Before You Begin: If you haven't already, complete FS-5: Understanding Status Indicators and Color Coding.

Walkthrough

1. In the sidebar, navigate to Forms > Buttons.
2. The page displays a visual catalog of button variants organized into sections.
3. Status variants: Find the row of buttons showing the five status colors — Primary (blue), Success (green), Info (teal), Warning (orange), and Danger (red).
4. Shape variants: Find the buttons demonstrating three shapes — Rectangle (sharp corners), Semi-Round (slightly rounded), and Round (pill shape).
5. Size variants: Find the buttons demonstrating five sizes — Tiny, Small, Medium, Large, and Giant.
6. The buttons on this page are display-only — clicking them does not trigger any action.

Try It Yourself

On the Buttons page, identify which button variant would be most appropriate for a destructive action (like deleting a record). Then identify which size would be most appropriate for a primary call-to-action in a form.

Verify: You can identify the Danger (red) status for destructive actions and Medium or Large size for primary actions.

Knowledge Check

• What color is the "Danger" status button?
• What are the three available button shapes?

Tips & Gotchas

• Tip: Use the Danger status for delete or destructive actions, Success for confirmations, and Primary for the main action on a form.
• Gotcha: The buttons on this page are demonstration specimens only — they do not trigger any application logic when clicked.

Lesson 4.5: Using the Nebular Select Dropdown {#lesson-4-5-using-the-nebular-select}

What You'll Learn: How to use the Nebular Select component, which is a styled dropdown that replaces the native HTML select element.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Extra Components > Form Inputs (under the Extra Components section, not the Forms section).
2. The page displays various Nebular form input demonstrations, including the Nebular Select component.
3. Locate a select dropdown on the page. It appears as a styled input field with a dropdown arrow.
4. Click the select dropdown to open the options panel. A list of options appears below the field.
5. Click on any option to select it. The dropdown closes and the selected value appears in the field.
6. Locate a select that has a pre-selected value (the second option is pre-selected by default in the demonstration).
7. Click the dropdown and choose a different option to change the selection.

Note: The exact options available in each select are defined in the template file, which was not fully available for documentation. The specific option labels could not be verified.

Try It Yourself

On the Extra Components > Form Inputs page, find a Nebular Select dropdown that has no pre-selected value (showing a placeholder). Click it and select any option. Then find a dropdown with a pre-selected value and change it to a different option.

Verify: The selected value appears in the dropdown field after each selection.

Knowledge Check

• How do you open a Nebular Select dropdown?
• What is the default pre-selected value in the demonstration select on this page?

Tips & Gotchas

• Tip: The Nebular Select behaves similarly to a native HTML select, but with enhanced styling and accessibility features.
• Gotcha: Selections made on this demonstration page are not saved anywhere.

Module 5: Charts and Data Visualization {#module-5-charts-and-data-visualization}

Learning Objectives

After completing this module, you will be able to:

• Navigate to the Charts section and identify the available chart types
• Read and interact with ECharts stacked area charts
• Read and interact with Chart.js horizontal bar charts
• Read D3 advanced pie charts

Estimated Time: 25–35 minutes

Lesson 5.1: Navigating the Charts Section {#lesson-5-1-navigating-the-charts-section}

What You'll Learn: How to access the Charts section and understand the three chart library demonstrations available.

Before You Begin: Complete FS-4: Reading Charts and Visualizations.

Walkthrough

1. In the sidebar, expand the Charts group.
2. You will see three sub-pages: Echarts, Charts.js, and D3.
3. Each sub-page demonstrates a different charting library integrated into the application:
   • Echarts: Apache ECharts — used for stacked area charts, donut charts, and other complex visualizations
   • Charts.js: Chart.js — used for horizontal bar charts and other standard chart types
   • D3: D3-powered advanced pie chart
4. Click Echarts to navigate to that page.

Try It Yourself

Navigate to each of the three chart pages (Echarts, Charts.js, D3) in sequence. On each page, identify the chart type displayed (area chart, bar chart, or pie chart).

Verify: You can identify a stacked area chart on Echarts, a horizontal bar chart on Charts.js, and a pie chart on D3.

Knowledge Check

• How many chart library demonstrations are available in the Charts section?
• Which chart library is used for the stacked area chart?

Tips & Gotchas

• Tip: The Charts section is a demonstration area. Chart data is randomly generated on each page load.
• Gotcha: Because data is randomly generated, the charts will look different every time you visit.

Lesson 5.2: Reading ECharts Visualizations {#lesson-5-2-reading-echarts-visualizations}

What You'll Learn: How to read and interact with the ECharts stacked area chart, which shows marketing channel performance data across a week.

Before You Begin: Complete Lesson 5.1.

Walkthrough

1. Navigate to Charts > Echarts.
2. The page displays a stacked area line chart with five data series representing marketing channels: Mail marketing, Affiliate advertising, Video ad, Direct interview, and Search engine.
3. The X-axis shows days of the week (Monday through Sunday).
4. The Y-axis shows the cumulative stacked values.
5. The legend at the top lists all five series with color swatches.
6. Hover your mouse over any point on the chart. A cross-axis tooltip appears showing all five series values for that day.
7. Click a legend item (e.g., "Mail marketing") to hide that series. The chart re-renders without it.
8. Click the same legend item again to show it.
9. Notice that the Search engine series (the topmost stack) shows numeric labels above each data point.

[Screenshot: ECharts stacked area chart with tooltip visible]

Try It Yourself

On the ECharts page, hover over Wednesday on the chart and read the tooltip values for all five series. Then click the Video ad legend item to hide it. Observe how the stacked chart changes. Click it again to restore it.

Verify: The tooltip shows five values for Wednesday. The Video ad series disappears and reappears when you click its legend item.

Knowledge Check

• How many data series are shown in the ECharts stacked area chart?
• Which series shows numeric labels above its data points?

Tips & Gotchas

• Tip: In a stacked area chart, each series is drawn on top of the previous one. The tooltip shows the individual value for each series, not the cumulative total.
• Gotcha: The chart data is static (hardcoded) for the ECharts demonstration — it does not change on page reload, unlike the Chart.js demonstration.

Lesson 5.3: Reading Chart.js Visualizations {#lesson-5-3-reading-chartjs-visualizations}

What You'll Learn: How to read the Chart.js horizontal bar chart, which shows two randomly generated datasets across six months.

Before You Begin: Complete Lesson 5.1.

Walkthrough

1. Navigate to Charts > Charts.js.
2. The page displays a horizontal bar chart with two datasets: Dataset 1 and Dataset 2.
3. The Y-axis (vertical) shows month labels: January through June.
4. The X-axis (horizontal) shows numeric values from 0 to 100.
5. The legend is positioned on the right side of the chart, showing color swatches for Dataset 1 and Dataset 2.
6. Hover over any bar to see a tooltip showing the dataset label and value.
7. Click a legend item to toggle the visibility of that dataset.
8. Note that the values are randomly generated — they will be different every time you load the page.

Try It Yourself

On the Charts.js page, identify which month has the longest bar for Dataset 1. Then click the Dataset 2 legend item to hide it. Observe the chart with only Dataset 1 visible. Click Dataset 2 again to restore it.

Verify: Dataset 2 disappears and reappears when you click its legend item.

Knowledge Check

• Where is the legend positioned on the Chart.js horizontal bar chart?
• Are the values in the Chart.js chart the same every time you load the page?

Tips & Gotchas

• Tip: Because values are randomly generated, use the chart for pattern recognition rather than specific value recall.
• Gotcha: The chart does not maintain aspect ratio by default — its height is controlled by the parent container's CSS.

Lesson 5.4: Reading D3 Pie Charts {#lesson-5-4-reading-d3-pie-charts}

What You'll Learn: How to read the D3 advanced pie chart, which shows population data for three countries.

Before You Begin: Complete Lesson 5.1.

Walkthrough

1. Navigate to Charts > D3.
2. The page displays an advanced pie chart showing population data for three countries: Germany (8,940,000), USA (5,000,000), and France (7,200,000).
3. The chart consists of a pie graphic on the left and a legend panel on the right.
4. The legend panel shows each country's name, its absolute population value, and its percentage of the total.
5. Hover over any pie segment to see a tooltip with the country name and value.
6. The chart uses theme-aware colors — the segment colors change when you switch themes.

Try It Yourself

On the D3 page, identify which country has the largest pie segment. Read its percentage from the legend panel. Then switch to the Dark theme and observe how the segment colors change. Switch back to Default.

Verify: Germany has the largest segment (approximately 42% of the total). The colors change when you switch themes.

Knowledge Check

• Which three countries are represented in the D3 pie chart?
• Where can you find the percentage breakdown for each country?

Tips & Gotchas

• Tip: The legend panel on the right shows both absolute values and percentages, making it easy to compare countries without reading the pie segments directly.
• Gotcha: The D3 chart data is hardcoded and does not change on page reload.

Module 6: Maps {#module-6-maps}

Learning Objectives

After completing this module, you will be able to:

• Navigate to the Maps section and identify the available map types
• Pan and zoom the Leaflet map
• View the Google Maps demonstration
• Read the Bubble Map and interpret population data
• Search for a location using the Search Map

Estimated Time: 30–40 minutes

Lesson 6.1: Navigating the Maps Section {#lesson-6-1-navigating-the-maps-section}

What You'll Learn: How to access the Maps section and understand the four map demonstrations available.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, expand the Maps group.
2. You will see four sub-pages: Google Maps, Leaflet Maps, Bubble Maps, and Search Maps.
3. Each demonstrates a different map integration:
   • Google Maps: An embedded Google Maps view centered on a fixed location in Germany
   • Leaflet Maps: An open-source Leaflet.js map centered on the eastern United States
   • Bubble Maps: A world map with population data shown as sized bubbles
   • Search Maps: An interactive map with an address search input

Try It Yourself

Navigate to each of the four map pages in sequence. On each page, identify the map type and the default geographic location shown.

Verify: You can identify the four different map types and their default locations.

Knowledge Check

• How many map demonstrations are available in the Maps section?
• Which map page allows you to search for a specific address?

Tips & Gotchas

• Tip: Map pages require an internet connection to load map tiles. If a map appears blank, check your network connection.
• Gotcha: The Google Maps page requires a valid Google Maps API key to function. If the map does not load, this may be a configuration issue — contact your administrator.

Lesson 6.2: Using the Leaflet Map {#lesson-6-2-using-the-leaflet-map}

What You'll Learn: How to pan and zoom the Leaflet map to explore geographic areas.

Before You Begin: Complete Lesson 6.1.

Walkthrough

1. Navigate to Maps > Leaflet Maps.
2. The page displays a Leaflet map inside a card labeled "Leaflet Maps". The map is centered on the eastern United States at zoom level 5.
3. To zoom in: scroll up with your mouse wheel, or click the + button in the top-left corner of the map.
4. To zoom out: scroll down with your mouse wheel, or click the - button.
5. To pan: click and hold the mouse button on the map, then drag in any direction.
6. The map uses OpenStreetMap tiles showing roads, cities, and geographic features.

Try It Yourself

Starting from the default view, zoom in three levels using the scroll wheel. Pan the map to show a different city. Then zoom back out to the original level using the - button.

Verify: The map zooms in and out, and panning moves the visible area.

Knowledge Check

• What are two ways to zoom in on the Leaflet map?
• What map tile provider does the Leaflet map use?

Tips & Gotchas

• Tip: The map remembers your pan/zoom position while you stay on the page, but resets to the default view if you navigate away and return.
• Gotcha: The Leaflet map uses http:// tile URLs. In some browser configurations, this may trigger a mixed-content warning if the application is served over HTTPS.

Lesson 6.3: Using the Google Maps View {#lesson-6-3-using-the-google-maps-view}

What You'll Learn: How to view and interact with the Google Maps demonstration, which shows a fixed location in Germany.

Before You Begin: Complete Lesson 6.1.

Walkthrough

1. Navigate to Maps > Google Maps.
2. The page displays a Google Maps view centered on coordinates in the Hamm, North Rhine-Westphalia area of Germany.
3. Use the standard Google Maps controls to zoom in and out, and to pan the map.
4. The map is a standard embedded Google Maps view — all standard Google Maps interactions (Street View, satellite view, etc.) are available if configured.

Note: The Google Maps page requires a valid Google Maps API key. If the map does not load, contact your system administrator.

Try It Yourself

On the Google Maps page, zoom in to identify the city shown at the default coordinates. Then zoom out to see the surrounding region.

Verify: The map shows a location in Germany. You can zoom and pan using standard Google Maps controls.

Knowledge Check

• What country is shown at the default coordinates on the Google Maps page?
• What should you do if the Google Maps page does not load?

Tips & Gotchas

• Tip: The Google Maps view is a fixed demonstration. The coordinates cannot be changed from the UI.
• Gotcha: Google Maps requires a valid API key and may be subject to usage quotas. If the map shows an error, this is a configuration issue.

Lesson 6.4: Using the Bubble Map {#lesson-6-4-using-the-bubble-map}

What You'll Learn: How to read the Bubble Map, which visualizes world population data as sized bubbles on a geographic map.

Before You Begin: Complete Lesson 6.1. If you haven't already, complete FS-4: Reading Charts and Visualizations.

Walkthrough

1. Navigate to Maps > Bubble Maps.
2. The page displays a world map with colored bubbles positioned at each country's geographic center.
3. Bubble size is proportional to the country's population — larger bubbles represent more populous countries.
4. Bubble color is randomly assigned from the theme's color palette (primary, info, success, warning, danger).
5. Hover over any bubble to see a tooltip showing the country name and its population value.
6. You can pan the map by clicking and dragging.
7. You can zoom using the scroll wheel.

[Screenshot: Bubble Map showing world map with population bubbles of varying sizes]

Try It Yourself

On the Bubble Map, find the largest bubble (the most populous country). Hover over it to confirm the country name and population. Then find the smallest visible bubble and hover over it to read its data.

Verify: The largest bubble shows China or India (the most populous countries). The tooltip shows the country name and population value.

Knowledge Check

• What does the size of each bubble represent on the Bubble Map?
• What does the color of each bubble represent?

Tips & Gotchas

• Tip: The bubble colors are randomly assigned on each page load — they do not carry semantic meaning (unlike the status color system).
• Gotcha: Some very small countries may have bubbles too small to hover over easily. Try zooming in to find them.

Lesson 6.5: Searching for a Location on the Map {#lesson-6-5-searching-for-a-location}

What You'll Learn: How to use the Search Map to find a specific address and center the map on that location.

Before You Begin: Complete Lesson 6.1.

Walkthrough

1. Navigate to Maps > Search Maps.
2. The page displays a map (centered on your current location if geolocation is permitted, or on a default location) and a search input field.
3. Click the search input field at the top of the page.
4. Begin typing an address, such as 10 Downing Street, London. As you type, autocomplete suggestions appear in a dropdown below the field.
5. Click on one of the autocomplete suggestions to select it.
6. The map re-centers on the selected address at a city-level zoom.
7. If you type text without selecting a suggestion, the map does not update — you must select from the dropdown.

Note: The Search Map uses Google Maps Places Autocomplete, which requires a valid API key and internet access. If suggestions do not appear, contact your administrator.

Try It Yourself

Search for Eiffel Tower, Paris using the search input. Select the autocomplete suggestion when it appears. Observe the map re-centering on Paris.

Verify: The map re-centers on Paris after you select the autocomplete suggestion.

Knowledge Check

• Do you need to press Enter to search, or do you select from the autocomplete dropdown?
• What happens if you type an address but do not select a suggestion from the dropdown?

Tips & Gotchas

• Tip: The search is restricted to address-type results. Searching for a business name may not return results — try using a street address instead.
• Gotcha: If you clear the search field, the map stays at its last position. It does not reset to the default location.

Module 7: Modal Overlays and Notifications {#module-7-modal-overlays}

Learning Objectives

After completing this module, you will be able to:

• Open and dismiss dialogs using multiple methods
• Use the name prompt dialog to enter and submit data
• Open and close window overlays
• Configure and trigger toast notifications with different settings
• Identify tooltips and popovers and understand their behavior

Estimated Time: 35–45 minutes

Lesson 7.1: Opening and Dismissing Dialogs {#lesson-7-1-opening-and-dismissing-dialogs}

What You'll Learn: How to open dialogs using different configurations and dismiss them using various methods. This lesson covers the full range of dialog behaviors available in the application.

Before You Begin: Complete FS-6: Using Modal Overlays.

Walkthrough

1. In the sidebar, navigate to Modal & Overlays > Dialog.
2. The page shows multiple buttons, each opening a dialog with different configuration.
3. Click the button that opens the basic dialog (with a title). A dialog appears centered on the screen with a dark backdrop.
4. Press Escape to dismiss it.
5. Click the same button again. This time, click the dark backdrop area outside the dialog to dismiss it.
6. Click the button that opens the dialog without backdrop (hasBackdrop: false). Notice there is no dark overlay behind the dialog.
7. Close this dialog using the button inside it.
8. Click the button that opens the dialog without backdrop click (closeOnBackdropClick: false). Try clicking outside the dialog — it does not close.
9. Use the button inside the dialog to close it.
10. Click the button that opens the dialog without ESC close (closeOnEsc: false). Press Escape — the dialog does not close.
11. Use the button inside the dialog to close it.

[Screenshot: Dialog open with dark backdrop visible]

Try It Yourself

Open the basic dialog and dismiss it using the Dismiss button inside the dialog (instead of Escape or backdrop click). Then open the dialog without backdrop and close it using its internal button.

Verify: The Dismiss button closes the dialog. The no-backdrop dialog has no dark overlay behind it.

Knowledge Check

• What are three ways to dismiss a standard dialog?
• What is the difference between closeOnBackdropClick: false and hasBackdrop: false?

Tips & Gotchas

• Tip: In production use, dialogs that require explicit confirmation (like delete confirmations) are often configured with closeOnBackdropClick: false to prevent accidental dismissal.
• Gotcha: Multiple dialogs can be open simultaneously. If you click multiple trigger buttons, each opens a new dialog stacked on top.

Lesson 7.2: Using the Name Prompt Dialog {#lesson-7-2-using-the-name-prompt-dialog}

What You'll Learn: How to use the name prompt dialog to enter a value and submit it, and how the submitted value is returned to the parent page.

Before You Begin: Complete Lesson 7.1.

Walkthrough

1. On the Modal & Overlays > Dialog page, find the button that opens the name prompt dialog.
2. Click the button. A dialog appears with a text input field and two buttons: Cancel and Submit.
3. Click the text input field and type Alice.
4. Click the Submit button. The dialog closes.
5. Look at the page below the trigger button — the name "Alice" should now appear in a list of submitted names.
6. Click the trigger button again. Type Bob and click Submit. "Bob" is added to the list.
7. Click the trigger button again. Type Charlie but click Cancel instead of Submit. The dialog closes without adding "Charlie" to the list.
8. Verify that only "Alice" and "Bob" appear in the list.

Try It Yourself

Open the name prompt dialog and submit the name Diana. Then open it again and submit Eve. Finally, open it and click Cancel without entering anything. Verify that only Diana and Eve appear in the submitted names list.

Verify: Diana and Eve appear in the list. The cancelled attempt does not add anything.

Knowledge Check

• What happens to the submitted name after you click Submit in the name prompt dialog?
• Does clicking Cancel add an empty entry to the names list?

Tips & Gotchas

• Tip: The name prompt dialog does not validate the input — you can submit an empty string. However, the page only adds the name to the list if it is a non-empty value.
• Gotcha: The names list resets when you refresh the page. The submitted names are stored only in memory for the current session.

Lesson 7.3: Working with Window Overlays {#lesson-7-3-working-with-window-overlays}

What You'll Learn: How to open and close Nebular window overlays, which are floating panels that can be dragged around the screen.

Before You Begin: Complete FS-6: Using Modal Overlays.

Walkthrough

1. In the sidebar, navigate to Modal & Overlays > Window.
2. The page shows buttons for opening different window configurations.
3. Click the button that opens a window from a template. A floating window panel appears with a title bar and content.
4. Click and drag the window title bar to move the window to a different position on the screen.
5. Click the X button in the window's title bar to close it.
6. Click the button that opens a window with a form (WindowFormComponent). A window appears containing a form with Subject and Text fields.
7. Type something in the Subject field and the Text field.
8. Close the window using the X button in the title bar.
9. Click the button that opens a window without backdrop (hasBackdrop: false). Notice you can still interact with the page behind the window.
10. Close this window using its title bar X button.

Try It Yourself

Open the window with a form. Drag it to the top-right corner of the screen. Type Test Subject in the Subject field. Then close the window. Re-open it — notice the form is blank again (the content is not saved between opens).

Verify: The window can be dragged. The form fields accept input. The window closes with the X button.

Knowledge Check

• How do you move a window overlay to a different position on the screen?
• Does the content you type in the window form persist after you close and reopen the window?

Tips & Gotchas

• Tip: Unlike dialogs, windows do not block interaction with the rest of the page (unless a backdrop is configured).
• Gotcha: The window form does not have a Submit button wired to any action. Typing in the fields is for demonstration only.

Lesson 7.4: Configuring and Triggering Toast Notifications {#lesson-7-4-configuring-toast-notifications}

What You'll Learn: How to configure and trigger toast notifications with different statuses, positions, durations, and behaviors.

Before You Begin: Complete FS-6: Using Modal Overlays and FS-5: Understanding Status Indicators.

Walkthrough

1. In the sidebar, navigate to Modal & Overlays > Toastr.
2. The page shows a configuration panel with several settings and two action buttons: Make Toast and Random Toast.
3. Locate the status selector and choose Success.
4. Locate the position selector and choose Top Right.
5. Set the duration to 3000 (3 seconds).
6. Ensure Has Icon is checked.
7. Click Make Toast. A green success toast appears in the top-right corner of the screen. It disappears after 3 seconds.
8. Change the status to Danger and click Make Toast again. A red danger toast appears.
9. Change the position to Bottom Left and click Make Toast. The toast appears in the bottom-left corner.
10. Click Random Toast several times. Each click shows a toast with a randomly selected status and a quote message.

[Screenshot: Toast notification visible in the top-right corner of the screen]

Try It Yourself

Configure the toast with: Status = Warning, Position = Bottom Right, Duration = 5000, Has Icon = checked. Click Make Toast. The toast should appear in the bottom-right corner, be orange/yellow, and stay visible for 5 seconds.

Verify: The warning toast appears in the bottom-right corner and stays visible for approximately 5 seconds before disappearing.

Knowledge Check

• What color is a "Success" status toast?
• How do you make a toast appear in the bottom-left corner of the screen?

Tips & Gotchas

• Tip: The Prevent Duplicates option prevents the same toast from appearing multiple times if you click Make Toast rapidly. Enable it to avoid a stack of identical toasts.
• Gotcha: Each toast is labeled "Toast 2", "Toast 3", etc. — the number increments with each toast triggered during the session, not across sessions.

Lesson 7.5: Reading Tooltips and Popovers {#lesson-7-5-reading-tooltips-and-popovers}

What You'll Learn: How to trigger and read tooltips and popovers, which are small overlay panels that appear near trigger elements.

Before You Begin: Complete FS-6: Using Modal Overlays.

Walkthrough

Tooltips

1. In the sidebar, navigate to Modal & Overlays > Tooltip.
2. The page displays various tooltip trigger elements (buttons or text with tooltips attached).
3. Hover your mouse over a trigger element. A small tooltip panel appears near it showing descriptive text.
4. Move your mouse away. The tooltip disappears.

Popovers

5. In the sidebar, navigate to Modal & Overlays > Popover.
6. The page displays trigger elements for three types of popovers: a tabs popover, a form popover, and a card popover.
7. Click a trigger element to open its popover. The popover appears anchored to the trigger.
8. For the tabs popover: click between the "What's up?" and "Second Tab" tabs inside the popover.
9. For the form popover: the popover contains a form with Recipients, Subject, and Message fields. Type in the fields to see how the form looks inside a popover.
10. For the card popover: a styled card with a warning header appears.
11. Click outside the popover to dismiss it.

Try It Yourself

On the Popovers page, open the form popover. Type test@example.com in the Recipients field and Hello in the Subject field. Then click outside the popover to dismiss it. Re-open it — the fields are blank again.

Verify: The form popover accepts input. Dismissing and re-opening resets the fields.

Knowledge Check

• How do you trigger a tooltip?
• How do you dismiss a popover?

Tips & Gotchas

• Tip: Tooltips appear on hover; popovers typically appear on click. This distinction helps users understand the interaction model.
• Gotcha: The form inside the form popover has no Submit button wired to any action. It is a visual demonstration only.

Module 8: Rich Text Editors {#module-8-rich-text-editors}

Learning Objectives

After completing this module, you will be able to:

• Use the TinyMCE editor to compose and format rich text content
• Use the CKEditor to compose and format rich text content
• Identify the key toolbar features of each editor

Estimated Time: 20–30 minutes

Lesson 8.1: Using the TinyMCE Editor {#lesson-8-1-using-the-tinymce-editor}

What You'll Learn: How to use the TinyMCE rich text editor to compose and format content. TinyMCE is a WYSIWYG editor — what you see while editing matches the final rendered output.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Editors > TinyMCE.
2. The page displays a card labeled "Tiny MCE" containing the TinyMCE editor.
3. The editor has a toolbar at the top with formatting buttons, and an editable content area below it (320px tall).
4. Click inside the content area and type: This is a test paragraph.
5. Select the text you just typed by clicking and dragging over it.
6. Click the Bold button (B) in the toolbar. The selected text becomes bold.
7. Press Enter to start a new line. Type: Second paragraph.
8. Select "Second paragraph" and click the Italic button (I) in the toolbar.
9. To insert a link: select some text, then click the Link button in the toolbar. A dialog appears asking for the URL. Type https://example.com and confirm.
10. To insert a table: click the Table button in the toolbar and select the desired dimensions.

[Screenshot: TinyMCE editor with formatted content visible]

Try It Yourself

In the TinyMCE editor, type a heading My Report on the first line. Apply Bold formatting to it. On the next line, type a paragraph of at least two sentences. Apply Italic to the second sentence. Insert a simple 2×2 table below the paragraph.

Verify: The heading is bold, the second sentence is italic, and a 2×2 table appears below the paragraph.

Knowledge Check

• What does WYSIWYG mean in the context of TinyMCE?
• Which three plugins are enabled in the TinyMCE editor on this page?

Tips & Gotchas

• Tip: TinyMCE only emits content changes to the application when you type (keyup events). Mouse-only formatting changes (like clicking Bold without typing) may not be captured by the application. If you need to ensure changes are registered, type at least one character after formatting.
• Gotcha: The editor content is not saved when you navigate away from the page. There is no auto-save or submit button on this demonstration page.

Lesson 8.2: Using the CKEditor {#lesson-8-2-using-the-ckeditor}

What You'll Learn: How to use the CKEditor rich text editor, which provides a full-featured WYSIWYG editing experience with a divarea plugin for improved CSS compatibility.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Editors > CKEditor.
2. The page displays a card labeled "CKEditor" containing the CKEditor 4 editor.
3. The editor has a comprehensive toolbar with many formatting options, and an editable content area (320px tall).
4. Click inside the content area and type: CKEditor test content.
5. Select the text and apply Bold formatting using the toolbar.
6. Use the Heading dropdown in the toolbar to change the text to a heading style.
7. Press Enter and type a new line. Use the Numbered List button to start a numbered list.
8. Type three list items, pressing Enter between each.
9. Use Ctrl+Z (or Cmd+Z on Mac) to undo the last action.

Try It Yourself

In the CKEditor, create a short document with: a Heading 2 title (Training Notes), followed by a bulleted list with three items (Item A, Item B, Item C). Then undo the last item using Ctrl+Z.

Verify: The heading appears in heading style. The bulleted list shows two items after the undo.

Knowledge Check

• What keyboard shortcut undoes the last action in CKEditor?
• What is the divarea plugin used for in this CKEditor configuration?

Tips & Gotchas

• Tip: CKEditor supports standard keyboard shortcuts: Ctrl+B for bold, Ctrl+I for italic, Ctrl+U for underline.
• Gotcha: Like TinyMCE, the CKEditor content is not saved when you navigate away. There is no submit button on this demonstration page.

Module 9: UI Features and Component Reference {#module-9-ui-features}

Learning Objectives

After completing this module, you will be able to:

• Understand and apply the application's grid layout system
• Browse the icon library and identify available icon packs
• Identify typography styles and their use cases
• Recognize search field patterns available in the design system

Estimated Time: 25–35 minutes

Lesson 9.1: Exploring the Grid Layout System {#lesson-9-1-exploring-the-grid-layout-system}

What You'll Learn: How the application's grid layout system works and how to use it to structure page layouts.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to UI Features > Grid.
2. The page displays visual examples of the grid layout system, showing how columns and rows are structured.
3. Observe the different column configurations (e.g., equal columns, unequal columns, nested grids).
4. The grid system uses a responsive approach — column widths adjust based on the viewport size.
5. This page is a reference guide. Use it to understand how to structure layouts in the application.

Try It Yourself

On the Grid page, identify an example showing a 3-column equal layout. Then find an example showing a 2-column unequal layout (e.g., one narrow column and one wide column).

Verify: You can identify both layout patterns on the page.

Knowledge Check

• Is the grid layout system responsive (does it adapt to different screen sizes)?
• What is the purpose of the Grid page in the UI Features section?

Tips & Gotchas

• Tip: Use the Grid page as a reference when designing new page layouts. The examples show the available column configurations.
• Gotcha: The Grid page is a static reference — the examples are not interactive.

Lesson 9.2: Browsing the Icon Library {#lesson-9-2-browsing-the-icon-library}

What You'll Learn: How to browse the icon library to find available icons from three different icon packs: Eva Icons, Ionicons, and Font Awesome.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to UI Features > Icons.
2. The page displays a catalog of icons organized into sections by icon pack.
3. Eva Icons section: Shows SVG-based icons from the Eva Icons library (filled variants only — outline variants are filtered out).
4. Ionicons section: Shows font-based icons from the Ionicons library.
5. Font Awesome (Solid) section: Shows solid-style Font Awesome icons.
6. Font Awesome (Regular) section: Shows regular-style Font Awesome icons.
7. Scroll through each section to browse available icons.
8. Note that visiting this page registers the Ionicons and Font Awesome packs globally — they become available throughout the application after visiting this page.

[Screenshot: Icons page showing Eva Icons section with icon grid]

Try It Yourself

On the Icons page, find the magnifying glass (search) icon in the Eva Icons section. Then find a home icon in the Ionicons section. Finally, find a star icon in the Font Awesome Solid section.

Verify: You can locate all three icons in their respective sections.

Knowledge Check

• How many icon packs are demonstrated on the Icons page?
• Why are outline variants of Eva Icons not shown on this page?

Tips & Gotchas

• Tip: When choosing an icon for a UI element, prefer Eva Icons for consistency with the Nebular design system.
• Gotcha: The Icons page filters out Eva outline icons to avoid showing duplicates. If you need an outline variant, it is available — just not shown here.

Lesson 9.3: Reviewing Typography Styles {#lesson-9-3-reviewing-typography-styles}

What You'll Learn: How to identify the typography styles available in the application's design system, including heading levels, body text, and utility text classes.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to UI Features > Typography.
2. The page displays typographic specimens showing all available text styles.
3. Identify the heading levels (H1 through H6) — each progressively smaller.
4. Identify body text styles — the standard paragraph text used throughout the application.
5. Identify caption and label styles — smaller text used for supplementary information.
6. The typography adapts to the active theme — switch themes to see how text colors change.
7. The page also tracks the current breakpoint — the layout may adjust on different screen sizes.

Try It Yourself

On the Typography page, switch to the Dark theme. Observe how the text colors change (light text on dark background). Then switch back to Default.

Verify: Text colors change appropriately when you switch themes.

Knowledge Check

• How many heading levels are available in the typography system?
• Does the typography adapt when you switch themes?

Tips & Gotchas

• Tip: Use the Typography page as a reference when choosing text styles for new UI elements.
• Gotcha: The Typography page is a static reference — the text examples are not interactive.

Lesson 9.4: Exploring Search Field Patterns {#lesson-9-4-exploring-search-field-patterns}

What You'll Learn: How to identify the search field input patterns available in the application's design system.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to UI Features > Animated Searches.
2. The page displays various search field component variants.
3. Each variant shows a different visual style or interaction pattern for search inputs.
4. The search fields are demonstration specimens — typing in them does not trigger any search functionality.

Note: The specific search field variants shown are defined in the template file, which was not fully available for documentation. The exact variants could not be verified.

Try It Yourself

On the Search Fields page, identify at least two visually distinct search field styles. Type a sample query in one of the fields to see how it looks with content.

Verify: You can identify multiple search field styles. Typing in a field shows the text in the styled input.

Knowledge Check

• Are the search fields on this page connected to any search functionality?
• What is the purpose of the Search Fields page?

Tips & Gotchas

• Tip: Use this page as a reference when choosing a search field style for a new feature.
• Gotcha: The search fields are demonstration specimens only. No search results are returned.

Module 10: Extra Components Reference {#module-10-extra-components}

Learning Objectives

After completing this module, you will be able to:

• Select dates using the Calendar and Calendar Kit components
• Interact with the interactive progress bar
• Trigger and observe spinner loading animations
• Identify alert component variants
• Use the chat interface to send messages and trigger bot responses
• Identify Nebular form input variants

Estimated Time: 45–60 minutes

Lesson 10.1: Using the Calendar {#lesson-10-1-using-the-calendar}

What You'll Learn: How to use the Nebular Calendar component to select dates, select date ranges, and interact with a custom day cell calendar.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Extra Components > Calendar.
2. The page displays multiple calendar demonstrations:
   • Standard calendar: A single-date picker
   • Second calendar: Another independent single-date picker
   • Range calendar: A date range picker with a pre-selected range
   • Custom day cell calendar: A calendar using a custom cell renderer
3. Click on any day in the standard calendar to select it. The selected day is highlighted.
4. Click a different day to change the selection.
5. In the range calendar, observe the pre-selected range (3 days inset from the start and end of the current month). Click a new start date, then click an end date to change the range.
6. In the custom day cell calendar, observe that each cell shows the full month name and a mini day grid.

[Screenshot: Calendar page showing standard calendar with a selected date]

Try It Yourself

In the standard calendar, select today's date. Then in the range calendar, select a range from the 5th to the 15th of the current month (if those dates are visible).

Verify: The selected date is highlighted in the standard calendar. The range is highlighted between the 5th and 15th in the range calendar.

Knowledge Check

• How do you select a date range in the range calendar?
• What is unique about the custom day cell calendar compared to the standard calendar?

Tips & Gotchas

• Tip: The range calendar requires two clicks — one for the start date and one for the end date.
• Gotcha: The calendar demonstrations are not connected to any form submission. Selected dates are not saved.

Lesson 10.2: Using the Calendar Kit (Custom Cells) {#lesson-10-2-using-the-calendar-kit}

What You'll Learn: How to interact with the Calendar Kit demonstration, which shows a calendar with custom month cell rendering.

Before You Begin: Complete Lesson 10.1.

Walkthrough

1. In the sidebar, navigate to Extra Components > Calendar Kit.
2. The page displays a calendar where each cell shows the full month name as a title and a mini day-picker grid showing all days of that month.
3. Click on any day within a month cell to select it. The selected day is highlighted.
4. Use the calendar's navigation arrows to move between months/years.

Try It Yourself

On the Calendar Kit page, navigate to the next month using the navigation arrow. Click on the 15th day of that month to select it.

Verify: The calendar navigates to the next month. The 15th day is highlighted after clicking.

Knowledge Check

• What does each cell in the Calendar Kit calendar display?
• How do you navigate to a different month in the Calendar Kit?

Tips & Gotchas

• Tip: The Calendar Kit demonstrates how Nebular's calendar can be customized with completely different cell renderers.
• Gotcha: The Calendar Kit is a developer showcase. The selected date is not connected to any form or data submission.

Lesson 10.3: Working with Progress Bars {#lesson-10-3-working-with-progress-bars}

What You'll Learn: How to interact with the interactive progress bar and understand how the status color changes based on the current value.

Before You Begin: Complete FS-7: Using Progress Bars and Spinners and FS-5: Understanding Status Indicators.

Walkthrough

1. In the sidebar, navigate to Extra Components > Progress Bar.
2. The page displays multiple progress bar demonstrations, including a static showcase and an interactive progress bar.
3. Locate the Interactive Progress Bar section. It shows a progress bar with Decrease and Increase buttons.
4. The progress bar starts at 25% (Danger/red status).
5. Click Increase once. The bar moves to 50% and changes to Warning (orange) status.
6. Click Increase again. The bar moves to 75% and changes to Info (blue) status.
7. Click Increase again. The bar moves to 100% and changes to Success (green) status. The Increase button becomes disabled.
8. Click Decrease once. The bar returns to 75% (Info/blue). The Increase button re-enables.
9. Click Decrease three times to return to 0%. The Decrease button becomes disabled.

Try It Yourself

Starting from 0%, click Increase twice to reach 50%. Verify the color is Warning (orange). Then click Decrease once to return to 25% and verify the color is Danger (red).

Verify: At 50% the bar is orange. At 25% the bar is red. The buttons disable at the boundaries (0% and 100%).

Knowledge Check

• At what percentage value does the progress bar turn green (Success)?
• What happens to the Decrease button when the progress bar reaches 0%?

Tips & Gotchas

• Tip: The status thresholds are: 0–25% = Danger (red), 26–50% = Warning (orange), 51–75% = Info (blue), 76–100% = Success (green).
• Gotcha: The progress bar only moves in steps of 25. You cannot set it to an arbitrary value like 33%.

Lesson 10.4: Working with Spinners {#lesson-10-4-working-with-spinners}

What You'll Learn: How to trigger spinner loading animations and understand the different spinner variants (sizes, colors, in-buttons, in-tabs).

Before You Begin: Complete FS-7: Using Progress Bars and Spinners.

Walkthrough

1. In the sidebar, navigate to Extra Components > Spinner.
2. The main Spinner page shows a toggle button that simulates a 3-second loading animation.
3. Click the toggle button. A spinner appears for 3 seconds, then disappears automatically.
4. Navigate to Extra Components > Spinner sub-pages (if available in the sidebar) to see:
   • Spinner Sizes: Shows spinners in tiny, small, medium, large, and giant sizes
   • Spinner Color: Shows spinners in different status colors
   • Spinner In Buttons: Shows spinners embedded inside button elements
   • Spinner In Tabs: Shows a spinner inside a tabbed interface

Note: The Spinner sub-pages (Sizes, Color, In Buttons, In Tabs) may be accessible via the sidebar or as separate routes. If they are not in the sidebar, navigate to them directly.

5. On the Spinner In Buttons page, click the trigger button for the large button group. The buttons show a spinner for 3 seconds.
6. Click the trigger button for the medium button group. Those buttons show a spinner independently.

Try It Yourself

On the main Spinner page, click the toggle button. While the spinner is visible, click the toggle button again. Observe whether the spinner resets or continues. After the spinner disappears, click the toggle button once more to confirm it works again.

Verify: The spinner appears for approximately 3 seconds. Clicking again while active may extend or reset the timer.

Knowledge Check

• How long does the spinner animation last on the main Spinner page?
• Can the large and medium button group spinners be active at the same time?

Tips & Gotchas

• Tip: In real application use, spinners are tied to actual loading operations. The 3-second timer here is a simulation.
• Gotcha: Clicking the toggle button multiple times in rapid succession queues multiple timers. The spinner may disappear and reappear unexpectedly.

Lesson 10.5: Reading Alert Components {#lesson-10-5-reading-alert-components}

What You'll Learn: How to identify the different alert component variants available in the application's design system.

Before You Begin: Complete FS-5: Understanding Status Indicators.

Walkthrough

1. In the sidebar, navigate to Extra Components > Alert.
2. The page displays various alert component variants demonstrating different statuses, styles, and configurations.
3. Identify alerts in each status color: Success (green), Info (teal), Warning (orange), Danger (red), and Primary (blue).
4. Some alerts may have a close/dismiss button — clicking it dismisses that alert.
5. The alerts on this page are static demonstrations.

Try It Yourself

On the Alert page, identify one alert of each status type (Success, Info, Warning, Danger, Primary). If any alerts have a dismiss button, click one to dismiss it.

Verify: You can identify all five status types. Dismissible alerts disappear when you click their close button.

Knowledge Check

• What color is a "Warning" status alert?
• What is the purpose of the Alert page in the Extra Components section?

Tips & Gotchas

• Tip: Use alerts to communicate important information to users. Choose the status color that matches the severity of the message.
• Gotcha: The Alert page is a showcase. Dismissed alerts do not reappear unless you refresh the page.

Lesson 10.6: Using the Chat Interface {#lesson-10-6-using-the-chat-interface}

What You'll Learn: How to use the chat interface to send messages and trigger automated bot responses based on keyword commands.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Extra Components > Chat.
2. The page displays a chat interface with a pre-populated conversation history.
3. At the bottom of the chat, find the message input field and a send button.
4. Click the message input field and type hi. Press Enter or click the send button.
5. Your message appears on the right side of the chat (as the user "Jonh Doe"). After about 0.5 seconds, the bot responds with a greeting.
6. Type help and send it. The bot responds with a list of available commands.
7. Type image and send it. The bot responds with an image attachment.
8. Type map and send it. The bot responds with a map showing a location.
9. Type quote and send it. The bot responds with a quoted version of your message.

[Screenshot: Chat interface showing a conversation with bot responses]

Try It Yourself

Send the message gif to the bot. Observe the GIF response. Then send file group to see a response with multiple file attachments. Finally, send a message that doesn't match any command (e.g., hello world) and read the bot's default response.

Verify: The bot responds with a GIF for "gif", multiple files for "file group", and a default message for unrecognized input.

Knowledge Check

• What command do you type to get a list of all available bot commands?
• What type of response does the bot give when you type map?

Tips & Gotchas

• Tip: Type help first to see all available bot commands. This is the quickest way to learn what the bot can do.
• Gotcha: The bot keyword matching is case-insensitive. "IMAGE", "image", and "Image" all trigger the same response.

Lesson 10.7: Exploring Form Input Variants {#lesson-10-7-exploring-form-input-variants}

What You'll Learn: How to identify the different Nebular form input variants available in the design system, including status states, sizes, and input with icons.

Before You Begin: Complete FS-5: Understanding Status Indicators.

Walkthrough

1. In the sidebar, navigate to Extra Components > Form Inputs (under Extra Components, not the Forms section).
2. The page displays Nebular form input variants organized by category.
3. Identify inputs in different status states: Basic, Primary, Success, Warning, Danger, Info — each with a distinct border color.
4. Identify inputs in different sizes: Tiny, Small, Medium, Large, Giant.
5. Identify inputs with prefix/suffix icons (icons inside the input field).
6. Identify disabled and readonly input states.
7. The inputs are demonstration specimens — you can type in them, but the values are not saved.

Try It Yourself

On the Form Inputs page, find the Danger status input (red border). Type a sample value in it. Then find the Giant size input and type a different value. Compare the visual sizes.

Verify: The Danger input has a red border. The Giant input is noticeably larger than the Medium input.

Knowledge Check

• What visual indicator distinguishes a "Danger" status input from a "Success" status input?
• How many size variants are available for Nebular form inputs?

Tips & Gotchas

• Tip: Use status colors on inputs to communicate validation state — Success for valid, Danger for invalid, Warning for caution.
• Gotcha: The form inputs on this page are demonstration specimens. No values are saved or validated.

Module 11: Handling Errors and Edge Cases {#module-11-handling-errors}

Learning Objectives

After completing this module, you will be able to:

• Recognize the 404 Not Found page and understand when it appears
• Navigate back to the home page from the 404 page

Estimated Time: 5–10 minutes

Lesson 11.1: Understanding the 404 Not Found Page {#lesson-11-1-understanding-the-404-page}

What You'll Learn: What the 404 Not Found page looks like and how to navigate back to the application from it. This page appears when you try to access a URL that does not exist in the application.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough

1. In the sidebar, navigate to Miscellaneous > 404.
2. The page displays a "Not Found" error message indicating the requested page does not exist.
3. The page includes a Go to Home button or link.
4. Click the Go to Home button. You are navigated to the application's home page (E-commerce Dashboard).

Try It Yourself

Navigate to the 404 page via the sidebar. Read the error message. Then use the Go to Home button to return to the E-commerce Dashboard.

Verify: You are returned to the E-commerce Dashboard after clicking Go to Home.

Knowledge Check

• When would you see the 404 Not Found page in normal application use?
• What is the only interactive element on the 404 page?

Tips & Gotchas

• Tip: If you ever land on a 404 page unexpectedly, use the Go to Home button or the Home link in the header to return to a known-good location.
• Gotcha: The 404 page is also accessible via the sidebar under Miscellaneous > 404 for demonstration purposes. In production, you would only see it when navigating to a non-existent URL.

Capstone Exercise {#capstone-exercise}

Overview

This capstone exercise combines skills from Modules 1, 2, 3, 7, and 10. Complete it without step-by-step instructions — use only the goal description and success criteria below.

You should be able to complete this exercise in approximately 20–30 minutes.

Scenario

You are an e-commerce administrator reviewing the application's analytics and data management capabilities. Your task is to:

1. Review the E-Commerce Dashboard — Switch to the Cosmic theme. On the E-Commerce dashboard, flip the Earning Card to its back face and identify the largest pie slice. Flip it back to the front face and switch to the Ethereum currency. Note the daily income value shown.

2. Explore Country Orders — On the Country Orders map, click on Japan to view its order category data. Hover over the longest bar in the chart to read its value.

3. Manage Smart Table Records — Navigate to the Smart Table. Add a new record with these values: ID = 500, First Name = Capstone, Last Name = Test, Username = capstonetest, E-mail = capstone@test.com, Age = 35. Sort the table by Age descending to verify your record appears. Then delete the record you just added (confirm with OK).

4. Configure a Toast Notification — Navigate to the Toastr page. Configure a toast with: Status = Info, Position = Top Left, Duration = 4000. Click Make Toast and observe it appear in the top-left corner.

5. Use the Chat — Navigate to the Chat page. Send the message image to the bot. Then send quote and read the bot's response.

Success Criteria

• You identified the largest pie slice on the Earning Card back face
• You switched the Earning Card to Ethereum and noted the daily income
• You selected Japan on the Country Orders map and read a bar chart value
• You added the Capstone Test record to the Smart Table
• The record appeared when sorted by Age descending
• You deleted the record using the confirmation dialog
• An Info (teal) toast appeared in the top-left corner of the screen
• The bot responded with an image to your "image" message
• The bot quoted your "quote" message back to you
• You switched back to the Default theme at the end

Glossary {#glossary}

Skills Checklist {#skills-checklist}

Use this checklist to track your progress. Check off each skill as you complete it.

Foundation Skills

• I can navigate the application using the header, sidebar, and footer
• I can switch between the four available themes
• I can sort, filter, and paginate a data table
• I can read chart tooltips and interact with chart legends
• I can identify the five status colors and their meanings
• I can open, interact with, and dismiss dialogs, windows, and toasts
• I can interact with progress bars and spinners

Module 1: Getting Oriented

• I can navigate to any section using the sidebar menu
• I can identify the key widgets on the main Dashboard
• I can toggle device status cards between ON and OFF
• I can read the Solar Energy widget
• I can switch time periods on the Electricity panel
• I can drag the temperature arc slider to change values
• I can toggle the temperature/humidity power on and off
• I can select a room on the floor plan
• I can play, pause, skip, shuffle, and loop tracks in the media player
• I can adjust the volume using the volume slider
• I can switch between multi-camera and single-camera views
• I can view the Contacts and Recent Users lists

Module 2: E-Commerce Analytics

• I can navigate the E-Commerce section and identify its widgets
• I can flip the Earning Card and switch currencies
• I can flip the Profit Card and read both chart faces
• I can switch periods and toggle views on the Traffic Reveal Card
• I can select a country on the Country Orders map and read its chart
• I can read the Visitors Analytics line chart and pie chart
• I can switch periods on the User Activity widget
• I can switch periods and tabs on the Charts Panel
• I can toggle the slide-out statistics panel
• I can read progress bar metrics in the Progress Section

Module 3: Working with Data Tables

• I can sort the Smart Table by clicking column headers
• I can filter the Smart Table using the filter input fields
• I can navigate between pages using pagination controls
• I can add a new record using the inline add form
• I can edit an existing record inline
• I can cancel an edit without saving
• I can delete a record and confirm the deletion
• I can cancel a deletion to preserve the record
• I can expand and collapse directory rows in the Tree Grid
• I can sort the Tree Grid by clicking column headers

Module 4: Working with Forms

• I can identify horizontal, vertical, and inline form layout patterns
• I can interact with star and heart rating controls
• I can select a radio button option
• I can open a datepicker and select a valid date
• I can identify disabled (out-of-range) dates in the datepicker
• I can select a date range using the range picker
• I can identify button variants by status, shape, and size
• I can open a Nebular Select dropdown and choose an option

Module 5: Charts and Data Visualization

• I can navigate to the three chart library pages
• I can hover over ECharts data points to read tooltip values
• I can toggle ECharts series visibility using the legend
• I can read the Chart.js horizontal bar chart
• I can toggle Chart.js dataset visibility using the legend
• I can read the D3 advanced pie chart and its legend panel

Module 6: Maps

• I can navigate to the four map pages
• I can pan and zoom the Leaflet map
• I can view the Google Maps demonstration
• I can read bubble sizes and tooltips on the Bubble Map
• I can search for an address using the Search Map autocomplete

Module 7: Modal Overlays

• I can open a dialog and dismiss it using Escape, backdrop click, and the Dismiss button
• I can identify dialogs configured without backdrop or without ESC close
• I can use the name prompt dialog to submit a value
• I can open, drag, and close a window overlay
• I can configure toast status, position, and duration
• I can trigger a toast notification and observe it auto-dismiss
• I can trigger tooltips by hovering
• I can open and dismiss popovers

Module 8: Rich Text Editors

• I can type and format text in the TinyMCE editor
• I can insert a link using the TinyMCE toolbar
• I can insert a table using the TinyMCE toolbar
• I can type and format text in the CKEditor
• I can create a numbered or bulleted list in CKEditor
• I can undo actions in CKEditor using Ctrl+Z

Module 9: UI Features

• I can identify grid layout patterns on the Grid page
• I can browse icons across all three icon packs
• I can identify typography styles (headings, body, captions)
• I can identify search field pattern variants

Module 10: Extra Components

• I can select a date in the standard calendar
• I can select a date range in the range calendar
• I can navigate months in the Calendar Kit
• I can increase and decrease the interactive progress bar value
• I can identify the status color at each progress bar threshold
• I can trigger the spinner animation and observe it auto-stop
• I can identify alert variants by status color
• I can send messages in the chat and trigger bot responses
• I can identify Nebular form input variants by status and size

Module 11: Error Handling

• I can recognize the 404 Not Found page
• I can navigate back to the home page from the 404 page

Appendix A: Source Traceability {#appendix-a-source-traceability}

This appendix is for document maintainers, not end users.

Appendix B: Documentation Coverage {#appendix-b-documentation-coverage}

This appendix is for document maintainers, not end users.

Screens Covered

All 100 screens listed in the assessment scope are covered in this document. Each screen is mapped to at least one lesson or foundation skill section in Appendix A.

Shell/Router-Outlet Screens

The following screens are routing shell components that render no UI of their own. They are documented as navigation context rather than as standalone lessons:

• Charts (/charts)
• E Commerce (/e-commerce) — template not provided; documented as navigation context
• Forms (/forms)
• Maps (/maps)
• Modal Overlays (/modal-overlays)
• Tables (/tables)
• Ui Features (/ui-features)
• Extra Components (/extra-components)
• Editors (/editors)
• Miscellaneous (/miscellaneous)
• Pages (/pages)

Partially Documented Workflows

The following workflows have steps that could not be fully verified from available documentation:

Inferred Information

The following information was inferred from technology conventions rather than explicitly documented in the source files. Verification is recommended before distribution:

Screens Outside Scope

The following application areas are referenced in the Pages navigation menu but were not included in the assessment scope and are therefore not covered in this document:

• Authentication screens (Login, Register, Request Password, Reset Password) — /auth/*
• Layout sub-pages (Stepper, List, Infinite List, Accordion, Tabs) — /pages/layout/*
• IoT Dashboard — /pages/iot-dashboard

Recommendation to document maintainer: Before distributing this manual to end users, the following sections require subject matter expert review:

1. Authentication flow — Add a Module 0 covering login, logout, and session management. Consult the product owner for the complete authentication workflow.
2. Security cameras return control — Verify and update Lesson 1.7 Steps 3–4 with the correct control label and position.
3. Slide-out panel toggle — Verify and update Lesson 2.9 Steps 3–6 with the correct toggle button label and position.
4. User context menu — Verify what Profile and Log out actually do, and update FS-1 accordingly.
5. Weather and Kitten screens — Determine whether these screens require dedicated lessons or can remain as brief mentions.