Skip to main content

i4scada Knowledge Base

Setting up the example foundation

Abstract

Learn how to create a simple HTML view and a JavaScript viewModel which will host the example and link it in the main navigation menu.

For this example, we will create a simple HTML view and a JavaScript viewModel which will host the example and link it to the main navigation menu. 

Note

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

  1. Create a new page by adding an empty view and viewModel called example and a route for the view in the shell.ts router. Refer to the chapter "Your First i4scada Web Application" of the present article, to learn how to create the view, viewModel, and route.

    the view: example.html

    <div class="container-fluid">
    <h1 class="page-header">Dynamic Navigation Example - Machine Data</h1>
    
</div>

    the viewModel: example.js

    define(function () {
    var ctor = function () {
        var self = this;
    };
    return ctor;
});

    the shell.ts route

    { route: "example", title: "Machine Data", moduleId: "src/viewModels/example", nav: true, settings: { iconClass: "wf wf-pointer" } }

  2. Inside the new example.html view, add the three buttons that will drive our dynamic navigation. Each button will represent an imaginary machine that we can access and view its operation data.

    <div class="container-fluid">
    <h1 class="page-header">Dynamic Navigation Example - Machine Data</h1>
    <div class="col-sm-4">
        <a class="btn  btn-default block" href="#machine/1">
            <strong>Machine 1</strong>
        </a>
        <br />
    </div>
    <div class="col-sm-4">
        <a class="btn  btn-default block" href="#machine/2">
            <strong>Machine 2</strong>
        </a>
        <br />
    </div>
    <div class="col-sm-4">
        <a class="btn  btn-default block" href="#machine/3">
            <strong>Machine 3</strong>
        </a>
        <br />
    </div>
</div>

    Note

    The href values for our buttons (#machine/1, #machine/2 and #machine/3) are composed of the route hash that we will create later for the machine view and viewModel and the value that will be passed as a parameter.

So far we have used the knowledge gained in previous tutorials Setting up the example foundation ,Setting up the machine view and viewModel, and Setting up the dynamic route for the machine view and viewModel. to create the basis for our example. Next, we will start working on the actual dynamic navigation.

In this section: