How to manage objects in HTML5 display using javascript in CodeBehind

Displays, Symbols, Charts
1

Hi all…

I need to build an HTML Display so I have to use JavaScript to code,. I have some questions:

1.- How to manage buttons, texboxes, etc, using JavaScript?

I can do this with C#

TextBox opsButton00 = CurrentDisplay.GetControl(“OpsButton00”) as TextBox;

but I need to do it from JavaScript

2.- How to get data from Datatable tag using JavaScript (sintaxis)?

I fill a datatable tag with a query made with C# connection, but I need to build a HTML display with a table which contains those tag values; so I have to read the datatable tag and insert those data into a HTML table

3.- I need to build a custom graph so I need to use rectangles and lines but I dont know how to
catch objects drew in screen in order to manipulate them and build what I want, this is similiar as question number one

Is there a manual with examples for building screen using JavaScript?

Best regards

2

Hi Rafles,

  1. To manage HTML objects using JavaScript, you can follow the example below:
var trendControl = null;
var textBox = null;

this.DisplayIsOpen = function() {
    // Access the control of the Trend object
    trendControl = this.CurrentDisplay.GetControl("trend");
    // Access the control of the TextBox
    textBox = this.CurrentDisplay.GetControl("text1");
    // Insert text or a tag value in the line below
    textBox.Text = @Tag.tag1;
}

In this code, you obtain control of the objects and manipulate their properties, similar to what you already do in C#.

  1. To retrieve data from a DataTable tag using JavaScript, you can use the following syntax:
@Tag.tagTable = @Dataset.Table.Table1.SelectCommand();
@Tag.tagTable = @Dataset.Query.HistorianQuerie.SelectCommand();

This code stores the desired table in the tag tagTable, which is of the DataTable type. After that, you can use tagTable as the DataSource in the configuration of a DataGridWindow.

  1. Using the same logic as in answer 1, you can obtain control of any object on the screen to manipulate them and build what you desire, using the GetControl method. Here is the syntax:
this.CurrentDisplay.GetControl("ObjectUID");

If you have any questions, we are available.

Best Regards,
Tatsoft Team.