Widgets
Widget editor
Design Glance and Detail surfaces, configure data, refresh behavior, scenarios, and compatibility.
On this page
The Widget editor designs a glanceable Garmin widget, verifies its data behavior, and checks whether the selected watch can run it. It uses the same saving, device version, preview, and build foundations as the Watch Face and Data Field editors.
Header
The header contains the project name, target device, save status, Preview, and Build actions. Changing the target device reruns compatibility checks. Build remains unavailable while a new draft has no saved edit, the selected device is unsupported, or blocking widget issues remain.
Project structure
Glance is the compact surface shown in the widget loop or glance list. It should stay focused and readable.
Detail is an optional full widget page. Use it for richer content, charts, rows, and actions. The editor can create a Detail page from the current Glance, then you can adjust the layout independently.
Each surface has its own background color and layer stack. Widget layers include:
- Text: authored text or a binding to title, value, summary, or status.
- Icon: cloud, heart, calendar, battery, activity, or location.
- Metric: a label, value, and optional unit.
- Row: compact label-value content for detail lists.
- Chart: a small history or trend visualization.
- Action: refresh or account connection, available on the Detail page.
Widget surfaces support up to 12 layers. Glance surfaces cannot contain action layers.
Canvas editing
The center stage shows the selected surface on the target watch. Click or drag across empty canvas space to select layers; hold Shift to add to the selection. Selected layers move and resize together. Arrow keys nudge the selection, Shift plus an arrow moves farther, and Option/Alt-drag duplicates it.
Use the context menu or standard copy, cut, paste, duplicate, delete, and arrange shortcuts for layer actions. Grid, Snap, and Guides help align the layout. Action layers copied from the Detail page cannot be pasted onto the Glance.
Inspector controls
The inspector follows the current selection:
- Background: surface color, data source, refresh behavior, compatibility, and design checks.
- Text, metric, and row layers: content, value bindings, labels, units, typography, color, and geometry.
- Icon and chart layers: icon or chart values, color, and geometry.
- Action layers: action type, label, color, and geometry.
Text edits commit when you press Enter or leave the field. Escape restores the saved value. Controls are available by keyboard and retain visible focus.
Data setup
Static widgets do not request data. Garmin watch data can use steps, heart rate, battery, or weather values. Web-service widgets use an HTTPS endpoint and response mappings.
For web services, Source opens the setup dialog. Enter the endpoint, choose GET or POST, optionally add headers or parameters, and test the response when the endpoint can be reached directly. Response values can be mapped to title, value, summary, and status, then reused by multiple layers.
OAuth account connection is configured under advanced request settings. Enter the authorization URL, redirect URL, client ID, scopes, and token result key. Example authorization and redirect URLs are blocking issues. Because sign-in happens on the watch, Test connection is disabled for OAuth endpoints.
Refresh and offline behavior
Open Updates from the background Data inspector. A non-static widget needs at least one refresh path: refresh when opened, manual refresh, a visible refresh action on the Detail page, or scheduled web-service refresh.
Scheduled refresh is available only for web-service data and accepts whole-minute intervals from 5 to 1440. Saved data lifetime accepts 1 to 10080 minutes. Request timeout accepts 5 to 60 seconds. Offline fallback shows cached data when a request cannot complete.
Preview simulations
The editor footer switches the static sample scenario used while arranging the widget. Choose Preview for a clean review mode. On desktop, the Preview controls float over the canvas; on smaller screens, they appear in a resizable bottom panel.
Scenarios include loading, fresh, stale, offline, unauthorized, empty, and error. The same scenario always produces the same sample values. Preview does not call your web service, complete OAuth, or read private watch data.
Compatibility and design checks
Select the background and open Compatibility to review the selected watch's support, required Connect IQ API level, permissions, restrictions, and automatic fallbacks. HTTP widgets require Communications. Scheduled web-service refresh requires Background. OAuth requires a watch that supports account connection.
Design checks catch missing refresh paths, example URLs, unsupported actions, empty surfaces, empty text, and low contrast. Resolve errors before building, and treat warnings as device-review prompts.
Keyboard shortcuts
Use Command on macOS or Ctrl on Windows for the shortcuts below. Select a layer first; text fields use normal text-editing shortcuts while focused.
- Command/Ctrl + C, X, V: Copy, cut, or paste layers.
- Command/Ctrl + D: Duplicate the selection.
- Delete or Backspace: Delete the selection.
- Command/Ctrl + ] or [: Move a layer forward or backward. Add Shift to move it to the front or back.
- Escape: Leave Preview.
- Command/Ctrl + Enter: Open the build flow in desktop.
Save and check your widget
Changes save locally. Create device versions when another watch needs its own sizing or capability checks. Open design checks before building and fix blocking issues. Then follow the Widget how-to guides or set up the desktop build tools.