Great extension and post by Márton Sági about his creation: the “AL Abject Designer” extension for Microsoft AL, a nice first step for Fast and Visual Development (an a first approach to RAD development I hope, like in NAVISION 3.70).

Regardless of what Microsoft will do or not (to date you do not know), I consider this extension very interesting and carry the article and some tests on the product.

Why would one need an Object Designer in the AL world?

“C/Side has the ‘Object Designer’ window that provides a convenient overview of application objects. In VS Code, well, there are files on your left (or right) and that’s it. Feel free to organize these files into folders, sub-folders, more sub-folders.

In my experience, if you work on a VS Code project that has like 50 or more custom objects, you are practically lost in space.”. Not to mention looking up standard objects, or event subscriptions. Typing, guessing, typing, more guessing… these all add up to a frustrating experience.

Actually, we can do pretty much everything with VS Code. The new development environment is extendable by design. Finding your inner Full-stack developer might take a bit of time though, but then you can extend the current functionality as you like.

I was curious if I could re-create the original Object Designer in VS Code, since it seems there’s no standard solution on the horizon. As it turned out, it was more than possible to mimic the good old Object Designer in VS Code. 🙂

… Return to RAD FAST ! (in my opinion)

SOURCE https://www.linkedin.com/pulse/using-al-object-designer-business-central-extension-development-s%C3%A1gi/

THE “AL OBJECT DESIGNER”

THIS EXTENSION IS AVAILABLE IN MARKETPLACE – AL Object Designer extension

GitHub Repository – https://github.com/martonsagi/al-object-designer

#1 – AL Object Designer Topics

C/Side Object Designer was something that the new AL development environment lacks of very much. The idea behind this extension is to provide a main hub for daily development by giving back the ability of overview.

Main Features

• List Overview of all AL objects in your project: based on symbols (*.app) and your local .al files.
• List Events from symbol objects, browse them in the same way as objects.
• Live Update: object list is automatically maintained as you create/change/delete objects or download symbols.
• Multi-Folder workspaces are supported: e.g. a workspace with MainApp/TestApp folders.
• Object Search: filter by Object Type, Name or ID.
• Event Search: filter by Object Type, Name, ID or Event Name.
• Copy/Paste Events: copy event subscription definition to clipboard by clicking on Event Name.
• Object/Event Name filtering: works with partial matches as well. Just like the Windows RTC Client’s search field.
• Run selected objects.
• Run table/page extentions.
• View definition of Symbols: original file is opened for local files.
• Generate new objects from tables: card/list pages, report, query.
• Built-in snippets: generate new dictionary or entry tables using a single click.
• Custom snippets: use your own snippets placed in <project root>/.altemplates folder
• Design view for Pages (alpha): card/list layout is rendered for local pages. Card/Document Symbols are also supported.

Requirements

‘Run Object’ function is based on commands from CRS AL Language Extension. It’s made by Waldo so you should install it anyway. 😉

VS Commands

• AL Object Designer: opens Object Overview
• AL Page Designer: opens up Page Designer for currently edited AL Object (Page)

Page Designer

This extension has a limited ability to view a rendered page layout without deployment, or move existing fields/actions on screen using drag&drop. Supported page types:

• Card types: Card, Document
• List types: types other than Card/Document are regarded as List

Rendered layout is very similar to Business Central pages, although not an exact copy as I’m not using Office Fabric UI.

OBJECT DESIGNER IN ACTION

Preview

Searching for “Item Ledger Entry” table

Find Page “Sales Order”

Filter to workspace and check the context menu for more options

Browse events

Copy/Paste Events

Real-time Page Designer (alpha)

Under the hood

AL Object Designer is a single-page Aurelia app that is embedded into a VS Code WebView and exchanges data back and forth.

#2 – Using AL Object Designer for Business Central Extension development

#2-1 Basics

One command for all: bring forward the Command palette (Ctrl+Shift+P) and type in ‘AL Object Designer’.

#2-2 Object Overview

Upon selecting the command, a new window opens up listing all Objects within your workspace. Object information is collected from downloaded symbols and local .al files.

By ‘workspace’ I mean VSCode multi-root workspaces! Put several extension folders together so you can overview all of your solution, even if it’s broken down to different logical pieces. Symbol duplication is also handled. If an object is present as local .al file and in a Symbol .app file, local file always wins.

#2-3 Event Overview

By clicking on ‘Events’ toggle button, available standard events are listed. Click again to go back to Object Overview. This information is collected from downloaded symbols only (for now).

#2-4 Copy/Paste Event subscriptions

Click on Event Name column to copy the desired event subscription definition to clipboard, then paste the trigger into a Codeunit. All event parameters will be inserted.

#2-5 Context Menu

Objects have additional commands, depending on Object Type. Click on the three dots to see the context menu.

• View: runs ‘go to object definition’ command. Same happens when clicking on Object Name.
• Run: runs selected object in web client. For Table/Page Extensions the target/original Object ID is used.
• New Card/List/Report/Query: generates a new object using metadata of selected table.
• Design: available for Pages. Opens up a graphical view in a new window.

#2-6 Filters and Search

Works the same way for Objects and Events as well. There are 4 layers of filtering:

1. ‘Events’ toggle button: switch between Objects and Events
2. All / Workspace buttons: Workspace button filters to local .al files that exist in your VSCode workspace.
3. Object Type buttons: filters to selected Type, e.g. Tables, Codeunits, etc..
4. Search box: free-text input that works with partial matches, e.g. ‘it ledg ent’ will give ‘Item Ledger Entry’ as first match.

These filters are combined together, so you can for example list all local tables by clicking first ‘Workspace’ then ‘Tables’ buttons.

#2-7 Page Designer

In order to live up to its name, this extension should have some layout rendering capabilities. Tough decision, going down this road could lead to a dead end or promising something that I might not be able to deliver.

I took the risk, so here it is! At least for Card/List Pages and in a limited way. I can see it now, it’s not a dead end but a very long road ahead. 😉

#2-8 Snippets

Snippet links are auto-generated under object type buttons. You can add your own snippets by placing them into ‘.altemplates’ folder.

There is one built-in ’empty snippet’: ‘+ New Object’ opens up an empty editor window that is set to al language, so code completion actually works without saving the file first.

Snippet structure is similar to the standard VSCode snippet format, conversion is easy.

Fields:

• id: unique name
• title: displayed as link name
• description: link details (small popup on mouse hover)
• position: links are ordered by position
• body: snippet content

{

“id”: “table.dictionary”,

“title”: “+ New Dictionary”,

“description”: “Create a new Dictionary Table”,

“position”: “1”,

“body”: [

// standard VSCode snippet array

]

}

SOURCE https://www.linkedin.com/pulse/using-al-object-designer-business-central-extension-development-s%C3%A1gi/

@Márton Sági: Great Job!