Adding new field to page (without adding to table) using new Visual Code

We will learn how to add new field to page which is not available in table using new visual studio code.

Sample requirement is to add a Boolean field in Job Card page to check whether there are any comments available without adding field to table.

1.     Open Visual Studio Code

2.     Create new project/folder if you want to develop as a new extension or open folder in which you want to add this feature. I am using same previous folder “ReasonCodeforLostJobQuote”.

3.     Create new file

4.     Enter Name “PagJobCardExtCheckComments.al”

5.     Enter “tpageExt” which adds sample page extension snippet.

6.     Change ID, Name and Extends as below

7.     Enter “tfieldpage” which adds sample Page field snippet under Layout section.

8.     Replace “Myfield” with “Comments”

9.     We need to add “SourceExpr” in place of “Source”

10.                        Save the file and create a Codeunit which checks whether Comments available or not.

11.                        Create New file

12.                        Enter “CodCheckComments.al” in file name

13.                        Enter “tcodeunit” which adds sample Codeunit snippet

14.                        Change ID, Name

15.                        Enter “tprocedure” which adds sample Procedure/Function Snippet.

16.                        Modify the function/Procedure as shown

17.                        Go back to above page PagJobCardExtCheckComments.al and Modify as below

18.                        Build the Package (Ctrl+Shift+B) and Publish (F5)

19.                        Open Job Card.

20.                        We can notice new field Comments in General tab But Check mark for Field is missing. Reported hear. UPDATE: Issue is fixed now
https://github.com/Microsoft/AL/issues/46

21.                        Open Comments action from Navigate and enter some text

22.                        Click OK in Comments Sheet.

23.                        Comments field is True which indicates some comments exist for this job.

This is how to add field to page without adding to table.

Stay tuned.

Developing Extensions Using the New Visual Studio Code – Part 6

After finishing step5, today I would like to create an action in Job card page using visual studio code.

Requirement is to:

1. Create a “Default Reason Code for Lost Quote” in Jobs Setup table/page

2. When we click Action “Lost Quote” in Job Card, the “Default Reason Code for Lost Quote” from Jobs Setup should be added to “Reason Code for Lost Quote” in Job card.

Let’s first add field in Jobs Setup table and page as we did in previous step2 and step4.

Final Table extension for Jobs Setup table looks like below

Final Page extension for Jobs setup page looks like below

Build the package (Ctrl+Shift+B) and Publish (F5).

Now we can go to Jobs Setup page and notice the “Default Reason Code for Lost Quote” field at the end of General Tab.

As TableRelations are not yet supported, enter any value in field “Default Reason Code for Lost Quote”

Ex: “Budget Issue”

Now create an action in Job Card which should add same value from Jobs Setup to Job card field “Reason Code for Lost Quote” when action is executed.

Let’s modify object 70000001 which is created in step4.

Final page extension looks like this

Build the package (Ctrl+Shift+B) and Publish (F5).

Go to Job Card. We can notice new Action “Job Lost Reason Code”.

Clicking on Action will add Default Reason Code from Jobs Setup to Job Card.

This is how to add an action to page using page extension in visual studio code.

Stay tunes.

UPDATE: Above mentioned bug is fixed. Table Relation and lookup's are working fine now.

Developing Extensions Using the New Visual Studio Code – Part 5

We finished step 1, step2, step3 and step4 of creating a sample extension using new visual studio code.

Let’s start with step 5 – Building the package and Publishing the extension.

To Recap:

When we want to start creating our own project, we need to create a new project to contain it. Visual Studio Code manages projects by including all files from a directory. Whatever files exist in that directory are then part of our project. In addition there are two other configuration files; app.json and launch.json. We can define these ourselves, possibly by copying the files from sample code or we can have the system autogenerate them for us. Building the solution (Ctrl+Shift+B) will create the app.json file and publishing (F5) will generate the launch.json file.

Open the Visual studio code and Folder ReasonCodeforLostJobQuote which we created before if it is not open.

Building the solution (Ctrl+Shift+B)

Package is created (navx file)

We can create launch.json file manually or Publishing (F5) will also generate file automatically.

Let’s create manually which should be under vscode folder.

Click on New Folder

Name it as .vscode

Click on New file selecting .vscode folder.

Name it as launch.json

Create file which looks like below

Settings in the launch.json file:

Setting	Mandatory	Value
server	Yes, if connecting to an on-premises server	The HTTP URL of your server, for example: http://localhost
serverInstance	Yes, if connecting to an on-premises server	The instance name of your server, for example: NAV
port	No	The port on which the development endpoint is running on the server, default value: 7049
tenant	No	The tenant ID in case the server is configured for multitenancy.
windowsAuthentication	No	Specifies whether Windows or Azure authentication should be used for publishing the extension. Currently only Windows authentication is supported.
startupObjectId	No	The ID of the startup object to launch when you press F5. Currently only objects of type Page are supported.

Now Press F5 to publish the extension to servicetier “Navision_main”

It publishes and Install extension.

Go to RTC/Web Client.

Check extension management page.

Reason Code for Lost Job Quote extension is installed.

Go to Job Card to check the functionality.

Reason Code for Lost Quote field is added (I couldn’t see dropdown option. Need to investigate. UPDATE: MS has confirmed it is a limitation for now
https://github.com/Microsoft/AL/issues/39)

Stay tuned.

Developing Extensions Using the New Visual Studio Code – Part 4

We finished step 1, step2 and step3 of creating a sample extension using new visual studio code.

Let’s start with step 4 – adding a field to existing page like "Reason Code for Lost Quote" to Job Card page.

We need to create new page extension object using visual studio code.

The page extension object extends a Dynamics NAV page object and adds or overrides the functionality.

The structure of a page is hierarchical and breaks down in to three sections. The first block contains metadata for the overall page; the type of the page and the source table it is showing data from. The next section; the layout, describes the visual parts on the page. The final section details the actions that are published on the page.

In the layout section, you can use the following functions to place page fields and groups on the page. Similarly, in the actions section, you use these functions to place actions in the ribbon.

Function example	Applies to...
addfirst(General)	Groups only
addlast(General)	Groups only
addafter(AddressDetails; "Post Code")	Fields and groups
addbefore(AddressDetails; "Post Code")	Fields and groups
movefirst(General)	Groups only
movelast(General)	Groups only
moveafter(AddressDetails; "Post Code")	Fields and groups
movebefore(AddressDetails; "Post Code")	Fields and groups

If you want to modify existing fields and groups on a page, you use the modify() function.

Open the Visual studio code and Folder ReasonCodeforLostJobQuote which we created before if it is not open.

Click on New File

Add name “JobcardpageExtReasonCodeforLostQuote.al”

Typing the shortcut tpageext will create the basic layout for a table object when using the AL Extension in Visual Studio Code.

Like

Edit ID to 70000001 and Name as “Reason Code for Lost Quote” and extends “Job Card”.

Add field "Reason Code for Lost Quote" to General tab as shown below

This is how field is added to existing page using page extension in Visual studio code.

We will see how to Build final package and install extension in next blog.

Stay tuned.

Developing Extensions Using the New Visual Studio Code – Part 3

We finished step 1 and step2 of creating a sample extension using new visual studio code.

Let’s start with step 3 – adding a List type page for table 70000000 – “Reason Code for Lost Quote”.

We need to create new page using visual studio code.

Pages are the main way to display and organize visual data in Dynamics NAV. They are the primary object that a user will interact with and have a different behavior based on the type that you choose. Pages are designed independently of the device they are to be rendered on, and in this way the same page can be reused across phone, tablet, and web clients.

The structure of a page is hierarchical and breaks down in to three sections. The first block contains metadata for the overall page; the type of the page and the source table it is showing data from. The next section; the layout, describes the visual parts on the page. The final section details the actions that are published on the page.

Open the Visual studio code and Folder ReasonCodeforLostJobQuote which we created before if it is not open.

Click on New File

Add name ReasonCodesforLostJobQuoteList.al

Typing the shortcut tpage will create the basic layout for a page object when using the AL Extension in Visual Studio Code.

Like

Edit Id to 70000000 and name as Reason Codes for Lost Quote

Change pagetype to List

SourceTable to "Reason Code for Lost Quote"

group(Groupname) to group("Reason Codes")

Add the fields Code and Description.

Which looks now as

Make sure to have repeater in List type pages.

We should add this list page to DrillDownPageID, LookupPageID properties of table 70000000 - “Reason Code for Lost Quote”.

Go back to ReasonCodeforLostQuoteTable.al

And add properties DrillDownPageID, LookupPageID like below

This is how to create new page using new Visual Studio Code.

We will see how to add new field in existing page in next blog.

Stay tuned.

Developing Extensions Using the New Visual Studio Code – Part 2

We finished step 1 of creating a sample extension using new visual studio code.

Let’s start with step 2 – adding “Reason Code for Lost Quote” in Standard Job table.

We need to extend the standard Job table here.

To recap again.

·        The table extension object allows us to add additional fields or to change some properties on a table provided by the Dynamics NAV service. In this way, we can add data to the same table and treat it as a single table.

Along with defining other fields, the table extension is where we write trigger code for our additional fields.

We need to create a table extension which is different from table which we have created yesterday.

That’s a new table and today we are extending the existing table.

Open the Visual studio code and Folder ReasonCodeforLostJobQuote which we created yesterday if it is not open.

Click on New File

Add name “JobTabExtReasonCodeforLostQuote.al”

Typing the shortcut ttableext will create the basic layout for a table extension object when using the AL Extension in Visual Studio Code.

Like

Edit ID to 70000001 and Name as “Job Reason Code for Lost Quote” and extends Job.

Now it is showing error like The Target Page Job for the extension object is not found.

I guess it is because of missing app.json file so let’s create app.json file first.
We can create it manually or it will be created by building the solution (Ctrl+Shift+B).
Let me create it manually for now.

Create new file with name app.json and with parameters in below screenshot.

Setting	Mandatory	Value
id	Yes	The unique ID of the extension. When app.json file is automatically created, the ID is set to a new GUID value.
name	Yes	The unique extension name.
publisher	Yes	The name of your publisher, for example: NAV Partner, LLC
application	Yes, if base application objects are extended or referenced	The minimal supported version and locale of the base application to extend, for example: { "version": "10.0.0.0", "locale": "W1" }
platform	Yes, if system tables are referenced in the extension	The minimal supported version of the platform symbol package file, for example: "10.0.0.0". See the List of objects in the platform symbol file section below for the list of object symbols contained in the platform symbol package file.
packageCachePath	Yes, if base application is extended or system tables are referenced	The path to the folder where referenced symbol package files are located. The path could either be absolute or relative to the current extension working directory, for example: "../../resources"

Now build the solution by pressing Ctrl+Shift+B.

Now the package is created (Mohana_Reason Code for Lost Job Quote_1.0.0.0.navx)

Close the visual studio code and reopen again
Now the error is gone.

Add the field in al object with table relation to table 70000000 which we created yesterday.

This is how to create new field in existing table using new Visual Studio Code.

We will see how to add new page for created table 7000000 in in next blog.

Stay tuned.