Documentation

Support

Dynamics 365 for Finance and Operations Extensible Controls: Server Side to Client Side and Back.

Date

Wednesday, September 27, 2017

Posted by

Julio Luzardo

In this article we're going to show you how a simple extensible control that's controlled by a data source and a grid control on a form works. The user will select a record on the form and the associated picture will be displayed in the extensible control.

If you do not have any previous experience with Dynamics 365 for Finance and Operations Extensible Controls it is highly recommended that you go through this tutorial:

When you're switching records in the grid the "active" method for the "DBImageXCtrlTable" data source is being called. The "active" method is calling a property getter/setter called Key in the X++ runtime class.

Every time the Key property value changes the code above gets triggered in JavaScript (the $dyn.observe)
. This code that is getting triggered is calling a method that is in the X++ runtime class called GetImage and receiving the results from GetImage in a function called DBIC.ChangeImage. But it is not calling the method directly, it is calling the method asynchronously by using window.setTimeout in a process known as code yielding. If it were to call the method directly the first image would be loaded but in subsequent "activate" calls you would get this error in the console of your browser:

And the image would not change. You can try uncommenting the commented lines and removing the first line in the method and you'll notice the effect.

The get image method reads the URL of the image from the database and serializes it JSON and returns it to this JavaScript function (which was specified as the call back function in the $dyn.callFunction's last parameter):

This JavaScript empties the main div for the control and creates a new image object with the new URL.

Instead of all this back and forth between X++ (server-side)/Javascript (client-side), why not just simply have a string URL property in the X++ runtime class? You can do it too, but because there is a limit on the size of observable properties URLs might get truncated. There's also a limit on the size of the return of a method but it's much higher.

Apendix A – Creating the demo files manually

Create a new model with the following specifications:

Name:

DBImageXControl

Layer:

ISV

Package:

Create in New Package

References:

ApplicationPlatform, ApplicationFoundation

Create a new Dynamics 365 Unified Operations project called DBImageXControl inside the model you've created previously.

1. Create an X++ runtime class called "DBImageXCtrl" with the following code:

To populate the grid, create a table called "DBImageXCtrlTable". This table will have three fields: iKey an Integer field, sDescription a String field (size 100) and cImage a container field. The Key will be the iKey field. The table will have this structure:

Create the Form with the Grid and the Control

Create a form called "DBImageXForm" with the following structure:

The form will have:

A data source called "DBImageXCtrlTable" for the "DBImageXCtrlTable" table. This data source will have this code in the overridden "Active" method: