Develop in Visual Studio Code for Dynamics 365 Business Central Part 1

>> Hello, and welcome to this video in which I will talk about development for Microsoft Dynamics 365 Business Central which is done in Visual Studio Code The goal of this video is for you to learn about Visual Studio Code or VSCode for short, and all the important elements of the AL language I will show you everything that you need to know about as a starting point for you to become an effective and efficient AL developer If you follow along with my demos, you will create your very first extension for Business Central over the next couple of hours My name is Daniel Rimmelzwaan and I am a partner with Cloud Ready Software, one of the ISV development centers who can help you with just about anything related to Microsoft Dynamics 365 Business Central You have four main objectives In the video titled Setting up Visual Studio Code for Dynamics 365, I showed you in detail how to set up and configure your development environment for Visual Studio Code In the first section of this video, I will quickly recap this information And before we get started, we will create the Workspace together In the second section, I will introduce you to all the object types in the AL language and we will create a very simple extension together You will also see the in-client designer, which is a Visual development tool inside the Business Central Web client that you can use to help create page extensions The third section shows a few ways to enhance your extension We will look at the debugger, we will see how translations work, I’ll show you how to use dependencies between apps, and finally, we’ll take a look at some of the new.NET Wrapper and data types In the final section, I will cover connecting to the outside world and the technical aspects of converting your CL objects to AL This last topic is also covered in much more detail in the video titled myCREDshowIP to Visual Studio Code So let’s get started The first section, we’ll cover setting up the development environment And as I said in the introduction, there is another video about setting up Visual Studio for Dynamics 365 Business Central But, let’s recap this real quick The easiest way to set up a development environment is to use one of the Azure VM templates to create a sandbox Before Business Central was released, we used the template to create what was called a developer preview in which we were able to do development and testing for Business Central apps So, now that Business Central has been released, Microsoft has new templates to create the sandboxes and those new templates are available from the aka.ms link on your screen The nice thing about those Azure VMs is that everything that you need is pre-installed and there’s not a lot you have to do to make it work If you really want to have your development environment locally or in a local virtual machine, you will need to prepare your environment yourself First, you will need to prepare your machine for Docker This can be done in Windows 10 But, it is easier to use Windows Server instead For instance, I have my personal development environment in a local VM on Hyper-V with Windows Server 2016 as an operating system And I use those VM snapshots to be able to easily revert back to a previous working system in case I screw something up But for this video, we have an Azure VM So, I’ll show you around in the next demo Next, you’ll need the NavContainerHelper PowerShell module which in the Azure VM is already pre-installed Managing all sorts of things for NAV can be done using PowerShell But since Microsoft is now deploying all those Business Central Builds on Docker, they’ve also provided a PowerShell module that allows us to use the PowerShell command loops from inside the docker container from PowerShell ISE window outside of the container So, you don’t have to go into the container in order to be able to run those because the PowerShell works from outside the container from the host, and even remotely So, the NavContainerHelper module provides command loops for a variety of purposes and they really make life so much easier for AL development Next element is Git Visual Studio ode is natively integrated with Git But, it is not part of the install So, when Visual Studio Code is installed, it does not automatically also include the installation of Git So, to make it work, you’ll need to install it yourself Lucky for you, when you open VSCode and Git is not installed yet, first thing that VSCode does is check if Git is available and it will give you a message that it’s not, and it will give you a button that you can click, and I’ll show you how that works So, we’ll set that up together So, in order to be able to communicate with a remote repository through Git, you’ll need to set the global name and e-mail address system settings

And probably, the most important of all, you need to use a valid NAV partner development license Without that, you’re out of luck, unless you want to do development for a particular customers yourself So, the reason is, each partner gets their own number range for objects and those number ranges are set inside of the developer license And so, by using a developer license, it sets up whether you’re allowed to create objects in those number ranges And so, for customer specific apps in the 50,000 range, you still need a proper developer license because only your partner license gives you access to those numbers So, it really depends on what you want to do with it, but at the very least, you need a proper developer license So, all the elements for a Business Central Development are contained within what’s called a Docker Container Now, I’m not going to go deep into Docker We have a video about deploying development environments using Docker, and in that video, we go into deep detail and very deep dive into how Docker works, how it’s all set up But the thing that you need to know is that these Docker Containers are based on an image So, the image is downloaded to your host and then a container is created based on that image And so, every time that you create a container, it doesn’t need to create like the whole image again, it only uses part of that image as like a template for the new container So, it’s very effective and very efficient Downloading the image might take half an hour, but once the image is downloaded onto your host, you can create a new container within a matter of minutes So, the container includes a WebClient, a Windows client, C/SIDE, PowerShell, Command prompt, NAVContainerHelper and there’s a specific folder that you can use to share files between the host and the container, and I’ll show you how that all works Of course, the next element is Visual Studio Code itself, also known as VSCode, and what makes VSCode so powerful are the extensions So, VSCode is a lightweight developer tool that you can make work with certain languages by installing extensions for Visual Studio Code And so, for this you can watch the setting up VSCode for Business Central and also a video about tips and tricks And so, on the tips and tricks video I’ll go into all sorts of cool detail of new extensions and how you can improve your developer experience You can get quite fancy with this It is really cool how it all works and I am really excited about seeing how this develops So let’s go to management I’ve mentioned this before Git is integrated VSCode You can also add a extension for Visual Studio Code into Team Services for instance or any other type of ticketing system There are a number of extensions for a number of different systems So I like to use VSTS because I’m used to it We use Git Repos in VSTS for work items and for linking check ins and commits to work items So, it’s very useful. I like it In the tips and tricks will go into more detail on how that can be done You also have a video about Source Code Management specifically So therefore, I’m not going to go into much detail In fact, I don’t think a cover Source Code Management itself very much at all in this video, but you can watch the Source Code Management video if you want to know more about that So our approach, the development approach is to have one of a decentralized development approach, which means that we don’t connect to a common database with a whole development team So, if I have five developers, we don’t have one development database and all five developers connect to that same system Now, every developer has their own local instance of the development environment And by using Source Code Management, by using Docker containers, this is actually very easy to set up by some very easy scripts And all you need to do is link to your Source Code Management repository which downloads all the files to a local folder, then you’re on a script to create the Docker Container and your Workspace is off to the races and you can start doing your own development You don’t have to take care of any version tags and things like that

Anyway, I’m getting ahead of myself, or at least I’m getting excited about this topic because it’s really cool Unfortunately, it’s not for this video So, Visual Studio Code, VSCode is about files in Workspace So, a file is always in a specific language mode, which is detected from the file extension So AL objects have an extension.al So, you have customer card.AL That.al makes it an AL file, which Visual Studio Code will recognize because you have an AL language extension installed, and because it’s an AL file, it recognize it as an AL object PS1 file as a work, is a power shell file etc etc The main project folder is referred to as the Workspace So, the Workspace with the files is the principal way of working with VSCode And so, you can actually look at the explorer section in Visual Studio Code You can have Windows Explorer right next to it when you create a new object in VSCode, you will see the files show up and vice versa So, you can create a new file in Windows Explorer and you can see it appear in the VSCode automatically And then, we have something called the Command Palette VSCode works with a Command Pallet That access to the Command Pallete is Control Shift plus P. If you do control P without the shift you go to file, which has this little greater than character I’ll show you how that works It’s really cool how just by typing a greater than signal, it goes into a different mode of the same text box It’s really slick once you see it There’s a small selection of menus There are no toolbars ribbons or icons, except for what’s in the activity bar And another thing that makes VSCode really powerful is Code Snippets So, code snippets are like little pieces of Code with placeholders So, as a Seattle developer, you probably have a lot of times where you have like a fine set and then repeat until next equals zero That stuff can all be in Code Snippets and it makes it really efficient So, as we go through all the objects today, I’ll use snippets I’ll show you how to use snippets and if you want to see how snippets are created, go take a look at the tips and tricks Best practices in Visual Studio Code video, where we go into snippets and how to create them There’s even an extension in VSCode that will help you create snippets efficiently Configuration is done in JSON files, so whenever you go into the settings of the program you set a setting where you change a setting that modified setting is saved in a file and the language of those configuration files is JSON So, JSON is Javascript Object Notation and there are a number of configuration file in JSON format like settings.json and the language.json, launch.json, app.json, and as we go through this whole exercise, you’ll see what those files mean So right now maybe you’re confused as heck, but trust me at the end of this video, you’ll know exactly what I’m talking about Again, Source Code Control integration integrated support forget supports many repositories and providers I already covered Gits a little bit As long as it’s a Git repository like on GitHub or Bitbucket or VSTS or maybe a privately hosted repo, TFS I think can be set up to have Git repositories as well So, as long as you can connect to it, as long as it’s configured as a Git repository, you can have that as a repo in VSCode So, this is the Visual studio Code anatomy This is the screen, what it looks like First you have the “Menu” as you can see there’s only 1, 2, 3, 4, 5, 6 selections on the menu It’s very limited They really wanted to keep it clean The next is the “Activity Bar” There’s five selections on there The top is the “Explorer” That’s where you’ll see the folders and the files in your Workspace Then we have “Search” and then we have the third is the “Git Integration”, then we have the “Debugger”, and then finally there’s the “Extensions List” So, you can see all the extensions that are installed in your VSCode The “Status Bar” at the bottom can have different color so by default it’s blue At some point it turns to purple when Git installed, it can be yellow or red or orange depending on

different states and depending on the extension that’s in use You can see various different ways of interacting with the system So, when you’re in Source Code Control, it’ll show you if there’s a commit that’s ready to be uploaded, if there’s issues in there, it all shows up in the status bar As we’re going through these objects, if there’s something interesting to point out about the status bar, I’ll show you Then the middle is a text editor, it doesn’t look like a text editor because it’s not showing the text editing at the moment, but it’ll become clear And then finally, you’ll see this is the Command Palette This is where it all happens This is Control Shift P and that’s the Command Palette you’ll see the greater than sign you can actually backspace out of that and it becomes an empty text box and that changes it to the “Go to” file So, especially if you have a Workspace that has hundreds of files, it’s really useful to have the search capabilities within the Command Palette So, what makes VSCode useful for us as AL developers? Well, that’s the AL language extension, and so the language extension for AL for VSCode is an extension with which you create objects for Dynamics NAV and Dynamics 365 Business Central It has capabilities of writing and interpreting AL code It has Syntax Highlighting which means that different keywords get different colors based on the function of that keyword It has IntelliSense so it is context aware, it knows where you are and what the capabilities are, what the options are at that point So, for instance, if you’re in an empty file, you want to create an AL object, it knows okay, well, you’re in an empty file, so you can create a table or a page or an exit point etcetera And so, if you’re in a table objects and you’re in the fields area, it knows that you can have a field snippet So, it knows by way of context what you can do and so it’s IntelliSense and so you can autocomplete something that you’re typing, you can do “Control Space” to force it to show you what’s available at that point Next thing is the compilation errors and warnings This is real time, so it will tell you warnings and errors as you’re typing So, as you’re writing code, as you’re creating an object, it will tell you in the problems window what you’re not doing right and so, it is quicker than you can type So, sometimes that’s annoying because you know as you’re typing the word “Code units” by the time that you’ve typed the “u” it says unrecognizable object format And so, it’s sometimes it’s even a little bit too quick, but that’s pretty cool You can also deploy to Dynamics NAV or 365 Business Central service tier from VSCode AL Language provides a way to automate the creation of Workspace So you can create Workspaces from the ground up, but there’s also a command in there called AL colon go under the command pallets, “Control Shift P” and then you enter AL that Go, and then it will ask you for a folder, and it will create the Workspace with configuration files for you and then you can get started So, without further ado, let’s have a look around and we will create our first Workspace So, this is my Azure VM I’ve created this by using one of those templates And within that template it creates a container called NAV Server So, you’ll see a group of shortcuts with NAV Server, so I have a PowerShell prompt NAV Server web client, NAV Server Windows client, NAV Server C side Those are all connected to the docker container that is called NAV Server, and so all the elements that I need to do development on NAV Server are available The other part that I’ve mentioned is the NAV container helper So that’s the PowerShell module that has functions for container handling, for object handling, for app handling etcetera I’m not going to go into the details for this because we’re not going to use much of it You can watch the video about setting up VSCode for Dynamics 365 Business Central You can also watch the docker video in which we are going to go into deep detail for that

The other part is the PowerShell ISE, not for this particular video I’ll show a little bit about it in the migration scripts but just to show you that it’s preloaded If I go here and I say, for instance, “new-nav container” you’ll see that the nav container helper objects are already preloaded, so I don’t have to do anything to load this into memory, it’s already part of the Azure VM So, that’s very handy you don’t have to do the loading of the command lists Another important part is the landing page A landing page on the Azure VM has a bunch of information that is very important This is the insider build number that I’m using for this Azure VM I have this version of the AL Language installed, and if you click this it’ll download the V6 package that you can then install in VSCode So, that’s not a topic for this video but if you have a container like this with a particular number, it comes with a particular version of VSCode that is supposed to be able to work together Another part that’s important if you create your Azure VM, you have to wait until this message appears before you even try to connect If you connect to the VM before that message, you can actually mess up the VM itself So, when it’s all the way down, starting initialization at some point it says, “container setup complete” you think “I’m going to connect” but as soon as you’re connecting it’s still running a script in the background, so you can screw that up if you connect So, don’t connect until you get that completion in your screen. That’s it So, now we go into Visual Studio Code and as you will see the first thing that it does is it checks for git If you don’t install git, git is not necessary for what we are going to do today, but I don’t like this message and it’s easy to get rid of it So just click on “Download git”, it opens this website, then you say “Download for Windows”, and then you say “Run” and then “Downloads”, and then it comes up with the installation wizard and then you click on “Next” nine times and this is one, two, three, four, five, six, seven, eight, nine, and then it is “Install”, and then it’s going to run, and then it’s going to complete Then we unclick, uncheck view release notes We hit “finish”, and now it’s done So, then we click this guy and we restart Visual Studio Code You’ll see, looking for Git, it’s finding Gits So, now everything is peachy, we’re not going to get this warning again So, this is Visual Studio Code Here is the Menu bar, with very small selection And this is the Activity bar, with the Explorer on the top Then Search, then Source Control, then Bugger, and then extensions, and as we’re going to work through all the labs today, we are going to use most of these things So, I’m not going to talk about all of them right now, but one thing that you will want to know is the command palette So I am hitting “Shift-Control P” and that opens the command palette, and as you can see, there’s a greater than, if I delete backspace the greater than, we going to go to file It doesn’t do much now because I don’t have a Workspace with a bunch of files so, I can’t really show what is in here I can do a question mark, and you can see the kind of stuff that you can do, if I do the greater than, it goes back into the command palette So, the first command by the way, if I go into extensions, the only thing I have installed at this moment is AL Language, and I also still have PowerShell installed I thought I cleaned up my environment completely, but I haven’t So PowerShell still installed So normally, you will not see PowerShell that will not be part of it, but in the Azure VM, this AL Language is already pre-installed, and if you’re doing this locally, you’re going to want to download VSIX from your landing page And then, go in here Control P, and then vsix Install from vsix, you point to the file, and then it’s self-explanatory, it’s real It’s really easy to do that

So, let’s do “AL Go” And then it’s going to ask for a folder So I have a folder on the C drive called MyDemos, and I’m going to call this BookShelf because our Extension is for the BookShelf So as you can see, it automatically creates a Workspace for me It asks the unit to go to a Cloud Sandbox, or your own server, where all local here So we click “our own server” and what that does is it creates a couple of files And so, it’s now asking for the server name requires authentication because it’s now trying to go local host Let’s escape out of this, and let me just show you all the files that are part of this Workspace So, first of all, I can open Windows Explorer I go to a Local Disk I go to MyDemos, and never mind the other couple of Folders, those are demos for later This is the BookShelf Workspace that I’ve just created And it has a folder called VSCode It has an app.json and HelloWorld.al And in the vscode folder, there’s a launch.json So if I go into those files from Visual Studio Code, HelloWorld.al is an AL file So it has the Extension AL So now with syntax highlighting, you see that it is interpreting the syntax of the object based on the language So, we have an app.json, which if you’ve worked with ExtensionsV1, you know that in order to create a NAVX file, you have to have a manifest This is the manifest files So, let’s put something in the publisher, I work for Cloud Ready Software, and I’m going to give this the name “Awesome BookShelf.” As you can see that ID range by default is 50,100 till 50,149 That’s the default values If you have a developer license with a number range for an add on you’ll have these different values And so that license is loaded into the container, and you would have to change that So “Control S” Save the file, then we’re going to go to launch, launch is the connection information to the service here And here, we have to go into the landing page again to copy specific connection information So at the bottom there’s a piece that is important for launch.jason So you just select those four lines, and you do “Control C” just copy them And then, in your launch.json, you’ll see three lines here that have the same kind of things, so server, serverInstance, and authentication Over here, server, serverInstance, and, authentication, and also the tenant is blank here And so in the launch.json in your Visual Studio Workspace, just paste that right in here And then as soon as you save this, it’ll know that it has to connect to this guy So looking at HelloWorld which is red You see these squiggly lines it says, “The target page Customer List for the extension object” is not found Sometimes when you save the launch.json, it checks and looks for symbols, and it can’t find the symbols So one thing that we have to do is download the symbols to our Workspace in order for us to program against the reference of the service here And so it’s not asking for it No. Sometimes when you reopen let’s, let’s reopen the Workspace. See what happens So if I go to Visual Studio Code, it opens that Workspace again because that was the last word from Workspace that you’ve used So now you get a message here that says, “Symbols are missing” You can click on “Download symbols” You can also do “Control-Shift P” and do “Download symbols” and then select that So whether you select this command in the command palettes, or if you click on this button is going to do the same So now is going to authenticate against the system that we’ve set up and launch.json So it’s asking for a user name and my guess is Winster and

my password is some secret password So now, it’s going to go into the service here to get the symbols down And so now I get a message that says “Symbols have been downloaded” If I go into the AL packages folder, I can see two app files and so I can tell you that these two files are actually extension files So once we start publishing our app into service tier, it will generate The system will generate an app file and that app file is a different app that is going to go into the service tier, and so, it’s the same thing as what is here So app files for the system itself is now part of my Workspace and now there are no more problems, so if I click on “Problems” It says “No problems have been detected in the Workspace.” And the customer list is no longer marked as something that it can’t find because the reference to the Customer Lists is now part of our Workspace So that’s it We now have a Workspace, with which we can start doing developments So let’s go back to our presentation And we are going to go into the next section Developing Your First Extension In essence, developing in a AL comes down to three parts First, it is about defining the data model Second, it’s about presenting the data in the user experience And third, it’s writing code into methods, and attributes, and functionality that can be used by the user So let’s go into the first item, which is defining the data model So there are two object types that you can use to define the data model One is a table object which is defined by new table objects for your extension So, your extension will have new tables that don’t exist in the Base app Those are table objects, and then the second part is Table Extension Objects, and those are used to modify and extend existing table objects And so we’re going to create one of each in the next few minutes, we’re going to create an actual Table, and an actual Table Extension Objects And so, you can’t actually go into the table and modify it, but you can add to the table objects that’s in the standard Base App And so a few things that you can do there, you can add fields, you can modify certain properties, you can add triggers to the table extension object that automatically subscribed to events in the table object of the Base App, and we’re going to create examples of those So, first, creating tables, the object is a table object The snippet that we can use is the ttable snippet or the tfield snippet for the fields So, the ttable snippet is for the object itself and the field is for the fields inside it You can declare properties, and fields, and keys, and code, and in the code you can have triggers and procedures So, the triggers are really the table triggers So you have on insert or modify, et cetera, and then you also have validation field triggers, and then obviously you can create procedures as well The second data object is extending existing tables, which is done by the object called Table extension There’s a snippet for it called ttableext, possible changes that you can do is you can add fields to the base table which will have to get your custom field numbers You can add keys, you can add trigger logic for insert, modify, delete, and rename, which automatically subscribe to the insert, modify, delete, and rename events of the original base object in the base app Plus you can modify existing fields where you can change certain properties, you can insert triggers, OnBeforeValidate, OnAfterValidate by adding triggers to the fields itself It looks the same as the triggers in table objects only they subscribe to the validation trigger of the base table So, you can see a full list if you follow the link at the bottom of your screen We are going to go back into our Azure VM to see if we can make this work

So, we are back in our bookshelf Workspace First thing we’re going to do is we’re going to get rid of hello world We don’t need hello world and we’re going to create our own Now we have a poorly configured Workspace because it doesn’t have a nail file So, every Workspace for AL needs to have at least one AL file So, one way to create a file is on the file menu, you click “New File” You can do new file by doing control N which will put it in the folder that you’ve selected So, if I click on AL packages, and then I click control N, it’ll create a new file on the alpackages folder, and that’s not where I want it, I just want it in the root So, you can also click on the “New File” button which is what I like to use because then you get to insert or create a file name right away So, we’re going to create a new table called Book, and then you have to give it the extension.al and that defines for the system, I’m going to create an AL file So now, the bottom of your screen, in the status bar, you see that the language mode of my file is now AL I click on app.json, it says it’s a json file If I had a PS1 file in my Workspace, it would say power show et cetera, et cetera So now, because it’s a.al file, it will recognize it as an AL in the language mode, and also when you hover over it in the “My Demos” folder in the bookshelf folder I can actually browse to it too, if you want the show If you want to see that my demos in the bookshelf, I now have a file called Book.al So, you can actually open this with Notepad, and it’s empty right now I can save it, and it goes right in there It doesn’t recognize it because that’s not AL So now, this is a empty AL file and we can create a new object So, I can look at IntelliSense by doing Control Space And it tells me that I can do a number of things So I can do this myself I can define it as I’m going, but I can also use a snippet So, I can go in here, you’ll see table So, if I do table and I give it a number, and a name, et cetera, I can actually create this from scratch and you’ll see that right away, at the bottom here, it says a bunch of different things So, integer literal expected, identifier expected, curly braces is expected So, immediately, as you’re typing, you already know that you’re not done yet So, on one hand it’s annoying because you know that you’re not done, but on the other hand it’s also really great because you don’t have to save it and compile it in order for you to know that something’s wrong So, I’m going to use the table snippets and the table snippet is ttable So all these snippets they start with t and then the object or the thing that you want to do And so, you’ll see over here it says Snippet: Table (AL Language) So when I select that, it creates something that resembles an object in AL, and as you can see, there are a few things that are like almost highlighted So now, it’s highlighting id, MyTable, and My Field, an integer, and PK, field et cetra All those are placeholder So, what I’m doing now is I’m doing Tab, which goes to the next placeholder I go Tab and it goes to the next placeholder I do Shift Tab, it goes to the previous placeholder I do Shift Tab and I go to the id Now, I do arrow down Now, it exits the snippet So, if I do Tab now, it actually types the Tab So you have to be careful with what you’re doing with these snippets So, what I’m going to do as I’m just going to select everything and delete, I do ttable, table snippet, I go enter And now it’s asking me for an ID So, if you remember, the app.json said the number range is 50,100, that’s my number My table, I’m going to call it Book, and now I have a field And so my field, my first field is, it’s an NAV table So, you have to give it a number By the way, did you see how when I typed to the first double quotes it put the double quotes,

the closing double quote, in there immediately and when I typed another double quote, it didn’t type an extra double quote but it just jumped over the closing double quote? That’s how the text editor’s also smart So now, I have given its name, field name, I tapped to the field data type, and of course that’s Code, Code [20] , and then I go to tab, and it jumps right into the properties Let’s see if there is another tab It goes to PK That’s the key number, and then it goes to the key properties So, automatically, it puts that number because that’s the first field that you enter as the primary key Clustered is always true, so lets select true And then it goes into the variable which I don’t really like at this point because usually, you don’t start your table creation by entering variables and that sort of thing So, what I usually do is go into the variables and the triggers and I’m just going to get rid of triggers Don’t forget, what we’re doing here is we are working with a text file So this text file, that’s all it is, it’s just text And so you can do any text in there that you want As long as it’s part of the AL file, it will be interpreted as such Next, I’m going to add a new field So, what you can do is you can do field, and create your own field from scratch But you can also go and say tfield, and you see that there’s a number of snippets for it So, I’m going to create a number of new fields, and I know what type of fields I want to create So, my next field that I’m creating is called title, and it is of type text 50 So, it is a tfield text So, if I do tfield text, it immediately creates a field of type text, I give it a number So, this is field number two MyField is title, is A. See what happened now? What happened is IntelliSense recognized something that I typed, and I pressed enter and that created another piece of code for me So, I don’t want this, and so what you want to do is control Z, but in control Z Now I’m in tab mode So, that takes me out of my snippets So, we have to kind of be aware of what you’re doing So, let’s recreate that “Tfield” and then there’s text “Field2” there’s “Title” So I have “Title” and it thinks I want to use the “Isemptyelse” snippet I don’t. So, I escape out of this and then I do “Tab” And now it goes right into the “Length”, I want to do “50”. That’s it Then it goes into the “Properties” and so now it thinks, “Okay, you want to add some sort of property” I don’t want to add some sort of property, I just want to create the next two fields So, I’m going to pause the video and I’m going to add three more fields real quick and then I’m going to start the video again So, I have two more fields And I wanted to show you actually one more thing about the field snippets so, “Tfield” I want to create “Booleanfield”, so for boolean there is no field snippet but now I want to create an “Integerfield” and there’s also no snippet So, you can just use the regular field snippet which creates something else So, here I wanted to create “Field5” and that is called “Page Count” and that is an “Integer” And now, part of this snippet is, it provides another property placeholder So, one of the things that you’ll find as far as issues in the AL language is that not all of the snippets are aligned in the way that they work So, the nice thing about that is that you can actually go in there and modify the snippets the way that you want them So, it’s really versatile in that One other thing that I wanted to show you, and I need to expand this to full screen, and let’s take two listing off Each field, I want to provide every field with a caption

And so, you can go in here and hit “Enter”, and then do “Caption”, and then you’d say “=”, and then you say “Number”, and then like that There’s another really cool trick, is where you can do selection, multi selects So, I put my cursor at this curly brace here, and now I’m holding down the “Alt” key, and then I’m also clicking after each of the other curly braces, and now am releasing the “Alt” key And as you can see, there’s a blinking cursor in four different locations So now, I hit “Enter”, and it enters a new line on all four of those spots Now I do “Caption” and it enters that same thing on all four spots So, as I’m typing this, now I have caption for every line and all I need to do is you escape out of it to actually enter the value, and then we save it and then we’re done with that one Right? This is our table object So, we have a new table called “Book” We have a number of fields, and we have a key, and we have a bunch of triggers that we don’t use By the way, I delete it does because this is just text file I can go in here and create a new trigger and it will show me what kind of triggers I can actually create here So, I have an “OnDelete”, “OnInsert”, et cetera triggers that you can add to a table object because that’s part of the AL language understanding of what a table object’s supposed to be So, you can’t “OnDaniel”. That doesn’t exist So, you can only create triggers in events that are defined as part of the object definition Next we we’re going to create a table extension so we click “New File”, and we are going to create the “CustomerBookExtention.al”, which creates a new file and in there, we are going to create a table extension So again, we can do “TableExtension” and build it from scratch We can also do the “TableExtension” snippet So, this is a different table or a different object type, then book, then the table, so, I can use 50100 again “MyExtension”, well, that’s the name so, “CustomerBookExtension” extends the “Customer Table” So, what I’m going to do is, I’m going to add a field to the customer table for favorite book and I’m going to link that to the book table So, as you can see, I have an ID for the object I have a name for the object and now it says, “What do you want to extend?” I want to extend the customer table So, as I’m typing, IntelliSense suggests all the things that have that “Customer” thing in it So, the word “Customer” as part of the name of things that I can select And so, this is very powerful because this is the reference that we’re talking about So, if you were to create an app that is an extension of another app, all you would need to do is have that app reference inside of your Workspace and it would recognize those names So I’m selecting this “Customer” and then it’s going to go into the next placeholder I’ll change the table fields here So, now we’re going to “Tfield” And what do I want to do? I want to do favorite book numbers As you can remember, the book’s number field was code 20, so, I’m going to add a “Field Code” snippet and I’m going to give it number 50100 My field is, “My Favorite Book No” So this is not really part of this video but when you create an app that’s going to go into app source, you have to make every field that you add to base tables unique And the way to do that is by generating a prefix or a suffix And you have to go to Microsoft, to the guy that validates these apps You have to submit your request for a suffix or a prefix

So, they keep track of those suffixes and prefixes So, let’s say I want to use XYZ In that case I would say, “My Favorite Book No XYZ” because there might be another guy creating another app that is also a bookshelf app and they also want to add a field called “Favorite book” and so, this is the way to keep the names unique So, this is in advance of when they are going to get rid of the object IDs, you want to have unique names For today, because we are the only ones, it’s not really relevant so, I’m not going to put the prefixes in there But when you do app development for app source, either XYZ as pref or as a suffix, or XYZ as a prefix, either one will work but you have to register to those And then we tap into the next, that was “Code 20”, and I don’t want that property and I don’t want this variable I will add the variable when I need it So, that’s it This is my table extension for the customer table So, I have added a table extension that extends the customer with an additional field Let’s create the caption “Caption = Favorite Book No” Alright, that’s it. It’s all we need to do We have a table and a table extension Let’s go back to our presentation So, what does this actually do in the database schema? When you add a table, it just adds the table itself But for table extensions, before what it did in extensions V1, it would just add a field to a table So, the base table, customer table in this instance, would get an extra field from a number of different extensions And as you can remember from the old NAV days is that there was a limitation to the number of fields that you can add to each table And so, especially when you hit very popular tables like the sales line table and the purchase line table, when you add a number of these really big add ons, you ran out of field space real quick And so, what they’ve done for extensions V2 is they have come up with a scheme where each base table gets a companion table And so, the data for the table extension is stored in a separate companion table And so, they are related to the table that they extend but they make that extension compatible with multi-tenant databases So, each tenant can have their own tenant database with just the tables that are added for the apps that are installed for that tenant So these companion tables are created at sync time And what that looks like is for instance, the Customer you have, the Number in the Base, you have the Name in the Base, you have an Extension Companion Table, that’s the second line So, where the red one has Customer Dollar and then this funky number the blue one has Customer Dollar and then a different funky number They both have the same primary key as the Base Table Only they have those additional fields for those additional apps So, instead of shoe size for our example, there would be a field for a favorite book number and so that shoe size for Extension one was added to the Customer Table, and it gets an additional Companion Table for that app, instead of an additional field for that app So it’s no longer adding and removing fields from the Base Table, it’s creating additional Companion Table What do you need to know? This only affects table extensions, not new tables So new tables when you give it the name Book, it will create a table called Book If you create a Table Extension for the Book Extension, what happens is AL doesn’t change It sees that a single table, so if I create a variable based on the Customer Table, that favorite book number will be a field that you can program against like instantly, and the companion tables naming is Original Dollar App ID So the new schema sync process for extension, adds the Companion Table and it’ll call it Customer Dollar and then App ID Let me show you real quick where that app ID is

That is that app ID and app.json So, this is the funky number that the table would be called So if I copy this, the new table would be Customer Dollar and that number, this would be the table name It gets funky colors not because it doesn’t recognize it, but that’s the Customer Table Name And of course you get the Company Dollar and then Customer et cetera So, it’ll adhere to that structure, only the table name for that additional table extension object will get that ID, the app ID That’s it about the data structure So let’s go to the Presenting the Data Presenting the data works with Pages, Page Extensions, Profile and Page Customizations So there’s a difference between a Page Extension and a Page Customization Then we have Reports, XML Ports and Queries So those object types are all used to present the data to the user Let’s go into the first real important object type, which is the Page and the Object is called Page You have two snippets for page creation One is called T Page which is for the object itself, and the other is T Field Page, and that is for adding a field to the page And then in the Page Object you declare properties like Page Type or Source Table You have an area called Layout and that’s the representation of the data, where you have Areas and Groups and Parts and Fields. Then you have Actions Those are going on the Ribbon and Action Item menu And then you have Code, Triggers and Procedures, and so just like in C/SIDE you will remember, what’s available in C/SIDE is also available in the AL Object on a Page Object The second type of object that is important for displaying data is the Page Extension Object which is used to extend existing pages So the name of the object is Page Extension, and the Snippet that we use is T Page Ext Possible changes that you can make or you can add a group or a field or a part or an action What’s important there is that you have to specify where to place it So you have to define an anchor, and so you have the functions Addfirst, Addlast Those go into the first tab, so you specify which first tab that field needs to go into, and then you say, either at the start of that first tab or at the end of that first tab Then you can also specify particular fields where you want to place the new field, and then use the Addafter or Addbefore Anchor And so you define the Anchor inside the parentheses, so in the screenshot you see your, “Addlast General” That means go to the General First Tab and add my Favorite Book No to the end of that First Tab I like to use the First Tab anchors, because sometimes what happens is, if you anchor your Field to an Existing Field, it might happen that another page extension moves that Field to a different First Tab So if for you the importance is that your new Field goes into a particular first tab, then you need to anchor it to the First Tab itself If you want your field to follow another Field then, you obviously anchor it to that Field So if you have say a name and then the Standard Object has Name and Name Two, if you add Name Three to it and you always want to have Name Three displayed right by Name Two, you just tell it to anchor to Name Two, and if somebody else moves Name Two to a different First Tab, your Field will move to that other First Tab with it The full list can be found in this link down here at the bottom Let’s go in to the Workspace, and see what it looks like to create a New Page and a New Page Extension So let’s close the app.json and launch.json Let’s close the Book and the Customer Extension Now let’s create a new file And we are going to create a Book Card, so BookCard.al We’re going to create two pages

One is a card page and one is a list page So we go, “T page.” So now I have T page as a snippet, T page of type list There’s no specific for cards, so let’s get the regular page snippet, and that already sets the default to Cards So the Book Card Object ID is again, 50,100, because you know this is the first page that we create Book card, the Page Type is Card The Source Table is Book and as you can see IntelliSense now knows about the Book Table, because we’ve added it in this Workspace, and so it looks at the symbols and also at the other objects inside the Workspace And it doesn’t matter in which folders, so you can have 10 different nesting folders in here, all the objects in those folders will be recognized as valid objects inside of this So then we go into the Groups, so jump right from the Page ID to the Page Name, Page Type, Source Table and now it goes into the Group So we have a layout with an area, and now we’re going to create a group So just like standard objects, let’s give this one a general Then we go into the field The first one that we want to show is the number which is available, and then immediately you see an issue here where the source is displayed, but the name is not the same So what I don’t like about that is that, I want to see if we can do this in a more efficient way So let’s add T page field, T Page Field So T Page Field, so to add a Field to the Page you speak of T Field Page So T Page Field makes more sense but the first placeholder in my field, so I can say number, and then I can say number again And then it gives me Field Property with a field property values This is important So that’s it for the snippets Anyway, one other thing I’d like to show you is you can also create a field yourself, and when you do this, so the second is the title When I select that field from it, you see that immediately it puts the name and also the expression in there So for me personally, creating the field on a page without the snippet is even faster than using the snippet, because the snippet adds something to the field that I don’t know if I’ll always use and I’ll show you a trick to add what I need real quick anyway So, curly brace, curly brace And that’s it for this guy So then I want to add a group, so you want to make sure that you’re in the right spot So you can see that when I move my cursor, so my cursor is here, and this marks, like the curly brace close here and then the curly brace open there, so they are marked as they belong together So if I go down here, my cursors at this curly brace and then that curly brace is marked right there So see how there is like a link between the two It makes it real easy to see where you are So I want to add another group, and I want to call this details curly brace open, and then I want to add the other three fields So Field, Author, Field, Hardcover, Field Page Count Okay. So now, just like- Remember, in the table, I did multiselect So, I’m going to do the same thing because what we need for every single field that we want to see, is we need to have an ApplicationArea = All

You can select a different ApplicationArea, but using All, will always show it The other part that we need to take care of are captions for the groups Caption equals And so then, that’s the ‘General’, and that’s ‘Details’ So, we save that. That’s it for my layout So, it’s a card, type page My source is the book table At this point, I don’t have any actions or any variables, so I’m just going to delete this and save it And now my book card is done So, I also want to do a list page, BookList.al And then I’m doing a page type of list, 50101, this is book list Table name is Book And so, I’m just going to kind of race through this one, like the source table we have We have a CardPageId = 50101, although, we do BookCard, that’s better CardPageId, Editable = false And then we’re going to go into the repeater, and we are going to create some fields Field Number, Field Title, Field Author And then, we’re going to click, click, click ApplicationArea = All I think this is all we need I’m going to get rid of that factboxes I’m going to get rid of actions So as you can see, as you get a little more familiar with how you do this, you get real fast real quick And so, I’ve done this a few times now, and doing development for a few apps, and I must say that initially, when I first started working with this after having worked with C/SIDE for almost two decades, I am liking the flexibility and the efficiency with which I can program VSCode much better than C/SIDE In addition to which, I know that if I just take the time to really go into my snippets, I could probably make some improvements to the snippets in the system and create my own snippets And what is also really cool is that Microsoft development team is watching this GitHub repository for AL And so, you can actually go in there and ask questions So, when you go to the GitHub Microsoft AL, you can go into the issues area And you can see a bunch of issue from the community where, for instance, let’s just take one that was assigned to Rob Anderson So, missing a matching permission set So, I’m just picking a random issue So, Camille here has a question about a permissions set And Rob Anderson had been assigned by this person to take a look at this And I can guarantee within a day or two there will be an issue or a resolution for it So, you can enter new issues, you can see and search This is all searchable. Actually, looking for open issues only So you take this out, and for instance, you can go to translation, and it will show you all the issues that have the word translation in there This is the actual repository that Microsoft is looking at And so, if you have a suggestion for making,

for instance, the snippets better, you can actually clone this repository, make changes and do a pull request And they will look at the pull request And if you make a really valid contribution to the snippet for instance, then next week it will be part of that project or a part of the product So, you can actually make real contributions to the real product by looking at this, so And if they don’t take it, you can always have a personal snippet in your system So, that’s it for my book card and book list We need to create the customer book card extension Yeah, we need to do a page extension So, let’s create a page extension, and we’ll call it CustomerCardBookExt.al Tpage extension snippet, this is 50101, because it is my first pageextension, we’ll call it CustomerCardBookExtension extends the “Customer Card” And we’re going to go into the layout So, what I want to do, is I want to add the favorite book number to the end of the general tab So, I’m going to add the anchor here So, I can do Control Space, and this gives me all the pieces that I can enter These are all the snippets And these are the adds, right? So I can actually type add Let’s do addlast So, to the end of the anchor So, now it’s saying, okay, you need an anchor Well, what anchors are available? What do you do? Control Space and you pick General So, you can only pick a valid FastTab for this. Isn’t that great? It’s just fantastic that you can only select from the list of things that are actually available So then, we’re going to add the field, and we are going to add Favorite Book No to that field We’re going to add ApplicationArea = All I don’t have any actions or variables, so I can remove this As you can see, I’m still used to it, it is still in my muscle memory I did Control S, and then I hit Enter, from C/SIDE Not necessary, you can just do Control C. So now, that is saved as well So, let’s see, I have the book, I have the book card, the book list, customer book extension and we have the page extension. So, that is all That’s all we needed for this step And so, let’s go back to our presentation The next thing you can do is customizing an existing page And this is the only place where you would have two objects in a single file And the reason is, is because what you need is a page customization object that is always linked to a profile So, you have to define a profile as well as a customization And those always go together And so, that’s one instance in which it’s actually better to have two objects in one file So, the object is the pagecustomization, the snippet is tpagecust It must be published with a profile, and you can do the profile separately But like I said, you just want to put it in there as a customization, including a profile More restrictions than page extensions, so no variables, procedures or triggers And you can add changes to page layout and actions It doesn’t require an object ID So, it knows it doesn’t need an object ID to know what it needs to do So, let’s go and create this So, we need a new file CustomerListCustomization.al So, first, we’re going to create a profile, call it MyProfile. And in MyProfile, I have a description I have a “Role Center” And let’s put this on the “Order Processor Role Center” and “Customizations” equals “My Customization”

Now that doesn’t exist yet I’m just going to create it So “T Page Customization” snippet We’re going to call it “My Customization” And see the squiggly line under “Customizations” here went away as soon as you typed that And so it customizes the “Customer List” There we go. Right. And other than that it works similar to a page extension So let’s say we want to make the “Responsibility Center” invisible So “Modify” “Responsibility Center” and we want to say, “Visibility Equals False” So all that we are doing now is taking the “Responsibility Center” on the “Customer List” and making it invisible for that profile All that’s left is to remove the things that we’re not using So let’s delete this and that’s it for our customization We’re pretty much done with the first version of our app So let’s see if we can make this work So what I want to do is I want to open the book list as the app is starting So let’s go into “launch.json” and paste the ID number of the “Book List” into “launch.json”, save it and then hit “Control F5” which creates the package and it starts Business Central And it should open page 50,100. Yep. And there we go So we see the Book List with the number and the title and the author We just don’t have any data in there So let’s create a couple of books One, my first book “Author”, Daniel Rimmelzwaan It’s a pretty small book, just 100 pages Let’s create another book My second book Well, it’s a little bit bigger Okay. So now let’s go to the home page and go into the “Customer List” And let’s see if we can open the customer card for “Trey Research” And as you can see in the general tab at the end, we have a favorite book number And there is a lookup in there and I can select book number two So secretly, between finishing that application and showing it to you, I’ve added a table relationship because I couldn’t look up the numbers So “My Customer Card”, “My Customer Book Extension”, that’s the table extension, I added a table relationship to the “Book Number” field So it all works So I’m happy to report that So our base bookshelf app has a number of objects that all work as we’ve seen Now let’s talk about extending application logic for a second So what we’ve done so far is create a table extension object to add a field to an existing table and we’ve had a page extension object that shows that field on an existing page So it adds something to an existing object But the primary means of really extending application logic, it happens through code units And so real business logic is contained within code units, not in table or page objects and those methods are then called from the table maybe, but the business logic itself should go into code units Now the matter of what goes into a code unit in what manner is a matter of design principles And if you’re interested in that topic, we also have a video on design patterns for Visual Studio Code in Business Central Let’s talk a little bit about the code unit object The name of the object is “Code Unit” There is a snippet “T Code Unit” that I don’t find particularly useful because it adds an OnRun trigger and a global variable, neither of which I often use So I usually start with just a blank empty “Code Unit”, which is very easy to make because it’s

a very simple type of object, and I’ll show you in a second So just like in C/SIDE you can set properties OnRun trigger is optional and you can create your own procedures The procedure itself has a very useful snippets and I’ll show you in a minute as well And additional to simple types, we can now also return complex types and some of the new complex types like, JSON objects and XML objects and even in DotNet replacement variable types Function types can be set through attributes and that sounds a little bit strange but I will show you in a minute what that means, especially for making a procedure, a publisher or a subscriber is what those attributes are used for Subscribing to an event publisher is done very easy, it’s very easy to do You declare a procedure It’s decorated with an event subscriber attribute and then you use IntelliSense to complete the definition of the attribute and manually define the function parameters So the snippet for these events are actually super useful as you’ll see in just a minute because we’re about to go into the demo So first we’re going to create a new object and it’s going to be called the “CustomerCode.al” and I’ll show you the snippets, so “T Code Unit” when I use this So it creates an OnRun trigger, and it creates global variable, neither of which I’m a fan of So I usually just start by typing, “Code Units”, number, 50,100 “Customer Code”, curly braces done So this is my codeunit Easy enough, right? So what we’re going to do is, we’re going to create a procedure Tprocedure has a snippet which is actually very useful So what I want to do is have the ability to call this procedure from another object So I don’t need this to be local, I’m going to call it, “Celebrate Customer”, and I am going to have a “Customer Record” And I’m going to add another parameter, “Extra Message”, which is text Whereas the next tab stop is the variable, and I’m not using the variables either, so I’m going to get rid of that This procedure just shows a message With a message, “Whoa!! We have a new customer” Two new lines and we are going to “MyCustomer.Number” And we’re going to put the “Extra Message” in there. That’s it So this function displays a message Now I want to do this as a result of when a customer is inserted So I need to have a procedure that subscribes to that event So for that we have a snippet “T Event”, and you’ll see that there are three events snippets One is “Business”, one is “Integration Event” Those are both event publishers and then the “Sub” is the subscriber, so watch what happens First of all, it adds all these parameters, but it also adds a procedure So you don’t have to start with a procedure anymore, you can just use the “Event Subscriber” snippet and that has the procedure that you want to create So what we want to do is subscribe to “On After Insert” of the “Customer Table” So we are going to select “Table” We are going to select “Database” because we are going to the “Customer Table” “On Some Event”, “Control Space” gives you the events that are available We’re going to select “On After Insert” There is no element, so “Control Space” gives you nothing but you can select nothing And then we’re skipping “On Missing License”, we’re skipping “On Missing Permissions”, and then we go into the procedure name So we give it a meaningful name,

“Customer On After Insert” and that has a certain number of parameters One is a variable called, “Rec” and that is a “Record Variable” of “Customer” Tab goes into the code Now what we are going to do is we’re going to call the “Celebrate Customer” and we are going to pass it “Rec”, that’s the customer and we’re going to “Congratulations from the Code Unit” So what we have is a “Subscriber” that subscribes to the customers “On After Insert” and we have a function “Celebrate Customer”, that we call from that subscriber So “Control F5” New, click on “CUSTOMER”, click “OKAY” and now we have the message Woo we have a new customer congratulations from the code unit. Pretty cool So, let’s close this and let’s take a look at the next way to subscribe to a table trigger So, we already have a customer book extension which extends the customer table and inside there, we can actually create a trigger and those triggers actually have predefined options so you can subscribe to on after insert So, remember this is a table extension This extends the customer table so what Microsoft has done is they have given us a way to actually subscribe to the standard table triggers by way of triggers of the table extension So, you don’t have to any longer create a procedure and a code unit in order to subscribe to a table trigger So, on after insert, since we are already in the table extension, we don’t have to give it any parameters Those parameters are already part of the table triggers so, we do have a variable customer code of type codeunit Alright, there it is. Customer code And then, we are going to begin One thing I wanted to show you real quick See, I do begin, watch what happens as I type the end, and that puts the end after they begin immediately And when I hit enter, it indents it properly right away So, customer code.celebrate customer and now I’m going to send it Rec and another message that says, “congratulations from the table extension” Right? Lets see if that works Control F5, then we click on “NEW”, then we click on “CUSTOMER”, and then we click on “OKAY” So first, we get, “WHOA We have new customers Congratulations from the table extension.” So, we now know that the table extension subscriber works and we also have it from the code unit So, those are two different ways to accomplish the same goal which is to subscribe to a table event by way of a code unit and also by way of table extension Next topic is the In-app Visual Designer So what is the In-app Visual Designer? Well, it is a what-you-see-is-what-you-get or wysiwyg editor for pages in Dynamics 365 Business Central It allows creating and exporting and sharing simple changes of the user interface and you can use it to simulate the Web and a tablet and the phone experience, and I’ll show you what that looks like in a minute And it is powered by extensions V2 technology which means that all the changes that you

put in the In-app Visual Designer, are saved as an extension inside of your tenant To access the In-app Designer, it’s available from every page so at the top you hit the “GEAR” button if you have the permissions, you click on “DESIGNER”, and that opens the simple design mode which is the top one where you just see designing the customer lists So for instance, I’m looking at the screenshot of the customer list and I clicked on “DESIGNER” and that opened a simple design mode Then you click on the “MORE” button and that opens the Advanced Design Mode And so as you can see, there’s a plus field that’s highlighted that is bright white and then we have actions and parts and pages that are not so bright white That means that those are not enabled yet So, the current version of the In-app Visual Designer only allows us to manipulate fields And the features of this In-app Designer is it can manage fields, which means you can hide fields, you can add fields from the table, you can rearrange fields on the page also between fast tabs, and it works in repeaters and card type pages et cetera You can manage FastTabs themselves like renaming them So, let’s say you don’t like the name General on the card pages You can go in and change that name to something else And what is really cool is, it simulates different clients So, you can look at it as though you’re in the web client You can also click on the button to emulate the tablet client or the phone client, and the Designer itself works within those experiences And so, I’ll show you when we go take a look at that You can also manage RoleCenters So, you can reposition Cue tiles, you can hide those Cue tiles, you can hide Cue Groups and that’s all you part of the designer So, when you finish it, the customizations can be applied to all users of the current tenant You can export it as a Visual Studio Code package And in Dynamics 365, you can export it as a Dynamics 365 package After the designer work is completed, the tenant will build it as an extension package and it will publish and install the extension package for you And it’s quite tricky how that works because you get a screen that says, “Save” and if you don’t save it it saves it regardless but it gives it a strange name And so, I’ll show you where that all works That’s in the next screenshot, also these customizations can be exported and further edited So, when you click on the “STOP DESIGNING” button, you get this finished up design screen where you can enter a name for the extension and a Publisher and then you can hit the “SAVE” button And I’ll show you how that works I could talk about it right now with the screenshot but it’s probably nicer to just show you Downloading the source code can be done straight when you save it but you can also later on go into extension management and then download the source from the extension management screen itself by clicking on the “ELLIPSIS” and then clicking on “DOWNLOAD SOURCE” So what that does is it generates a zip file and inside the zip file is essentially an AL Workspace with an app.json and a launch.json, and the page extension in a AL file And so, you right click the “EXTRACTED FOLDER”, and then you click “OPEN WITH CODE” or you drag the folder onto the Visual Studio Code editor and then that opens, and then the really cool part is where you can publish and open it in the In-app Designer from Visual Studio Code So from within Visual Studio Code, you can hit “F6” that opens the web client in design mode Then you can do all the changes that you want and then you can go back into Visual Studio Code, you can hit “F7” and that sucks those changes that you’ve just made out of the service tier into the objects that you’ve just modified And so, when you save it from within the web client, that updates your Visual Studio Workspace and everything is synchronized So, let’s go to the workspace and I’ll show you around The first part that I want to show you is the web client itself So, when we go into the web client, I’m going to open the customer list So I’m going to click on “CUSTOMERS”, and then we click the little gear over here and then we click the “DESIGNER” So this is the simple design And when you move over these fields,

you can see this tiny little triangle When you click on that triangle, you can set the freeze pain or you can click “REMOVE” So let’s remove the Territory Code When you click “MORE”, you can click on “PLUS FIELDS”, and that opens the field list And in here, you can then drag fields from in here onto the page If I drag the chain name between the name and the phone number, there it shows up And so now, when I click on “STOP DESIGNING”, it gives me this dialogue that says, “finish up design.” You can click on this little guy, the X and then you would expect it to cancel but it doesn’t cancel It actually installs the extension with the funky name So, let’s give it an extension name Daniel’s Page Changes, Cloud Ready Software Let’s not download code If you do download code now, it’ll ask for a path But when I click on say “RIGHT NOW”, it is publishing the extension behind the scenes And when I go into extension management, it shows Daniel’s page changes right here There it is. So now, I can click this ellipsis and I can say, “download source”, and it says do you want to save Daniel’s page changes? Yes, let’s save it Let’s just save it on the desktop There it is. Let’s extract it. Extract See, there it is That’s your app.json, that’s your VSCode folder So, if I drag this folder onto Visual Studio Code, it opens it as Workspace And so, you’ll get a message pretty soon that says symbols are missing So, you’d have to download the symbols But launch.json is all prepared for connecting to that particular service tier in app.json, and I want to point this out because one thing that makes this kind of dangerous is that these page modifications from the In-App Visual Designer adds all the installed extensions currently in your tenant as dependencies So, as soon as you install one of those, it creates the dependencies on all the other apps as well So, it’s kind of dangerous because this makes it difficult for the other extensions to be updated at the same time because those will then depend on changes in the dependent apps And so, you’re going to get unexpected interactions between those apps So, I’m personally not really a fan of this, although it’s really cool and especially the next demo is really awesome, and I love the way that it works because it gives you a visual way to interact with your page design and that is really very useful, especially for people that don’t have a mind for writing the code without visualizing where that code’s going to end up And so, it helps me to visualize pages because I’m more of visual person than a code person So, you can see here my Awesome Book Shelf is a dependency now So, if I were to make an update to Awesome Book Shelf, we would probably get some sort of conflict message that you can’t update Awesome Book Shelf because there’s dependent app in there So, that’s one of the things that I don’t really like But you need to be aware of that So, really, what you want to do is go the other way and open the In-App Designer from within Visual Studio Code So, what I’m going to do is I am going to “Uninstall” and I’m also going to “Unpublish” So, now that’s all gone And what I’m going to do, oh by the way, one of the things that you could do is take this page extension and just put it in your Workspace And so, this is extending the customer list I have a customer card extension, right? That was 50100 I had a Book list that was 50101 And that’s one of the cool things It does know what object number you’re using and it gets the next number So, really, if I were to use this,

I would want to rename this And so, I would customer list book extension in keeping with the customer card book extension, and we’re going to give it a customer list book extension And we get one issue here that we have a territory code that is not in the target Well, let’s see if we can do location code. There we go Okay. So, essentially, what I’ve done is I’ve taken that page extension and I added it to my Workspace I don’t need this anymore. So, let’s delete that Now, I want to open in the “Book list” So, what I want to do now is open this in the In-App Designer, and the shortcut for that was F6 So, now it’s going to create the package and it’s going to open Business Central in the In-App Designer So, this is in design mode as you can see I want to add some fields So, I only have “Number”, and “Title” and “Author” Let’s do the “Page count” Come on Now, let’s add “Hardcover” to it as well So, now we’re done in here We go back to Visual Studio Code, we hit F7 And now, what it did is sending the request to the server, Ready Software, Cloud Ready software And it says the latest changes from the server have been applied So, if I go to my “Book list”, you can see that my “Number”, “Title” and “Author” are in there and also my “Hardcover” and my “Page count” are in there, and my “Customer list” book extension is still the same So, if I were to go in here and I go to “Customers”, see, I’m still in design mode, I’ll go to customers, right? So, I have “Chain name” Let’s move “Chain name” and let’s add “Territory code” I clicked something twice, I’m not sure what happens here Anyway. So, let’s go in here, hit F7 and see what happens there “Territory code” was added after “Contact” Okay. So, then “Stop designing” It already links to the “Awesome Book Shelf” So it knows the context in which that’s done, you hit “Save” and that should update everything So, now, my Workspace in Visual Studio Code is updated with the changes that I’ve done in the In-App Designer, and that I think, is pretty cool So, I think this is a really nice way of interacting with the system So, the tools are getting more and more useful If you have trouble visualizing what your page extension or your page object will look like, you can actually have Visual Designer where you can look at what it looks like One other thing that I wanted to show you is when you click on More, you have here the “Desktop view” and the “Tablet view” and it switches to what it looks like on a tablet, and the phone view And it switches to what the phone view looks like So, if you click on this, you can also see what that looks like and you can also add fields to it and then, and design it that way So, as you are doing the Visual design, you can look at it from three different experiences And I think that is probably the most useful feature of the In-App Visual Designer So, that’s it. Let’s go back to the presentation With the In-App Visual Designer,

we’ve come to the end of this video In this video, we’ve looked at the overview of the development environment A quick recap of the other video about setting up your Visual Studio Code And the bulk of this video, we’ve talked about developing your first extension Enhancing the Extension and Advanced Topic will be covered in part 2 of this video So, let me just say this is to be continued If you want to learn more about Business Central apps, please follow the link on your screen, and all that’s left for me is to say thank you for watching this Thank you so much for your time, and have a nice day