Hacking a better AppSource for Business Central

With BC25, we lost the “marketplace” page inside Business Central, which has now been replaced with a rather lackluster AppSource page. So this weekend, I sat down and created what I imagine a proper AppSource page should be like. Check out the video:

https://youtu.be/zE1vcKPk5MU

In this video, Erik takes on a fun weekend project: building a better AppSource marketplace page directly inside Business Central. Since Microsoft removed the embedded marketplace page in version 25 and replaced it with a minimal listing, Erik decided to hack together a richer, more visually appealing alternative by scraping data from the public AppSource web pages and presenting it using native Business Central pages with tiles, star ratings, image carousels, and detailed app cards.

The Problem: A Bare-Minimum Marketplace Page

When Microsoft removed the original marketplace page inside Business Central in version 25, the replacement was a stripped-down listing page. While it serves its functional purpose — allowing delegated admins and global admin users to install apps — Erik argues it doesn’t do much to generate excitement or effectively showcase apps to potential users.

Erik had previously offered to build a nicer page for Microsoft, but the effort didn’t go anywhere, apparently because the underlying API that powers the data is considered restricted and requires a special key — despite returning the same data visible on the public web page.

The Key Insight: JSON Embedded in the Web Page

The breakthrough for this project came from a simple observation: if you view the source of an AppSource page in a browser, all of the app data is embedded as JSON directly within the HTML. Specifically, there’s a JavaScript variable assignment like window.__INITIAL_STATE__ that contains a complete JSON payload with all the app information displayed on that page.

This means you don’t need any special API key — you can simply download the HTML page, extract the JSON from within it, parse it, and use the data however you like.

Project Overview

The extension is built as a standard AL project targeting Business Central 25:

{
  "id": "f133753d-6890-41f8-8556-de7e3ccb282a",
  "name": "Better AppSource Page",
  "publisher": "hougaard",
  "version": "1.0.0.0",
  "platform": "1.0.0.0",
  "application": "25.0.0.0",
  "idRanges": [
    {
      "from": 56100,
      "to": 56149
    }
  ],
  "runtime": "14.0",
  "features": [
    "NoImplicitWith"
  ]
}

The solution consists of several key components:

  • A table (AppSource App) to store app metadata including icons as media fields
  • A tile-based list page for browsing all apps with colorful icons and star ratings
  • An app card page with detailed information, fact boxes, and an embedded HTML viewer
  • A background code unit that scrapes and processes the AppSource data
  • A custom user control for rendering HTML content with proper height management

Fetching and Parsing the App Data

The data fetching process works as follows:

  1. The list page triggers a FetchList function that runs a code unit in the background
  2. The code unit’s RefreshAppList procedure downloads the AppSource HTML page
  3. It locates the window.__INITIAL_STATE__ assignment in the HTML and slices out the JSON payload
  4. The JSON is parsed to extract a dataList array containing app entries with basic fields (title, publisher, rating, icon URL, etc.)
  5. For each app that has an icon URL, an additional HTTP call downloads the icon image
  6. Icons are stored in a media field — this is essential because tiles require media fields (not blobs, not external URLs)
  7. The process loops through all pages (currently around 112 pages on AppSource) until no more apps are found

The full dataset includes approximately 6,700 apps. Because downloading all those icons takes a couple of minutes, the entire process runs as a background job to avoid blocking the user interface.

The App List: Tiles with Star Ratings

The list page displays apps as tiles, presented in the same order as they appear on AppSource. Each tile shows the app icon, title, publisher, and a star rating.

The star ratings are implemented using Unicode star characters. A function builds up a string with the appropriate number of star characters based on the app’s rating value — a simple but effective visual touch.

Erik also experimented with “large tiles” that are supposed to support a text description at the bottom (using a text field of 100+ characters as the last field in the brick definition), but couldn’t get it to work reliably.

The App Card: Rich Detail with HTML Rendering

When you click on an app in the list, it opens a detailed card page. This triggers a second data fetch — the same scraping approach, but this time targeting the individual app’s AppSource page to get detailed information that wasn’t available in the initial list data. Fields like version numbers, reviews, help links, support links, and the full HTML description are extracted.

The card page features:

  • Fact boxes showing version numbers, review counts, and other metadata
  • A custom HTML viewer displaying the app’s full description with images
  • An image/video carousel built from the app’s uploaded screenshots and video links
  • Action buttons for installing the app and linking to help/support pages

The Custom Web Viewer Control

Rather than using Microsoft’s standard web browser control, Erik built a custom user control called WebAddIn. The key differences are:

  • Proper vertical space handling — Microsoft’s control has quirky behavior with vertical space (a general user control issue Erik has covered in a separate video)
  • Full document replacement — instead of inserting content into a div, the control replaces the entire document
  • Loading screen — initially displays a loading indicator in the control div, which is then replaced when the content is ready

Building the HTML Content

The app card’s HTML content is constructed programmatically using a TextBuilder. The function builds a complete HTML5 document including:

  • An embedded stylesheet
  • The app’s logo image, floated to the right corner with 15 pixels of padding so text wraps around it
  • The app’s HTML description (as provided by the publisher in their app registration)
  • An image carousel built from the list of screenshot and video URLs

Erik emphasizes the importance of using TextBuilder rather than string concatenation when assembling large strings. In .NET (which underlies AL), repeatedly concatenating strings with the + operator creates a new string object for each operation. With many concatenations, this becomes very inefficient. TextBuilder accumulates all the pieces and produces the final string in a single operation — much better performance for generating full HTML pages.

Live Coding: Adding Help and Support Links

During the video, Erik adds missing functionality by creating action buttons for help and support links:

  1. Two new fields are added to the app table: HelpLink (Text 20000) and SupportLink (Text 200 — with a humorous note that if your support URL is longer than 200 characters, you either have a problem or don’t really want support)
  2. The JSON parsing is extended to extract HelpLink and SupportLink values from the detailed app data
  3. Action buttons are added to the card page that open these links via Hyperlink

Erik notes the inconsistency in the AppSource JSON — some property names start with lowercase letters while others start with uppercase, making the parsing a bit tedious. He also mentions that Business Central 26 will introduce improvements to JSON handling that will make it easier to deal with missing or optional properties without having to go through Boolean checks.

A Note on JSON Inconsistencies

The JSON data returned by AppSource is notably inconsistent in its casing conventions. Some fields use camelCase (lowercase first letter) while others use PascalCase (uppercase first letter). When parsing this data with AL’s JSON helper functions, you need to handle cases where a property might not exist — currently requiring Boolean checks on the return value of Get operations. Erik notes that BC26 will improve this experience.

Conclusion

This weekend hack demonstrates that it’s entirely possible to build a richer, more visually engaging AppSource browsing experience directly within Business Central. By scraping the publicly available JSON data embedded in AppSource web pages, Erik created a fully functional marketplace browser with colorful tiles, star ratings, detailed app cards with HTML descriptions, image carousels, and review displays — all running as native Business Central pages.

The project also serves as a great example of several useful AL development techniques: background processing with code units, working with HTTP clients to download web content, parsing JSON, storing images in media fields for tile display, building custom user controls for better HTML rendering, and using TextBuilder for efficient string assembly. Whether or not Microsoft ever improves the built-in marketplace page, this project shows what’s achievable with a bit of creative hacking.

Picture of hougaard

hougaard