AL, Array, BC14, BC17, Business Central, Collection, Development Tips, Dictionary, Dynamics 365, How To, Information, List, Modern Development Tool, on-premises, Tip & Tricks, Visual Studio Code, Wave 1, Wave 2, Web Client

Working with Collections

Today we will learn three types of collections supported by AL.

A collection is a complex type that contains multiple values in one variable.

You can’t have values with different types in the same collection. For example, you can’t add date values in a collection that only allows integer values.

The three types of collections that AL supports are:

  • Array
  • List
  • Dictionary

We will discuss about each type of collections in this post with examples.

Let’s start with most familiar collection we have used with old versions of Navision too, yes you are right, I am talking about Arrays.

Arrays

Arrays are complex variables that contain a group of values with the same data type.

An array holds multiple values, and these values are stored in the elements of the array. You can access these values by using the index, which can also be a value that is stored in another variable. With this design, you can create a loop where you increment a certain variable to loop through every element in an array.

By using the Dimension property, you can define how many dimensions that the array will hold.

When creating a variable of an array data type, you first need to define how many elements that you’ll have in the array. The most commonly used array is the one-dimensional array, which is a list of elements with the same data type.

You can represent an array as a row of values.

To create an array, use the following code:

SalesAmount: array[10] of Integer;

To access an element in an array, use the array element syntax:

SalesAmount[5] := 0;

Unlike other programming languages array index don’t starts with 0 rather with 1. In above example first element will be 1 and last 10.

Having only one element between the square brackets indicates that you are using a one-dimensional array. If you want to have a multi-dimensional array, use a comma-separated list between the brackets, as follows:

SalesAmount: array[6,9] of Integer;

To access an element in an array, use the array element syntax:

SalesAmount[5,3] := 0;

Lists

The List data type can be compared with an array. The List type can only be used with fundamental types and represents a strongly typed list of values that can be accessed by index.

Therefore, you can have a List type of [Integer], but you cannot have a List type of [Blob].

List data type doesn’t require you to define how many elements you want to store up front (while an Array data type does).

The List data type has some methods that are used frequently. The methods that are available for a List data type will discuss in a later post.

To create a list, use the following code:

CustomerNames: List of [Text];

To access an element in a list, use the following methods:

To store/add values to list

CustomerNames.Add(‘KSD Consultancy’);

CustomerNames.Add(‘Microsoft India’);

CustomerNames.Add(‘Ashwini Tripathi’);

To retrive values from list

CustomerNames.Get(1);

Dictionary

The Dictionary data type represents a collection of keys and values.

Every key that you create in this dictionary must be unique. The main benefit is that you can immediately get the value for a specific key.

The value can be a type, but it can also be a List or another Dictionary data type.

Blow code sequence will give you idea how to use dictionary data type:

//Declaring List

CustomerNamesIN: List of [Text];

CustomerNamesUS: List of [Text];

CustomerNamesCA: List of [Text];

//Declaring Dictionary

CountryWiseCustomer: Dictionary of [Code[20], List of [Text]];

//Assigning values to List

CustomerNamesIN.Add(‘KSD Consultancy’);

CustomerNamesIN.Add(‘Microsoft India’);

CustomerNamesIn.Add(‘Ashwini Tripathi’);

CustomerNamesUS.Add(‘Paul’);

CustomerNamesUS.Add(‘Linda’);

CustomerNamesCA.Add(‘Eddy’);

CustomerNamesCA.Add(‘Mark’);

//Assigning values to Dictionary

CountryWiseCustomer.Add(‘IN’,CustomerNamesIN);

CountryWiseCustomer.Add(‘US’,CustomerNamesUS);

CountryWiseCustomer.Add(‘CA’,CustomerNamesCA);

//Retrieving value from Dictionary

CountryWiseCustomer.Get(‘IN’).Get(1);

Here is the complete code:

Created new codeunit and declared variables & procedures to manipulate values in Collections.

Added Code to call procedures defined in codeunit, to assign and retrieve values from collections.

Now its time to check output of above code.

Hope you get idea how to work with Collections, you may find more posts in coming days where we may discuss about methods available for collection.

AL, BC14, BC17, Business Central, Development Tips, Dynamics 365, Enum, Extension Package, How To, Modern Development Tool, Option, Visual Studio Code, Wave 2, Web Client

Options VS Enums

To define a variable of type Option, you can’t use the OptionMembers property that’s used on a field of data type Option. You need to list the available options as a comma-separated list after your variable definition.

For example:- Color: Option Red,Green,Yellow;

If you want to reuse the same Option type in other objects (like other codeunits, pages, or tables), you have to redefine all available values. Later, if you decide to add an extra value, you need to modify all objects with this extra value. Options in a table are not extendable with a table extension.

Solution to this is now available as enum.

An enum is a separate object with its own number and name. You can use an Enum object in other object without the need to redefine it at each object level. The Enum object can also be extended with enum extensions.

Lets see example defining and using enum.

I have created a EnumDefinition.al to define my custom enum Color.

I have defined one Function SelectColor to access values.

To call the Function and test result created extension of Customer List page and added code to access the value.

Now we can use this Enum throughout the extension in any objects without redefining it as in case of Option.

Let’s Publish the extension and see the result.

As you can remember from above code, I have selected color Green and have put the code to call of function on trigger of Customer List page, OnOpenPage.

The Enum object can also be extended with enum extensions.

Extending the Enum

Lets create new Extension, app.json file set dependencies to earlier/above Extension.

Next let’s extend our enum Color.

Next let’s create codeunit for function to access value of enum.

To call the Function and test result created extension of Customer List page and added code to access the value.

Let’s Publish the extension and see the result.

As you can remember from above code, I have selected color Red & Brown and have put the code to call of function on trigger of Customer List page, OnOpenPage.

Red is from earlier defined Color enum (Red, Green, Yellow), & Brown from extended enum (Blue, Black, Brown).

AtomPub, Business Central, EDMX, How To, Information, JSON, OData, REST, RPC, Smtp, SOAP, Tip & Tricks, Web Client, Web Services, WSDL, XML

Web Services – Business Central Part- 2

Today in this post we will continue from where we left our previous post, if you missed or wish to have a look you can find her in this link.

Web Services – Business Central Part- 1

We saw in our previous post, you expose an OData service that can be accessed from a URL by using a web browser or any other HTTP client.

You need the URL of the OData page or query web service

https://server:webserviceport/serverinstance/oData/web service”

If you use the attribute ?$format=atom you will get an AtomPub document

https://KSD-DESKTOP:7748/BC130/OData/Customers?$format=atom

If you use the attribute ?$format=json you will get an JSON document

https://KSD-DESKTOP:7748/BC130/OData/Customers?$format=json

You can obtain service metadata documents for either page or query web services.

https://ksd-desktop:7748/BC130/OData/$metadata

SOAP Web Services

If your client requests another transport protocol than HTTP or HTTPS, then you can use SOAP as it also supports, for example, SMTP.

Microsoft is heavily investing in REST and OData, and certainly with the online apps like Power BI, PowerApps, and others.  So at this point SOAP isn’t the primary choice for web services anymore.

We can find the available SOAP web services at the same page where we define the OData web services.

If we go to the search box and then search for web services, This page is used to enable access to OData and SOAP web services.

ws-001

We could enable OData web services only with the object types of query and pages, and for SOAP web services, we can only enable it for pages and codeunits and not for queries.

For example soap url for my Customers Service will be as below:

https://KSD-DESKTOP:7747/BC130/WS/CRONUS%20International%20Ltd./Page/Customers

You can find some post related to consuming web service and working with web service for older versions but it can be used with business central too.

Exposing & Consuming the Web service from & inside Navision – Part-1

Exposing & Consuming the Web service from & inside Navision – Part-2

Exposing & Consuming the Web service from & inside Navision – Part-3

Exposing & Consuming the Web service from & inside Navision – Part-4

When you are exposing your object for web service, ensure that you use GUIAllowed function to supress the UI. Encapsulate the code that could cause in error, not your entire code.

Also the exceptions must be handled in order to facilitate that your web service don’t end the execution unexpectedly.

You must check with the GuiAllowed function when you are using one of the following dialog functions:

Close, Confirm, Error, Open, StrMenu, Update

The Message function is the only dialog function that doesn’t cause an exception.

Other keywords that you shouldn’t use are:

Page.Run, Page.RunModal, Activate, Report.Run, Report.RunModal, Hyperlink, File.Upload, File.Download

Hope you got some insight on Web Services.

I will come up with more features in other posts, till then keep exploring and learning, and take care of yourself.

AL, API, Business Central, Control Add-In, Development Tips, Extension Package, How To, Information, Java Script, jQuery, JSON, Modern Development Tool, Style Sheet, Tip & Tricks, V2, Visual Studio Code, Web Client

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.

AL, Brick, Business Central, Development Tips, Extension Package, Fieldgroup, How To, Information, Modern Development Tool, Phone Client, Tablet Client, Tip & Tricks, V2, Visual Studio Code, Web Client

Fieldgroup in Business Central

In today’s post we will see the usage of Fieldgroup and available options.

Today’s topic is very simple and straight forward.

Field groups are used to determine which columns you have available when you have a table relation to a field.

fg-1

Another usage of field groups is when we go to a list page in Web Client like the customer list, we have a number of views of the customer list.

fg-2

We have the normal list view, but there’s also two tiles layouts, the tall tiles and the regular tiles.  When I select one of those layouts, I can see the number of the customer, the name, the contact and two decimal values, which are the balance and the balance due.

fg-3

To have a tiles layout like this, you have to create a field group with the name brick, and then you have to specify all the fields you want to display. You can only have six fields in a tile and an image.

If the last field in your brick layout is media or media set field, in this case a picture for the customer table, then that will be the media set field which is used in the application.  So the positions of your fields are very important.

fg-4

It’s very important that your tables which are used in lists in the phone client and the tablet client, that you define a brick layout, because it’s a way that you can manage how, where and what information needs to be displayed.

Hope you find the information useful, and practice accordingly.

See you again in next post with some new topic, tips & tricks.

Till then keep exploring and learning, take good care of yourself.