gideonvos: IoT Dashboard in AX using Control Extensibility

[Blog bot]

Источник: https://gideonvos.wordpress.com/2016...extensibility/
==============

I’ve been looking into new the control extensibility API of the latest version of Dynamics AX and it has a lot of potential. Unfortunately, my first thought when reading about it was that it could lead to a way to develop “Custom Controls” pluggable from the ToolBox, similar to other popular commercial toolsets like grids. Sadly, that is not the case (it seems) which is unfortunate. It can potentially create a substantial commercial marketplace for extensions, if possible. Perhaps I missed the point, or maybe Microsoft has plans for it in the future. I sincerely hope so.

Until then, we can still use the control extensibility API to develop small HTML based elements with custom properties, and the first stop to make would be at GitHub where Sharrief Shabazz from Microsoft has uploaded some good examples to get you going.

So starting with the BasicValueControl example, I’m going to play around and see what I can do. First, let’s create our three items required to make this work. We’ll create an HTML file and stick an IMG tag into then, then bind the SRC attribute back to our X++ code.

<span style="color:#007700;"> id="BasicControl"> <span style="color:#007700;"> data-dyn-bind="attr: {src: $control.Url}"/>



The X++ code that drives this binding is shown below. We’ve added a Url property which we will access from our Form.

[FormControlAttribute("BasicControl","resources/html/BasicControl", classstr(FormBuildControl))] class IoTControl extends FormTemplateControl { #define.ValuePropertyName("Url") FormProperty valueProperty; public void new(FormBuildControl _build, FormRun _formRun) { super(_build,_formRun); this.setTemplateId("BasicControl"); this.setResourceBundleName("resources/html/BasicControl"); valueProperty = this.addProperty(methodStr(IoTControl, parmValue), Types::String); } [FormPropertyAttribute(FormPropertyKind::Value, #ValuePropertyName, true)] public str parmValue(str _value = valueProperty.parmValue()) { if(!prmisdefault(_value)) { valueProperty.setValueOrBinding(_value); } return valueProperty.parmValue(); } }


So let’s create a Form based on the Custom pattern and see if we can access an offsite image located somewhere on the web. I’ll stick the image URL into the HTML controls’ property and run the form.

[Form] public class IoTForm extends FormRun { IoTControl iotControl; /// /// /// public void init() { super(); iotControl = this.design().addControlEx(classStr(IoTControl),"IoTControl1"); iotControl.parmValue("http://www.xxxxxxxx.com/xxxxx.png"); } }


Okay so that works well and raises a number of interesting use cases. First, instead of having to store a repository of images for your Fleet Management system inside the AX database for say, parts or stock, we can instead point the image to another site where we might have already built up a substantial library of images. Excellent.



Now let’s take this a bit further. Say we have an IoT hub of sorts, receiving a number of sensor updates, and we want to create a dashboard showing these values in Dynamics AX. Let’s assume that hub is not running on Azure nor Power BI, but on another popular platform called ThingSpeak.

ThingSpeak provides a REST interface for both pushing IoT data into, and then retrieving back using the same API. So we can access the latest field values from a channel in ThingSpeak with a simple call, and with a bit of luck display this back in AX. Let’s have a look at our updated HTML control below.

<span style="color:#007700;"> id="BasicControl"> <span style="color:#007700;"> type="text" data-dyn-bind="attr: {value: $control.Url}"/>



We’ve modified our class a little to make the WebRequest call to ThingSpeak, given our channel, API Key and field for temperature (field 1).

[Form] public class IoTForm extends FormRun { IoTControl iotControl; public void init() { super(); iotControl = this.design().addControlEx(classStr(IoTControl),"IoTControl1"); System.Net.HttpWebRequest myRequest; System.Net.HttpWebResponse myResponse; System.IO.StreamReader reader; str iotResult; myRequest = System.Net.WebRequest::Create("http://api.thingspeak.com/channels/98558/fields/1/last?key=xxxxxxxxxx”); myResponse = myRequest.GetResponse(); System.IO.Stream stream = myResponse.GetResponseStream(); reader = new System.IO.StreamReader(stream); iotResult = reader.ReadToEnd(); iotControl.parmValue(iotResult); } }


So below we see this works, we receive back “23” into the control which is correct.



A bit ugly so we can style the HTML slightly as shown below:

<span style="color:#007700;"> id="BasicControl">
<span style="color:#007700;"> type="text" data-dyn-bind="attr: {value: $control.Url}" style="padding:3px; border-color:#cccccc; text-align:center; color:#000000; font-weight:bold; font-size:30px; border-style:solid; border-width:5px; border-radius:17px; box-shadow:0px 0px 4px 0px rgba(42,42,42,.75);"/>




That looks a bit better.



To improve on this, let’s add two controls, one displaying temperature and the other humidity, and then create a reusable helper class for making the API calls. We’ll update the Form as shown below.

[Form] public class IoTForm extends FormRun { IoTControl iotControl1; IoTControl iotControl2; public void init() { super(); iotControl1 = this.design().addControlEx(classStr(IoTControl),"IoTControl1"); iotControl2 = this.design().addControlEx(classStr(IoTControl),"IoTControl2"); str temp = IoTAPI::GetResult("http://api.thingspeak.com/channels/98558/fields/1/last?key=xxxxxx”); iotControl1.parmValue(temp); str hum = IoTAPI::GetResult("http://api.thingspeak.com/channels/98558/fields/2/last?key=xxxxxxx”); iotControl2.parmValue(hum); } }


Our helper class accepts the URL and returns the response, as simple as it gets. You might want to add an exception handler that returns an error message instead of the value; always a good idea.

class IoTAPI { public static str GetResult(str theUrl) { System.Net.HttpWebRequest myRequest; System.Net.HttpWebResponse myResponse; System.IO.StreamReader reader; str iotResult; myRequest = System.Net.WebRequest::Create(theUrl); myResponse = myRequest.GetResponse(); System.IO.Stream stream = myResponse.GetResponseStream(); reader = new System.IO.StreamReader(stream); iotResult = reader.ReadToEnd(); return iotResult; } }


So here we have the two controls shown on the form, opening up a world of new possibilities into offsite integration, data retrieval, API calls to protect IP by keeping the logic offsite, etc. etc.



Hope this post was worth your time!






Источник: https://gideonvos.wordpress.com/2016...extensibility/