Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>AL ActionImage ViewerNew to Visual Studio Code? Get it now.
AL ActionImage Viewer

AL ActionImage Viewer

Florian Noever

|
41 installs
| (0) | Free
View, Search and Copy AL Action Images
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

AL ActionImage Viewer

Browse, search, copy, and export AL Action Images loaded directly from the AL Language extension for Microsoft Dynamics 365 Business Central. Images are organised by category, fully searchable, and zoomable. The viewer is available both as a full editor panel and as an always-visible activity bar sidebar.

Example Image


✨ Features

  • Browse by category — all image categories from the AL extension are listed in a collapsible rail, plus a synthetic "All Images" view that aggregates every image
  • Search — filter images by name with plain text or wildcard patterns (Action*, *Image, *Copy*)
  • Zoom — scale tiles from 40 % to 200 % using buttons, a slider, keyboard shortcuts, or Ctrl+Scroll
  • Copy — copy an image's name or the image itself to the clipboard via the right-click context menu
  • Export — save a single image or all images in a category to disk (via the context menu)
  • Drag & drop — drag a tile directly to your file manager or desktop
  • Sidebar — a persistent view in the activity bar that is always available without opening a separate panel
  • State persistence — zoom level and rail collapse state are saved and restored across reloads

🧰 Usage

Panel

Open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run AL ActionImage Viewer.

A new editor tab opens with:

  • Left rail — a list of all image categories; click one to filter the grid, or right-click a category to export all its images
  • Top header — search box, zoom controls, a sort toggle (A→Z / Z→A), and a reload button
  • Image grid — virtualised tile grid; click a tile to select it, right-click for copy/export options

The rail collapses automatically when the panel is narrow and can also be toggled manually with the arrow button.

Sidebar

Click the AL ActionImage Viewer icon in the activity bar. The sidebar shows the full image grid (without the category rail) and is always visible alongside your other panels.

Search Tips

  • Plain text (action) — matches any image whose name contains the text
  • Wildcard prefix (*Image) — matches names that end with the term
  • Wildcard suffix (Action*) — matches names that begin with the term
  • Wildcards on both sides (*Copy*) — same as plain text substring match
  • Quoted string ("ActionRunObject") — case-insensitive exact match

⌨️ Keyboard Shortcuts

These shortcuts work in the panel and in the sidebar (except where noted). Shortcuts that modify zoom or category are disabled when a text input is focused.

Key Action
Ctrl+F / Cmd+F Focus the search box
↑ ↓ ← → Navigate the image grid
Home / End Jump to the first / last image
Menu / Shift+F10 Open the context menu for the focused tile
1 – 9 Switch to category by position (1 = All Images, 2 = first category, …)
+ / = Zoom in
- Zoom out
0 Reset zoom to 100 %
Ctrl+Scroll Zoom in / out with the mouse wheel
F5 Reload images from the AL extension

🧠 Requirements

The AL Language extension for Microsoft Dynamics 365 Business Central must be installed.

Note: This extension reads files from your local machine and must run on the local (UI) machine. It is not supported over remote connections (SSH, Dev Containers, WSL, etc.).


🧩 Repository

GitHub: Florian-Noever/al-actionimage-viewer

Bug reports and feature requests are welcome via Issues.


🛠️ Developer Notes

Project Architecture

The extension is made up of three layers:

Layer Technology Purpose
VS Code extension TypeScript, VS Code API Activates the webview panel and sidebar, spawns the bridge binary, relays image data
Webview UI Vue 3, Vite, @tanstack/vue-virtual, floating-vue, @vueuse/core Interactive image browser rendered inside the VS Code webview sandbox
Bridge binary .NET 10, System.CommandLine Locates the AL Language extension DLL, reflects over it to extract image resources, and writes results to stdout as a custom binary payload

Build Commands

# Compile the TypeScript extension
npm run compile

# Build the Vue webview bundle (outputs to public/)
npm run build:webview

# Compile extension in watch mode (default build task)
npm run watch

# Publish the C# bridge binary for all platforms
dotnet publish -c Release /p:PublishProfile=win32
dotnet publish -c Release /p:PublishProfile=linux
dotnet publish -c Release /p:PublishProfile=darwin

# Package the extension as a .vsix
npm run package

Pre-built bridge binaries for win32, linux, and darwin are committed under bin/.

Debug Overlay

Press Ctrl+Shift+D (or Cmd+Shift+D) inside the webview to toggle a debug border overlay that visualises layout boundaries. A badge appears in the corner while the overlay is active.


📜 License

Licensed under the MIT License.



"Buy me a coffee"

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft