i4SCADA Knowledge Base

Creating an i4SCADA Web Application

Abstract

This section will guide you through the creation of a simple HTML5 application based on the Visual Studio i4SCADA App Template.

This section will guide you through the creation of a simple HTML5 application based on the Visual Studio i4SCADA App Template. The new application will inherit the template's structure and MVVM pattern and will make use of the provided tools to configure a new view, create navigation for it and use a simple widget to display an online signal value.

To create your first HTML5 application using the i4SCADA App Template follow the steps below.

  1. Open Visual Studio with Administrative privileges. To do so, right-click on the Visual Studio icon and select Run as Administrator. This is required in order to ensure that the access to Internet Information Services (IIS) configuration is granted.

  2. In Visual Studio, open the New Web Site dialog using File > New > Web Site... or by pressing Shift + Alt + N on your keyboard.

  3. In the New Web Site dialog, search for the WEBfactory i4SCADA Application template or locate it in the left-side menu in Templates > Visual C# .

    Capture4570.jpg

    App Template in Visual Studio

  4. Name your new i4SCADA web application and click OK to create the new solution. Wait until Visual Studio creates the solution and opens it.

  5. At this point, your first i4SCADA web application can be built and run. Select the solution in the Solution Explorer and right-click and select Build Solution. The missing NuGet packages which are referenced by the i4SCADA App Template will be automatically restored by NuGet Package Manager when building the solution. Click the Run icon from Visual Studio's top menu (using your preferred browser) to start the build and launch the application. Alternatively, you can press F5.

    Capture4572.jpg

    Build and Launch Application using desired browser

    After restoring the missing packages and building the solution, the new application will launch in the selected browser. It will contain the demo views and widgets inherited from the i4SCADA App Template.