Skip to main content

i4scada Knowledge Base

Setting up the machine view and viewModel

Abstract

Check out this tutorial guiding you on how to create the view and viewModel that will be accessed when clicking the three buttons defined in the example.html view.

The next step is to create the view and viewModel that will be accessed when clicking the three buttons defined in the example.html view.

Note

The present demonstration will use the default WEBfactory signals Setpoint 1, Setpoint 2, and Setpoint 3.

  1. Using the same procedure as above, create a new, empty view and viewModel, called machine.html and machine.js.

  2. Open the machine.js view model and add the code that will receive our parameter and process it:

    define(
function () {
    var ctor = function () {
        var self = this;
    };
    ctor.prototype = {
        activate: function (param) {
            var self = this;
            self.machineParam = param;
        }
    };
    return ctor;
});

  3. Now open the machine.html view and add the HTML that will display the title, machine name, and operation value. Here we will make use of the processed parameter machineParam to obtain the title and signal name, using data binding.

    <div class="container-fluid">
    <h1 class="page-header">Dynamic Navigation Example - Machine Data</h1>
    <h2 class="page-header">Machine <span data-bind="text: machineParam"></span></h2>
    <h3>Operation value: <strong><span data-bind="wfValue: { signalName: 'Setpoint ' + machineParam }"></span></strong></h3>
</div>
In this section: