Vindfang
Introduction
My First Extension
OverviewInstall the ToolsCreate the AppScaffold the extensionVisual Studio CodeOur first page extensionNext stepsCreate the SandboxPublish the AppPublish to DevOps
Azure DevOps

Create the App

Now, I know a lot of you probably dread the black and white window known as the terminal. ๐Ÿ˜ฐ
Fear not, in time it'll become your friend โ€” you'll be using it more and more as you progress this guide. ๐Ÿ’ช

In the last step you opened Windows PowerShell in administrative mode to install all the necessary tools.
One of those tools is called Terminal, which is what we'll be using from now on. So go ahead, open your start menu and start the Terminal.1

Scaffold the extension

We have created a generator which does the heavy lifting of creating a new extension, for you, so that you can focus on creating value, rather than debugging why your extension won't compile. ๐Ÿชถ

Run the below code in the terminal:

# We declare a variable here, so we don't have to write its value twice
$projectDirectory = "$env:USERPROFILE/source/repos/Skill Core AS/Vindfang Demo"
# Create the directory where your extension will live
mkdir $projectDirectory
# Navigate to the new directory
cd $projectDirectory
# Start the generator
yo skill-al-app
# That's it!

You'll be presented with this guy ๐ŸŽฉ:

.
_-----_ โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
| | โ”‚ Welcome to Skill Core โ”‚
|--(o)--| โ”‚ AS's AL application โ”‚
`---------ยด โ”‚ generator! โ”‚
( _ยดU`_ ) โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
/___A___\ /
| ~ |
__'.___.'__
ยด ` |ยฐ ยด Y `
? What's the name of your app?

Give the app a unique name, for instance your name followed by "Demo", i.e. "Ola Halvorsen Demo".
For the rest of the options, simply hit enter without typing anything, and you'll get their defaults, which are good enough for this demo. โœ…

Visual Studio Code

After hitting enter on the last question, Visual Studio Code will launch the workspace of your new extension (if you don't see it, then look behind your terminal window).

The app.json file is red, which indicates an error โ€” the package cache could not be found.

There's a lot of files here, but one is initially red; the app.json file. ๐Ÿšซ
This is the regular error that you get every time you create a new extension. It simply means that we have not downloaded the symbols yet (which are required to compile the extension). We can get them from any running Business Central instance with the version we're compiling for (in our case, that's just the latest release).

To save you time, we have created yet another tool (start to see a pattern here? ๐Ÿคญ), which fetches them from our Azure Artifacts package feed ๐Ÿš€:

SKILL: Download symbols from Azure Artifacts is the command we use to fetch the dependencies. The other command, AL: Download symbols, is the standard one that Microsoft provides. NOTE: The command is context sensitive; it runs in the workspace folder of the currently opened file.

Once you've logged in with your account, you should eventually see the .alpackages folder appear with four app files. ๐Ÿ‘

Note: This command actually runs once automatically when you open the workspace. So, in most cases, you don't have to do it manually.

Our first page extension

To demonstrate that our app works, we're going to make a message pop up whenever we open the Customer List in Business Central:

app/src/pageextensions/VDCustomerListPIL.PageExt.al
pageextension 60000 VD_CustomerList_PIL extends "Customer List"
{
trigger OnOpenPage();
begin
Message('My first app says hello!');
end;
}

You can now try to compile your app, by hitting CTRL+SHIFT+B on your keyboard:

Microsoft (R) AL Compiler version 9.4.10.7727
Copyright (C) Microsoft Corporation. All rights reserved
Compilation started for project 'Vindfang Demo' containing '1' files at '14:21:56.769'.
Compilation ended at '14:21:56.796'.
Success: The package is created.

Next steps

Alright, this is going great! ๐ŸŽ‰
We're now ready to publish it to our own testing environment. โš“



How to open the terminal...
Open the start menu, search for Terminal and open it. Feel free to pin it to the taskbar, to make it easier to find later on.

โฌ…๏ธ PreviousNext โžก๏ธ