Advertisements

Control Add-In in Business Central

Today I will discuss about how we can create control add-in using VS Code & Extensions in Business Central.

We can create a control add-in the same way we created pages or code units.  In Visual Studio we can use the code snippet T control add-in to generate a new control add-in.

It will better to create a fresh Extension Project in VS Code for control add in.

Step – 1 : Preparation

Create a New project, and add Folder Structure to arrange your files.

You can find steps in this post : Bare Minimum Steps to Start with fresh Extension Project for Business Central

I will create below Folder:

  1. ControlAddIn
  2. Images
  3. JsScript
  4. Page
  5. StyleSheet

Step – 2 : Create Control Add-In

In control add-in folder I’m going to create a new control add-in.  So new file.

addin-1

Use the snippet, T control add-in, to create a control add-in.

addin-2

Give the name to your control add-in in my example I have used “WeatherControlAddIn

A control add-in works with JavaScript files that can execute some code.  The scripts property is used to reference these JavaScript files.  They can be local files or references to external files over http or HTTPS.  A very commonly used JavaScript library is jQuery.  JQuery makes it a lot easier to write JavaScript code and it reduces the lines of code significantly. In our case any such files will be saved in JsScripts folder under Extension-> Objects Folder as setup above. One file we will create for StartupScript as Start.js.

Now let’s include jQuery.  We have to download jQuery from the Internet.  So if we open our Web browser and we go to the jQuery website, we can click the download jQuery button over here.  But instead of really downloading the jQuery files, we are going to reference them online.

Open the site: https://jquery.com/

addin-3

Click on Download jQuery v3.3.1 large button as shown above.
Scroll down to find: – Microsoft CDN (Content Delivery Network)
Microsoft also has a CDN for jQuery. We take that one.
Copy the link to the latest one. Add this to our Scripts property in our control add-in.

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js”

Use the URL of jQuery file. There’s also a property start-up script which you can use to call a special script that runs when the page where you have implemented your control add-in is loaded.  Now let’s add our start.js script over here.  So because it’s in the folder script, we have to “Objects/JsScripts/Start.js”.  Now, there’s also a recreate and a refresh script.  We are not going to use them in this demo project, so remove them. And with the images and the style sheets properties you can specify additional style to the control add-in.

Scripts = ‘https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js’;

StyleSheets = ‘Objects/StyleSheet/StyleSheet.css’;
StartupScript = ‘Objects/JsScripts/Start.js’;
Images = ‘Objects/Images/Weather.jpg” />

I am using dummy image to display on my control add-in, select your image accordingly and place it in Images folder.
We will look into StyleSheet.css and Start.js later in below post.

addin-4

This is how your WeatherControlAddIn.al should look like.

Step – 3 : Create Style Sheet

I will be adding a CSS file to this with the name StyleSheet.css.  In this CSS file I can apply some layout styles to give my control add-in a color or let it choose a certain font and so on and so on.  But remember there are some guidelines on which styles to apply.  I’m going to set my image to a width 200 pixels.  So in CSS, this is image.  Width, 200 pixels, and a margin top of 25 pixels.  And then I need to reference it in my style sheet properties.  This is ‘Objects/StyleSheet/StyleSheet.css’ and of course in the folder StyleSheet.

addin-5

You can apply your knowledge about stylesheets to decorate your add-in accordingly, for demo purpose I have just set the width and top margin of the image.

Similarly I have downloaded an image from internet related to weather and copied to Images Folder.

Now set the path of both the files in your control add-in as shown above.

Step – 4 : Create CardPart Page

Now, our control add-in will run in a CardPart.  So we have to create a page.  Let’s create a new file and call this WeatherCardPart.al.  This is a page.  So T page.  Let’s give it an ID and a name.  WeatherCardPart.  Now the source table will be customer.  And the page type is CardPart.

Your Page should look similar to below:

addin-6

We have added our ControlAddIn on the CardPart.

Next we will pass data from our Navision to the JQuery Script to process, to do so we have added a local procedure GetCustomer, remember above in control add-in we added signature of this procedure. Now it’s time to implement that function.

We have created a JsonObject to store our data and pass to Control Add-In.

This function gets called from OnAfterGetRecord trigger of the Page.

You may be wondering about function call QueryTempOfCity, this is the same function which we used in our earlier post to call API and get temperature of specified city then updated the Headline of the RC Page.

If you missed you can find that post here: Working with Headline Role Center Page and HTTP Call – Business Central

I have copied some functions from that post and changed a little bit and added to this page, it should be like below:

addin-7

This function will take City as parameter and query from API and return the current temperature of that city. This function is explained in referenced post above.

Step – 5 : Create Page Extension

CardPart runs in a factbox on a page.  So let’s create a page extension on the customer card.  So new page.  Let’s call this customercardextension.al. which extends the customer card.  Add a factbox in the factboxes, and this is a part — let’s give it a name.  WeatherCardPart.  And this is of type WeatherCardPart.  When adding a part or a factbox, then need to set the sub page link.  So don’t forget to set the sub page link and this is equal to the number equals field number.

addin-8

It should be similar to above.

Step – 6 : Create jQuery Script

Here comes the most interesting and difficult part as we are not regular Java Script programmer, but thanks to google, who is always there to help.

We will create our Start.js

You can apply your Java Scripts skill to enhance this, let us keep it simple for learning purpose.

We will extract the information send via GetCustomer function in JsonObject and display in our Control Add-In.

addin-9

You can say controlAddIn here as main outer container.

We have defined 4 sub containers and with unique id to reference further.

Now we add all this 4 sub-containers to the main container controlAddIn.

Get the values from the Navision CardPard GetCustomer function and decode the JsonObject Customer and extract value from it and assign to these 3 containers.

For 4th we have assigned the image path from Extension using special function Microsoft.Dynamics.NAV.GetImageResource

Step – 7 : Deploy and Test the Control Add-In

So now we are done with Creating of Control Add-In, deploy your extension by using command pallet, Publish you Extension.

Open the Customer Card and you should see your Control Add-In in action.

addin-10

addin-11

Tested successful. Here we come to the end of our today’s post.

Hope you liked and enjoyed learning the concept in this post.

Will come up with more such interesting concepts in my future posts.

Till then keep exploring and learning. Take Care of yourself.

Advertisements

Working with Headline Role Center Page and HTTP Call – Business Central

I am again back with my First post of 2019. Hope you all enjoyed New Year Parties.

Wishing you all readers again Happy New Year.

Today we will play around Role Center Headline Page and add our Message to it.

You have below 9 Headline RC Pages.

1440 Headline RC Business Manager
1441 Headline RC Order Processor
1442 Headline RC Accountant
1443 Headline RC Project Manager
1444 Headline RC Relationship Mgt.
1445 Headline RC Administrator
1446 Headline RC Team Member
1447 Headline RC Prod. Planner
1448 Headline RC Serv. Dispatcher

HLRC-1

So let’s start with our task.

Step: 1 –

To be able to complete today’s customization you will require an account to any API weather forecast provider. Here I provide you with the free service, not all features are free, but sufficient to complete our task.

Open https://openweathermap.org/ page and register to the service. You will receive an API key upon sign up. This is required when you make an API Web Service call.

Step: 2 –

Open your Extension Project and create one New AL file for Page Extension

HLRC-2

We will simply add one field to the Page.

Step: 3 –

This is the main part of this functionality:

We will write a procedure for Querying the current temperature of the city using API call and extract information from the response and add to the Headline.

Response are available in other formats too, but I am using JSON in my example. You can select your format you are comfortable with. You will find all details on the website API section.

Below will be our API call syntax:

http://api.openweathermap.org/data/2.5/weather?q=’ + City +                            ‘&units=metric&APPID=16ea4cf53127aa3baa74d4072381ba62’

To get data in API for current weather in Kelvins do not indicate units parameter into your API call.

To get in Fahrenheit add units=imperial parameter.

To get in Celsius add units=metric parameter.

API Key :- &APPID=16ea4cf53127aa3baa74d4072381ba62 – Compulsory

You will receive JSon response as below:

JSONText Value will be similar to below:

{“coord”:{“lon”:77.41,”lat”:28.67},

“weather”:[{“id”:711,”main”:”Smoke”,”description”:”smoke”,”icon”:”50n”}],

“base”:”stations”,

main“:{“temp“:292.15,”pressure”:1019,”humidity”:48,”temp_min”:292.15,

“temp_max”:292.15},

“visibility”:1800,

“wind”:{“speed”:1,”deg”:210},

“clouds”:{“all”:0},

“dt”:1546432200,

sys“:{“type”:1,”id”:9165,”message”:0.004,”country“:”IN”,”sunrise”:1546393411,

“sunset”:1546430725},

“id”:1271308,

name“:”Ghaziabad”,

“cod”:200}

HLRC-3

Below is the 2 functions used to extract the Information from JSon Response:

HLRC-4

Step: 4 –

Save and Publish your Extension.

Open Web Client, make sure RC Business Manager profile is selected for your account or whichever Headline RC you have extended for above step.

You will see the Temperature of your selected city, as shown in the beginning of the post.

You can use similar concept to add your customized Headline to your Role Center Page.

See you again in my next post with some other concept, tips & tricks. Till then keep exploring and learning. Take care.

AL Basics – Part 2 [Table]

Today we will discuss about tables.

To Create a Table Create filename.al file, as one shown in example. Folder is not compulsory, I am using to just keep my files in arranged way.

TAB-1

You can choose File -> New File or press 【ctrl】+ N or using tool button on Project folder as shown above. Give meaningful name and .al extension is a must.

Once you get your file in editor, you can start coding from scratch or can take the help of Snippet ttable and continue their after.

Let see what happens if I type ttable in the editor window.

TAB-2

As you start typing the assist window will guide you with available options.

You can press anywhere you will get the list of options available for that section.

We will see this in a while.

First let understand different sections in table object where you will write your codes, or set properties etc.

You can remove your Global Variable and Trigger section if you have nothing to define or not required in your case.

TAB-3

Suppose you are in Table property section and want to know what all properties are available in AL you can place your cursor at desired place and press 【ctrl】+ < Space Bar>. A list of options available will be shown to you, you can select required property and complete your syntax.

TAB-4

Similarly you can do in other sections of table structure also, you will always get the list of things you can do in that section.

Let’s complete our one sample table, with few Table Property, Fields and Fields Property, Keys.

TAB-5

This is a sample Table.

I have commented DrillDownPageID & LookupPageID Table Properties as this page are not available at this stage will add later.

I have defined Caption & TableRelation for my field Depot.

Caption for Field “Slot Duration” also Option String and caption for same.

I have defined Primary Key for the table.

I have defined the fieldgroup for Dropdown.

At this moment I don’t want to define Global Variables and Triggers for this table so removed.

We will get into more details in our next post.

Bare Minimum Steps to Start with fresh Extension Project for Business Central

Step-1 Create Project Folder

To create a Project Folder press <Ctrl> + <Shift> + <P> to open command Palette or alternatively you can choose from Menu View -> Command Palette.

Now Select Al: Go!

BMS-1

Enter your Forder & Project Folder Name and press <Enter>

BMS-2

Wait for few seconds and choose “Your Own Server” option.

BMS-3

Step -2 Complete your Extension settings & Cleanup

You will land to your project Folder, where few files are created for you by default.

BMS-4

Now we will set our Server connection related changes and remove HelloWorld.al File.

BMS-5

Next we will check our Extension related settings.

BMS-6

Next our Task is to Download Symbols. If Symbol files are missing you will not be able to compile your project. Also any objects referenced for extension will say invalid object.

To Download Symbols again Go to you command pallet out of any 2 methods explained above you are comfortable with.

Step – 3 Download Symbols

BMS-7

Wait for few seconds, if settings of server in launch.json file is correct it should download your symbols.

BMS-8

You will see notification in right bottom corner, else can check the errors in Output Tab of Debugger Window.

You will notice new folder [.alpackages] with 2 files are created. These file contains the definition of your Navision objects.

Next I will prepare my Project Folder for getting started for my Extension development.

Step -4 Prepare your Project Folders to arrange you’re working Files.

BMS-9

Now my Project Folder is ready to start working with Extensions.

We will start creating Files/Objects in our next post.

 

 

AL Basics – Part-1

Programming in AL is very easy, just we need to make up our mind to accept the changes. Till we resist to changes it seems to be hard once we accept it, that becomes easy.

In VS Code, for AL it provides Snippets which help you with creating your base structure following which you can easy build up your complex coding structures.

Few Snippets ready to use are as below:

To Create Structure of Snippet to use
Table ttable
Page tpage
Codeunit tcodeunit
Page Extension tpageext
Table Extension ttableext
Table Field tfield
Page Field tfieldpage
Trigger ttriger
Functions/Procedure tprocedure
Assert error tassert
With Do twithdo
If tif
If Else tifelse
Case of tcaseof
Case else tcaseelse
For tfor
While twhile
Repeat Until trepeat

Today I will explain on conditional and loop statements for others I will do in next post.

These statements are similar as we are familiar with using in our C/AL.

Below are few examples to explain them, since no changes so need not commentary for same.

conditional StatementsLoop Statements

For other Snippets will come in next post.

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

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.

I hope this may have clarified your doubt on how VS Code and the NAV server work together!

I will come with more details as I proceed.

Important

Most of the contents you find in this blog will be either inherited from MSDN or Navision Developer IT Pro Help. Some places images are also directly taken from these sites. Purpose is simple to try those stuffs and re-produce adding few things as per my understanding to make easy understanding for others and quick reference.

Here nothing under my own brand or authorship of the content. At any point of time we are just promoting Microsoft stuffs nothing personnel with same.

Hope stuffs used here will not violate any copyright agreement with them. In case by mistake or in-intestinally it happens and the Microsoft feels these should not be used Microsoft have full right to inform me about same and will be glad to take down any such content which may be violating the norms.

Purpose is to promote Navision and share with community.

FB Profile

Like FB Page

%d bloggers like this: