Example – Hello World – Your first extension

Original URL…

Extending Visual Studio Code

Your first extension

This document will guide you through creating your first VS Code extension (“Hello World”) and explain the basic VS Code extensibility concepts.

In this walkthrough, you’ll add a new command to VS Code which will display a simple “Hello World” message. Later in the walkthrough, you’ll interact with the VS Code editor and query for the user’s currently selected text.

Prerequisites

You need Node.js installed and available in your $PATH. Node.js includes npm, the Node.js Package Manager, which will be used to install the extension generator.

Generate a new extension

The simplest way to add your own functionality to VS Code is through adding a command. A command registers a callback function which can be invoked from the Command Palette or with a key binding.

We have written a Yeoman generator to help get you started. Install Yeoman and the Yeoman VS Code Extension generator and scaffold a new extension:

npm install -g yo generator-code
yo code

For the hello world extension, you can either create a TypeScript extension or a JavaScript one. For this example, we pick a TypeScript extension.

The command generator

Running your extension

  • Launch VS Code, choose File > Open Folder and pick the folder that you generated.
  • Press F5 or click on the Debug icon and click Start.
  • A new instance of VS Code will start in a special mode (Extension Development Host) and this new instance is now aware of your extension.
  • Press Ctrl+Shift+P and run the command named Hello World.
  • Congratulations! You’ve just created and executed your first VS Code command!

Running VS Code with an extension

The structure of an extension

After running, the generated extension should have the following structure:

.
├── .gitignore
├── .vscode                     // VS Code integration
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── .vscodeignore               // files ignored when publishing extension
├── README.md
├── src
│   └── extension.ts            // the source of the extension entry point
├── test                        // test folder
│   ├── extension.test.ts       // extension.test.js, in case of JavaScript extension
│   └── index.ts                // index.js, in case of JavaScript extension
├── node_modules
│   ├── vscode                  // include vscode type definition file 
for extension development
│   └── typescript              // compiler for typescript (TypeScript only)
├── out                         // compilation output (TypeScript only)
│   ├── extension.js            // the extension entry point
│   ├── extension.js.map
│   └── test
│       ├── extension.test.js
│       ├── extension.test.js.map
│       ├── index.js
│       └── index.js.map
├── package.json                // extension's manifest
├── tsconfig.json               // jsconfig.json, in case of JavaScript extension
└── vsc-extension-quickstart.md // extension development quick start

Let’s go through the purpose of all these files and explain what they do:

The extension manifest: package.json

Example TypeScript extension manifest

{
    "name": "myFirstExtension",
    "description": "",
    "version": "0.0.1",
    "publisher": "",
    "engines": {
        "vscode": "^1.5.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:extension.sayHello"
    ],
    "main": "./out/extension",
    "contributes": {
        "commands": [{
            "command": "extension.sayHello",
            "title": "Hello World"
        }]
    },
    "scripts": {
        "vscode:prepublish": "tsc -p ./",
        "compile": "tsc -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
       "typescript": "^2.0.3",
        "vscode": "^1.5.0",
        "mocha": "^2.3.3",
        "@types/node": "^6.0.40",
        "@types/mocha": "^2.2.32"
   }
}

Note: A JavaScript extension doesn’t require the scripts field as no compilation is needed.

This specific package.json describes an extension that:

  • contributes an entry to the Command Palette (Ctrl+Shift+P) with the label "Hello world" that will invoke a command "extension.sayHello".
  • requests to get loaded (activationEvents) when the command "extension.sayHello" is invoked.
  • has its main JavaScript code in a file called "./out/extension.js".

Note: VS Code does not load the code of an extension eagerly at start-up. An extension must describe, through the activationEvents property under what conditions it should get activated (loaded).

Generated code

The generated extension’s code is in extension.ts (or extension.js in case of a JavaScript extension):

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and 
errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "my-first-extension" is now 
active!');

    // The command has been defined in the package.json file
    // Now provide the implementation of the command with  registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        // The code you place here will be executed every time your 
command is executed

        // Display a message box to the user
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}
  • Each extension should export from its main file a function named activate(), which VS Code will invoke only once when any of the activationEvents described in the package.json file occur.
  • If an extension makes use of OS resources (e.g. spawns processes), the extension can export from its main file a function named deactivate() where it can do clean-up work and VS Code will invoke that function on shutdown.
  • This specific extension imports the vscode API and then registers a command, associating a function to be called when the command "extension.sayHello" gets invoked. The command’s implementation displays a “Hello world” message in VS Code.

Note: The contributes section of the package.json adds an entry to the Command Palette. The code in extension.ts/.js defines the implementation of "extension.sayHello".

Note: For TypeScript extensions, the generated file out/extension.js will be loaded at runtime and executed by VS Code.

Miscellaneous files

  • .vscode/launch.json defines launching VS Code in the Extension Development mode. It also points with preLaunchTask to a task defined in .vscode/tasks.json that runs the TypeScript compiler.
  • .vscode/settings.json by default excludes the out folder. You can modify which file types you want to hide.
  • .gitignore – Tells Git version control which patterns to ignore.
  • .vscodeignore – Tells the packaging tool which files to ignore when publishing the extension.
  • README.md – README file describing your extension for VS Code users.
  • vsc-extension-quickstart.md – A Quick Start guide for you.
  • test/extension.test.ts – you can put your extension unit tests in here and run your tests against the VS Code API (see Testing Your Extension)

Extension activation

Now that the roles of the files included in the extension are clarified, here is how your extension gets activated:

  • The extension development instance discovers the extension and reads its package.json file.
  • Later when you press Ctrl+Shift+P:
  • The registered commands are displayed in the Command Palette.
  • In this list there is now an entry "Hello world" that is defined in the package.json.
  • When selecting the "Hello world" command:
  • The command "extension.sayHello" is invoked:
    • An activation event "onCommand:extension.sayHello" is created.
    • All extensions listing this activation event in their activationEvents are activated.
      • The file at ./out/extension.js gets loaded in the JavaScript VM.
      • VS Code looks for an exported function activate and calls it.
      • The command "extension.sayHello" is registered and its implementation is now defined.
  • The command "extension.sayHello" implementation function is invoked.
  • The command implementation displays the “Hello World” message.

Debugging your extension

Set a breakpoint, for example inside the registered command, and run the "Hello world" command in the Extension Development VS Code instance.

Debugging the extension

Note: For TypeScript extensions, even though VS Code loads and executes out/extension.js, you are actually able to debug the original TypeScript code due to the generated source map out/extension.js.map and VS Code’s debugger support for source maps.

Tip: The Debug Console will show all the messages you log to the console.

To learn more about the extension development environment.

A simple change

In extension.ts (or extension.js, in a JavaScript extension), try replacing the extension.sayHello command implementation to show the number of characters selected in the editor:

    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        // The code you place here will be executed every time your 
command is executed

        let editor = vscode.window.activeTextEditor;
        if (!editor) {
            return; // No open text editor
        }

        let selection = editor.selection;
        let text = editor.document.getText(selection);

        // Display a message box to the user
        vscode.window.showInformationMessage('Selected characters: ' + text.length);
    });

Tip: Once you make changes to the extension source code, you need to restart the Extension Development Host instance of VS Code. You can do that by using Ctrl+R (macOS: Cmd+R) in the Extension Development Host instance or by clicking the Restart button at the top of your primary VS Code instance.

Create a file (File > New File), type some text and select it. When you run the Hello World command, you should now see the count of selected characters.

Running the modified extension

Installing your extension locally

So far, the extension you have written only runs in a special instance of VS Code, the Extension Development instance. To get your extension running in all instances of VS Code, you need to copy it to a new folder under your local extensions folder:

  • Windows: %USERPROFILE%\.vscode\extensions
  • macOS/Linux: $HOME/.vscode/extensions

Publishing your extension

Read about how to Share an Extension.

Next Steps

In this walkthrough, we’ve seen a very simple extension. For a more detailed example, see the Word Count Example which shows how to target a specific language (Markdown) and listen to the editor’s document changed events.

If you’d like to read more generally about the extension APIs, try these topics:

Anuncios

How to get the new Dynamics 365 Business Central and extend it

Original URL…

What is it?

Dynamics 365 Business Central is the new and, I hope, the last official name of Dynamics NAV.

No more Dynamics 365 Finance and operations Business Edition, no more Dynamics 365 “Tenerife”, even no more Dynamics NAV (basically it is yes now, until Q4 2018, when D365BC on-premise will be released)!

The official announcement was made 4 days ago and can be found here.

2 days after at DirectionsASIA we’ve got much more information about the product from Microsoft team.

The official hashtag is #MSDyn365BC, and if you will search it on twitter you will find a huge portion of images and info about new web client, new roadmap, new possibilities and so on.

But this blog is not about What’s new staff. It is about How to get it?

Step 1. Register on collaborate portal

If you are already registered – skip it. If not, go to https://aka.ms/collaborate and register.

The registration process is very nice described here https://docs.microsoft.com/en-us/collaborate/registration

Just go steps by steps, and you should be able to see this

 

Step 2. Register on Ready to Go program (Updated)

After publishing first version of this blog, I’ve got many questions about why D365BC is not visible on collaboration portal. Because of this step was missed. Sorry. Updated.

If you are already registered – skip it. If not you should sign up for Ready to Go program http://aka.ms/ReadyToGo

To do so, after step 1, please write an e-mail to Dyn365BEP@microsoft.com

When contacting, please provide following information:

Publisher display name Name Email Role
Chosen during registration, should be the same for all users User 1 Email 1 Power user (can access content and add new users to engagements)
User 2 Email 2 Participant (can access content)
Etc. Etc. Power user

The registration process should take 1-2 business days.

After successful registration, you will be able to see this

 

YES! This is pre-release version of NEW Dynamics 365 Business Central.

If you click on it you will find something interesting, guess what?

.Zip, DVD?  No =)

You will find 2kb txt file with instructions of …. How to get it via Docker.

Download it.

Advantages of Ready to Go program

Ready to Go program, it is not only the possibility to download and play with pre-release versions of Dynamics 365 Business Central.

The idea is to prepare every partner for new SaaS world. It consists of training materials on http://aka.ms/ReadyToGoOnlineLearning and also potentially coaching through a Development Centres

BTW. If you want to prepare yourself for new modern SaaS world, you can also contact me for individual workshops and coaching.

Step 3. Create new Docker container with Dynamics 365 Business Central

But first, Install Docker.

If you don’t have docker, then download and install it. You can choose to download a full docker client or only a module.

You can download and install docker as a module executing this code in PowerShell

invoke-webrequest -UseBasicparsing -Outfile docker-17.09.0-ce.zip 
https://download.docker.com/win/static/stable/x86_64/docker-17.09.0-ce.zip
# Extract the archive.
Expand-Archive docker-17.09.0-ce.zip -DestinationPath $Env:ProgramFiles

# Clean up the zip file.
Remove-Item -Force docker-17.09.0-ce.zip

# Install Docker. This requires rebooting.
$null = Install-WindowsFeature containers

# Add Docker to the path for the current session.
$env:path += ";$env:ProgramFiles\docker"

# Optionally, modify PATH to persist across sessions.
$newPath = "$env:ProgramFiles\docker;" +
[Environment]::GetEnvironmentVariable("PATH",
[EnvironmentVariableTarget]::Machine)

[Environment]::SetEnvironmentVariable("PATH", $newPath,
[EnvironmentVariableTarget]::Machine)

# Register the Docker daemon as a service.
dockerd --register-service

# Start the Docker service.
Start-Service docker

#Next steps are optional!

#Run test container, to check that Docker is alive
docker container run hello-world:nanoserver

# Check what containers do you have
docker ps

Next, install Navcontainerhelper

I personally love what Freddy has done to us. So I will use navcontainerhelper to simplify my work.

Run next script in PowerShell

Install-Module -Name navcontainerhelper -Verbose

If, you are running it on Windows10, check that your policy is allowed you to install new modules.

If it is restricted, then change it

Create new D365 Business Central container

1)    Login to azure container register, to be able to pull (download) D365BE Image (also in powershell).

docker login "navinsider.azurecr.io" -u 
"insert-user-id-here-from-Build-21063.txt-file" -p " 
insert-password-here-from-Build-21063.txt-file "

2)    Choose what version of Business Central do you want.

Currently available 14 Versions and W1!

dynamics-nav:11.0.21063.0

dynamics-nav:11.0.21063.0-finat

dynamics-nav:11.0.21063.0-finbe

dynamics-nav:11.0.21063.0-finca

dynamics-nav:11.0.21063.0-finch

dynamics-nav:11.0.21063.0-finde

dynamics-nav:11.0.21063.0-findk

dynamics-nav:11.0.21063.0-fines

dynamics-nav:11.0.21063.0-finfi

dynamics-nav:11.0.21063.0-finfr

dynamics-nav:11.0.21063.0-fingb

dynamics-nav:11.0.21063.0-finit

dynamics-nav:11.0.21063.0-finnl

dynamics-nav:11.0.21063.0-finse

dynamics-nav:11.0.21063.0-finus

3)    Create new container

I will use W1 version, so I run next command in PowerShell

New-NavContainer -accept_eula -alwaysPull -imageName 
"navinsider.azurecr.io/dynamics-nav:11.0.21063.0" -containerName D365BC-W1

and after a while – about 5 minutes of pulling (depends on your internet speed), and 2 minutes of initialization – we have it!

This wonderful, modern look and feel web UI

Hmm…. Not really what I was expected =)

Let’s try old trick =) We will add ?aid=fin to the end of our URL.

So url will be http://d365bc-w1/nav/?aid=fin

 

Much better now!

By the way, if you will create a container from US image (dynamics-nav:11.0.21063.0-finus), then we will have new web UI by default.

 

Step 4. Extend it!

Install Visual Studio Code AL extension

First copy .vsix file on your host.

To do so, copy a link to vsix file from container creation log

Open it in a browser

Click Save.

Open Visual Studio Code. Go to Extentions -> … -> Install From Vsix

Create new AL project

As usual, press Crtl + Shift + P -> AL:Go

We change server in launch.json (take it from container creation log), and authentication to Windows.

Press Crtl + Shift + P -> AL:Download Symbols

Then we will create some new code.

We will add one more insight to RoleCenter. This is really wow feature of new UI.

After publishing (ctrl+F5) we will see new insight!

And we’ve done!

I encourage you to take all advantages of Collaborate and start exploring Dynamics 365 Business Central right now!

Accessing a control add-in in a dependency extension

Original URL…

Long time no see, eh? Time flies, what do you know…

I am thrilled to still find you here. Honestly, I wasn’t sure this morning if I was about to even find this blog where I left it seven months ago. Cool to find both my blog and you in good shape, patiently waiting for my contribution.

This morning I had a call with a partner asking if it was possible to deploy a control add-in in such a way that other partners could use its functionality from their own extensions. My answer was, and it still is – well, it should be possible, but I don’t know for a fact because I never tried it.

So let’s try it and find the answer together.

(It goes without saying, but I’ve learned that things that “go without saying” often don’t, so let me go with saying it: this is about Extensions V2, NAV 2018, and Business Central; no NAV 2017 stuff here. And no animals were harmed while during writing of this blog, yet…)

To keep my partner safe and anonymous, and stay GDPR compliant in and out, let’s imagine this imaginary scenario: you are building a cool horizontal feature that does “things” in the back end, but also exposes a little bit of front-end sugar for other NAV partners to consume. So you want to make your control add-in accessible to them.

If this was all about pure AL – it’s a no brainer. Your workflow is as follows:

  1. Create and build your extension
  2. Ship your .app file together with your app.json manifest file to your partners.

Your partners, who want to tap into your functionality from their extension, need to do this:

  1. Create their extension
  2. Make your .app file available in their package cache path
  3. Use the information from your app.json to declare a dependency on your extension from their app.json

If your extension uses publicly accessible stuff, such as a table or a codeunit, or events, your partners can now tap into this functionality from their extension (by reading your table, or calling your functions, or subscribing to your event publishers).

But what if you also make a control add-in a part of your extension? Let’s try it out together.

Creating the “horizontal” extension (the “dependency”)

Let’s get the first part done. The “your” part where you are creating your extension that includes a control add-in to expose to your partners. Your amazing new control add-in will expose a button, that will have a caption of your choosing, and will allow your partners to respond to its click event. Crazy stuff, right?

I’ve got myself a nice and fresh VM this morning from aka.ms/getnav to have access to latest CU (being CU6 from June 6). You may want to get one for yourself, too.

Once it’s up and running, start VS Code, and run the “AL: Go!” command from the command palette. Then choose the “BaseExtension” as its name, select “Your own server” as the server, enter your username (mine was “admin”), enter your password (mine was, whoops, I am not telling you what it was!).

When it’s done, which takes like a half a femtosecond, you have your launch.json file open. Go back to your landing page in IE, or access it from the desktop if you closed it) and copy the last four lines from it (under “launch.json settings” subsection) and paste it inside of your launch.json (make sure to overwrite those same settings in there, which is all settings after “name” and before “startupObjectId”). Also, set the “startupObjectId” to 50100 to run your first page.

If you did it correct, you’ll get something like this:

SNAGHTML2a47603d

A few more housekeeping steps:

  • Delete the HelloWorld.al file
  • Edit the app.json file to declare your extension. Mine changed the name, the publisher, and the idRange sections, and it now looks like this:
    image

Now, time for the real stuff. Create a new file and name it “ControlAddIn Base Control.al”

In it, request some real estate from the app, declare a startup script and a “normal” script, then declare a procedure to set a caption on the button, and two events (one to indicate the control is ready, and one to include the implementation for your declared methods). If you care, declare a stylesheet file to make it look nice, too.

If you are as good as I am, yours will also look more or less like this:

image

Rats! I am not that good – there’s red stuff in here. Let’s fix it.

Create two folders, call one “Scripts”, and another one “Styles”, and in them, create the files as declared in your control .al file. Mine are “startup.js”, “baseControl.js”, and “baseControl.css”.

This takes care of the “red stuff” in the control add-in object (it may require you to close and re-open the editor tab for the control add-in object, though).

Now put beef in these files as indicated in the screenshots below.

image

This one was tough! It calls the OnControlReady event when the control add-in starts. Now, let’s get the easier ones done, too.

image

This is your implementation. It contains one function to set caption, as declared in your control add-in object file. It’s not the smartest piece of JavaScript code ever written, but gets the job done. If there is no button, it creates one, sets its caption, and saves the reference for future use. The button, when clicked, invokes the OnClick event, duh!

And last, but certainly the least and entirely optional, add some CSS juice to get rid of Times New Roman:

image

(Times New Roman makes my toenails curl up)

Finally, let’s test if this works as expected. Create a “Page 50100 Test Control.al” file and populate it with bare minimum of al to try this out:

image

Ctrl+F5, sign in once to deploy your control add-in, then sign in once more to, well, sign in to your NAV, and then perform this complex set of steps:

image

So, we did it, or so it seems.

Now, you are good to deploy this to your partners.

Deploying it to your partners

To deploy it to your partners, just do this:

  1. Take your app file (mine is “Vjeko.com_Control Add-in Base_1.0.0.0.app”) and your “app.json” file
  2. Send them to your partners.
  3. Done.

Using your partner’s control add-in

Time to put your partner’s shoes on. You are now not you anymore; you are now your partner, the one who uses your extension. Yes, I confused myself, too, I tend to do this.

First thing, create your extension, the one that will (try to) consume your partner’s shiny button control add-in.

It’s easy, “AL: Go!” once again, follow the same first bunch of steps as you did earlier, up to deleting the HelloWorld.al file.

First step, sort out the app.json manifest file. This time (apart from using a different control add-in range, which should go without saying, but doesn’t, just in case) you need to declare a dependency on the Base Extension you (when you were your partner) created earlier. To do that, use the info from the “app.json” file you received from your partner. This is what I’ve got:

image

Now, to make it simpler, run the “AL: Download symbols” command, to get the symbols files stored in your package cache path. If you didn’t do anything fancy, it should be right inside your workspace, under .alpackages. Now, select any of the .app files inside your .alpackages folder, press Alt+Shift+R to reveal the .alpackages folder in Explorer, and then paste the .app file you received from your partner right in there together with the two files already in place. Now, if you are doing this from the same machine, that file will already be there, because VS Code was smart enough to download that file together with base NAV files automatically.

Good, now let’s try to see if we can use the control add-in your partner extension exposes.

Create a “Page 50110 Test Partner Control.al” file and add al code to define the page that, well, at this stage, attempts to use your partner’s control add-in. For all I care, it can be the exact copy of the original page 50100 from the previous workspace, save for the object ID and name, which should be 50110 “Test Partner Control”. If you didn’t care more than I did, this is what you have at this stage:

image

Last step, change the startupObjectId from 22 to 50110 inside your launch.json file, cross your fingers, close your eyes, and press Ctrl+F5. Okay, if you can’t do it with your eyes closed, open your eyes, position your left pinky on Ctrl, your left middle finger on F5, close your eyes, and click.

(you may open your eyes now…)

image

Yaay! It works!

Really, I didn’t expect anything less, but now I know for a fact. And so do you. You’re welcome!

Generating AL Objects from JSON

Original URL…

As interacting with WebServices, especially JSON/REST based WebServices, becomes more and more important, it was very good to see that the new NAV dev environment made it quite easy to do exactly that a couple of releases ago. After reading AJ Kauffmann’s excellent blog post on that topic, I had the idea to auto-generate that code based on a JSON file, so that you no longer need to write a single line of code to get a working base structure. With release 2.3.0 of my VS Code extension this is now possible!

Configuring Visual Studio Code to Use Modern Development Environment with Dynamics NAV 2018

Original URL…

After installing Dynamics NAV 2018, I want to configure Visual Studio Code with Dynamics NAV to use new Development tool.

Before we start lets verify few things and update accordingly.

NDE-1

You can download VS Code from here:-Click to download Visual Studio Code

Install and Launch the Visual Studio Code.

Now Click View -> Extensions.

NDE-2

Click on … to open the extension menu.

Click on Install from VSIX

NDE-3

You can find VSIX file on the installation medium path:

“ModernDev\program files\Microsoft Dynamics NAV\110\Modern Development Environment”

or in the

“C:\Program Files (x86)\Microsoft Dynamics NAV\110\Modern Development Environment”

NDE-4

This will install AL Language Version 0.12.15355

NDE-5

Once the Extension installation is complete, follow below steps

Press Alt+A, Alt+L to trigger the Go! Command

NDE-6

Enter Project Name and Press Enter

NDE-7

Choose “Your own server”

Once you select the “Your own server” you will see a code like below in the “launch.json” file.

NDE-8

Update the information to look similar to below:-

NDE-9

I have updated my ServerInstance as DynamicsNAV110 (you check your instance name if changed while installing server)

I have updated my Authentication as Windows (I am using Windows authentication update what yours use accordingly)

I have added Port as 8049 (please check and use accordingly you are using the port, if using default 7049 then this step not required)

Now save your File. And Press <CTRL + F5>.

NDE-12

Enter your Credentials.

The server url and the web client url are assumed to be the same. That is not the case. The two settings we talked about above, the server url and the developer port number, are the only settings you need in the launch.json.

When VS Code publishes the extension to the NAV server, the NAV server returns the web client url as a response. This url is then opened in the browser. No setting needed in the launch.json at all.

The NAV server reads that setting from the Web Client Base Url server setting.

NDE-13

NDE-11

Your Extension is published, you can verify as below:

NDE-10

Now you are good to go with developing your Extensions using New Modern Development Tool using AL.

HOW DO I: USE VISUAL STUDIO CODE INSTEAD OF SSMS?

Original URL…

Using Visual Studio Code as a replacement for Sql Server Management Studio is very easy. Once you have downloaded and installed VSCode (download it here), you need to add the mssql extension in Visual Studio Code, which you can find here.

Then create a new file in VSCode and give it the extension .sql. The mssql extension enables mssql commands and T-SQL IntelliSense in the editor when the language mode is set to SQL. 

  1. Press CTRL+N. Visual Studio Code opens a new ‘Plain Text’ file by default.
  2. Press CTRL+K,M and change the language mode to SQL.SQL language mode
  3. Alternatively, open an existing file with .sql file extension. The language mode is automatically SQL for files that have the .sql extension.

Then you need to connect to your SQL Server:

  1. In VS Code, press CTRL+SHIFT+P (or F1) to open the Command Palette.
  2. Type sql to display the mssql commands.mssql commands
  3. Select the MS SQL: Connect command. You can simply type sqlcon and press ENTER.
  4. Follow the prompts to specify the connection properties for the new connection profile. After specifying each value, press ENTER to continue.
  5. Verify your connection in the status bar.

Connection status

Now you need to see your databases on your SQL Server. Simply use the following query:

Press CTRL+SHIFT+E to execute the Transact-SQL commands. View the results in the query window.

Then you can query any table in any database, for example:

Press CTRL+SHIFT+E to execute the Transact-SQL commands. View the results in the query window.

On the View menu, select Toggle Editor Group Layout to switch to vertical or horizontal split layout.

Voila, it’s as easy as this!

More information and examples are available here: Use Visual Studio Code to create and run Transact-SQL scripts for SQL Server.

AL Extensions: Importing and Exporting Media Sets

Original URL…

One of the things that has changed when you are building V2 extensions for a cloud environment is that you cannot access most functions that work with physical files.

This presents a bit of a challenge when it comes to working with the media and media set field types, as the typical approach is to have an import and export function so that a user can get pictures in and out of the field.

An example of this is the Customer Picture fact box that’s on the Customer Card:

WorkingWithMediaFields1

As you can see, the import and export functions in C/Side leverage the FileManagement codeunit in order to transfer the picture image to and from a physical picture file. These functions are now blocked.

So…..we have got to take another approach. Enter streams.

Using the in and out stream types we can recreate the import and export functions without using any of the file based functions.

An import function would look like the following. In this example, the Picture field is defined as a Media Set field.

local procedure ImportPicture();
var
   PicInStream: InStream;
   FromFileName: Text;
   OverrideImageQst: Label 'The existing picture will be replaced. Do you want to continue?', Locked = false, MaxLength = 250;
begin
   if Picture.Count > 0 then
      if not Confirm(OverrideImageQst) then
         exit;

   if UploadIntoStream('Import', '', 'All Files (*.*)|*.*', FromFileName, PicInStream) then begin
      Clear(Picture);
      Picture.ImportStream(PicInStream, FromFileName);
      Modify(true);
   end;
end;

The UploadIntoStream function will prompt the user to choose a local picture file, and from there we upload that into an instream. At no point do we ever put the physical file on the server. Also note that the above example will always override any existing picture. You do not have to do this as media sets allow for multiple pictures. I’m just recreating the original example taken from the Customer Picture page.

For the export we have to write a bit more code. When using a Media Set field, we do not have access to any system function that allows us to export to a stream. To deal with this all we need to do is loop through the media set and get each of the corresponding media records. Once we have that then we can export each of those to a stream.

That would look like this:

local procedure ExportPicture();
var
   PicInStream: InStream;
   Index: Integer;
   TenantMedia: Record "Tenant Media";
   FileName: Text;
begin
   if Picture.Count = 0 then
      exit;

   for Index := 1 to Picture.Count do begin
      if TenantMedia.Get(Picture.Item(Index)) then begin
         TenantMedia.calcfields(Content);
         if TenantMedia.Content.HasValue then begin
            FileName := TableCaption + '_Image' + format(Index) + GetTenantMediaFileExtension(TenantMedia);
            TenantMedia.Content.CreateInStream(PicInstream);
            DownloadFromStream(PicInstream, '', '', '', FileName);
         end;
      end;
   end;
end;

We use the DownloadFromStream function to prompt the user to save each of the pictures in the media set. As in our first example, there are no physical files ever created on the server, so we’re cloud friendly!

You may notice that I use the function GetTenantMediaFileExtension in the export example to populate the extension of the picture file. Since the user can upload a variety of picture file types, we need to make sure we create the file using the correct format.

The function to do this is quite simple, however there is no current function in the product to handle it, so you’ll have to build this yourself for now. Hopefully in the near future this function will be added by Microsoft.

local procedure GetTenantMediaFileExtension(var TenantMedia: Record "Tenant Media"): Text;
begin
   case TenantMedia."Mime Type" of
      'image/jpeg' : exit('.jpg');
      'image/png' : exit('.png');
      'image/bmp' : exit('.bmp');
      'image/gif' : exit('.gif');
      'image/tiff' : exit('.tiff');
      'image/wmf' : exit('.wmf');
   end;
end;

NAV Development Preview – December Update

Original URL…

Welcome to our update for the Developer Preview; the December update. As usual, we’ve fixed a lot of issues reported by you, for more information view the list of fixed issues, In addition to that we’re announcing the following changes as you can see listed below. To jump directly to an updated image go to the Azure Gallery sign up at http://aka.ms/navdeveloperpreview.

The AL Formatter

The AL Language Visual Studio Code extension now offers the option of automatically formatting your source code. The auto-formatter can be invoked to format an entire AL document or a pre-selected range.

  • In an existing project, open the document that you want to format, right-click inside the document, and then choose Format Document.
  • To format a range, open the document that you want to modify, select the specific range to format, right-click it, and then choose Format Selection.

Earlier blog posts:

NAV Development Tools Preview – November Update

NAV Development Tools Preview – October Update

NAV Development Tools Preview – September Update

NAV Development Tools Preview – August Update

NAV Development Tools Preview – July Update

NAV Development Tools Preview – June Update

NAV Development Tools Preview – April Update

NAV Development Tools Preview – March Update

NAV Development Tools Preview – February Update

NAV Development Tools Preview – January Update

Announcing the Preview of Modern Development Tools for Dynamics NAV

Configure Visual Studio Code with Dynamics NAV 2018 (Local Server Installation)

Original URL…

After installing Dynamics NAV 2018 I want to configure Visual Studio Code with Dynamics NAV to use new Development tool.

I already had Visual Studio Code installed on my computer (Click to download Visual Studio Code) so I open up the application.

Do not follow Section 01 steps because you will run into issues. Read the Section 02 of the instructions to get it work.

Section 01 :

First thing I want to do is download AL Extention. In order to download AL extension follow below steps:

    • Go to View Menu and click on Extensions.
    • Search for AL 
    • Click Install.

Once the Extention installation is complete I followed below steps:

    • Press Alt+A, Alt+L to trigger the Go! command,
    • Choose “Your own server”
    • Once you select the “Your own server” you will see a code like below in the “launch.json” file.

I change the settings as below :

  "version": "0.2.0",  
   "configurations": [  
     {  
                "type": "al",  
                "request": "launch",  
                "name": "Local server",  
                "server": "http://localhost:7049",  
                "serverInstance": "DynamicsNAV110",  
                "tenant": "default",  
                "authentication": "Windows",  
                "startupObjectId": 22  
     }  
   ]  

 

Once I do that I got an error message, and I could not resolve it. (Could not download symbols. Please see the Visual Studio output log for more details)

Then I thought it is something to do with the Service tier config so I open up the config file and notice that “Enable loading application symbol reference at service startup” is disabled. I enabled it and restart the instance.

Even after that also I could not get to download symbols. Therefore I thought to use a different approach.

Section 02:

I thought to install AL extension manually by using VSIX file.

    • Uninstall AL extention from Visual Studio Code.
    • Click View -> Extention.
    • Click on … to open the extension menu.
    • Click on Install from VSIX

You can find VSIX file on the installation medium path: “ModernDev\program files\Microsoft Dynamics NAV\110\Modern Development Environment” or in the “C:\Program Files (x86)\Microsoft Dynamics NAV\110\Modern Development Environment”

This will install AL Language Version 0.12.15355

Once the Extention installation is complete I follow below steps

    • Press Alt+A, Alt+L to trigger the Go! command.
    • Choose “Your own server”
    • Once you select the “Your own server” you will see a code like below in the “launch.json” file.

   "version": "0.2.0",  
   "configurations": [  
     {  
       "type": "al",  
       "request": "launch",  
       "name": "Your own server",  
       "server": "http://localhost",  
       "serverInstance": "nav",  
       "authentication": "UserPassword",  
       "startupObjectId": 22  
     }  
   ]  

In my local installation, I use Windows Authentication and my NAV instance is different. Therefore I change the file values as below.

    "version": "0.2.0",  
   "configurations": [  
     {  
       "type": "al",  
       "request": "launch",  
       "name": "Your own server",  
       "server": "http://localhost",  
       "serverInstance": "DynamicsNAV110",  
       "authentication": "Windows",  
       "startupObjectId": 22  
     }  
   ]  

Once I update the values and save the file, it successfully downloads the symbols.