We have seen in the previous section how to subscribe to a variable for monitoring purposes by using the HMI framework. Suppose we have 1000 variables that are coming from the database or PLC. It does not make sense to make a command manually and then subscribe to it.

The following code can be downloaded from the sample.

function MonitorVariable() {
var mainDataGrid = TcHmi.Controls.get("TcHmiDatagrid_Main");  // Grid where we update in HMI
var dataReadingStatus = '';
var commands = [];
var resultLoadDatabase;
async function LoadDataFromDataBase() {
try {
resultLoadDatabase = await ReadDataFromRemoteServer('%s%PLC1.MAIN.fnValve.ArrayForSub%/s%');
			console.log('LoadDataFromDataBase length = ' + resultLoadDatabase.length);
if (TcHmi.Server.isWebsocketReady()) {
for (var i = 0; i < resultLoadDatabase.length; i++) {
var sym = {
	'symbol': resultLoadDatabase[i]
	}
	commands.push(sym);
}
dataReadingStatus = await ReadDataFromRemoteServer('%s%PLC1.MAIN.fnValve.stateDescription%/s%');
console.log(`dataReadingStatus = ${dataReadingStatus}`);
TcHmi.Server.subscribe(commands, 1000, function (data) {
if (data.error !== TcHmi.Errors.NONE) {
console.log('subscribe for LoadDataFromDataBase symbolName  failed  ');
console.log(`data.details.code = ${data.details.code}`);
return;
}
var response = data.response;
if (!response || response.error !== undefined) {
console.log('wrong response in LoadDataFromDataBase symbolName notification');
console.log(`data.details.code = ${data.details.code}`);
return;
}
var commands = response.commands;
if (commands === undefined) {
console.log('LoadDataFromDataBase symbolName initialization commands undefined');
console.log(`data.details.code = ${data.details.code}`);
return;
}
for (var i = 0; i < commands.length; i++) {
var command = commands[i];
if (command === undefined) {
console.log('LoadDataFromDataBase initialization commands undefined => ' + command.symbol);
console.log(`data.details.code = ${data.details.code}`);
return;
}
if (command.error !== undefined) {
console.log(commands[i].symbol);console.log('LoadDataFromDataBase initialization commands error has value, why? => ' + command.symbol);
		console.log(`data.details.code = ${data.details.code}`);
		return;
}
if (command.symbol.indexOf(".upperProximitySensor") > 0) {
console.log('command.symbol at 1 :' + command.symbol);
var readvalue1 = command.readValue;
var obj = {
tag: command.symbol,
value: readvalue1
};
if (readvalue1) {
MyObjectObjectArray.push(obj);
} else {
if (MyObjectObjectArray.length > 0) {
var d = MyObjectObjectArray.filter(product => product.tag == command.symbol);
if (d.length > 0) {
var ind = MyObjectObjectArray.indexOf(d[0]);
MyObjectObjectArray.splice(ind, 1);
}
}
}
mainDataGrid.setSrcData(JSON.stringify(MyObjectObjectArray));
}
if (command.symbol.indexOf(".lowerProximitySensor") > 0) {
	console.log('command.symbol at 2 :' + command.symbol);
	var readvalue2 = command.readValue;
	var obj = {
	tag: command.symbol,
	value: readvalue2
	};
if (readvalue2) {
MyObjectObjectArray.push(obj);
} else {
if (MyObjectObjectArray.length > 0) {
var d = MyObjectObjectArray.filter(product => product.tag == command.symbol);
if (d.length > 0) {
	var ind = MyObjectObjectArray.indexOf(d[0]);
	MyObjectObjectArray.splice(ind, 1);
}
}
}
mainDataGrid.setSrcData(JSON.stringify(MyObjectObjectArray));
}
} // for
}); //Subscribe
} //Web socket  
} catch (error) {
console.log(`error occured while calling LoadDataFromDataBase for terminalState = ${error}`);
	}
} // LoadDataFromDataBase
LoadDataFromDataBase();
}

The above code shows how we can get the variable from other sources (PLC or Database) and create a subscription list. 

Download the sample which demonstrates the idea from this link. If we put upper upperProximitySensor and lowerProximitySensor to true then the grid view on the HMI will be updated.