Migration to the new i4scada App Template
This article helps you to migrate the new i4scada App Template projects to have the same contents and functionality as the older ones.
Migrating to the new i4scada App Template is a straight-forward procedure that implies simply creating a new project based on the new template. The complex part is migrating the custom files from the old project to the new one. This article will help you understand what parts of your i4scada App Template projects will need to be migrated and where, so that the new i4scada App Template-based project will have the same contents and functionality as the older one.
This migration procedure applies only if no default framework files were altered in any way! Any modification of a default framework file will be lost when migrating to the new i4scada App Template!
Installing the new i4scada App Template
While the older versions of the i4scada App Template were designed as application templates, the new i4scada App Template has been optimized for web applications, being now a web site template. This summarises the first evident difference between the older and the new templates. While there is an obvious difference in project types, the installation of the i4scada App Template follows the same steps as before. For more details, read the chapter "Setting up the i4scada App Template", under section i4scada Web Application.
Migrating the custom project files
The first and obvious thing to be kept when performing a migration is the content of your project. This includes all the custom CSS files, scripts, images, and any other custom files that may be included in your project (fots, svg, etc.). So make sure to back up any custom content and carry it over to the new version of your i4scada App Template project.
Views
The contents of the Views folder, including all the customer specific files and all modified standard HTML files (like shell.html, home.html, etc), along with the sub-folders and their contents should be ported to the new project.
Path in old solution | Path in new solution |
|---|---|
App/views/ | App/src/views/ |
ViewModels
The contents of the viewModels folder, including all sub-folders and their contents must be copied to the new path in the new project. Make sure that all the custom navigation routes defined in the shell.ts (App/viewModels/shell.ts) are ported to the new shell.ts (App/src/viewModels/shell.ts). Also, make sure that all the standard and custom framework JavaScript and TypeScript files are ported to the new project.
Path in old solution | Path in new solution |
|---|---|
App/viewModels/ | App/src/viewModels/ |
Splash screen
The content of the splash file (Views/Default/_splash.cshtml) should be ported to the corresponding file from the new project (_pageTemplates/splash.tpl) only if it has been customized.
Path in old solution | Path in new solution |
|---|---|
Views/Default/_splash.cshtml | _pageTemplates/splash.tpl |
Index
The additional content from the index file (Views/Default/index.cshtml), like metadata, should be ported to the new index file (_pageTemplates/index-app.tpl).
Path in old solution | Path in new solution |
|---|---|
Views/Default/index.cshtml | _pageTemplates/index-app.tpl |
Custom CSS and JavaScript
Any references to CSS or JavaScript files inside the bundleConfig file (App_Start/bundleConfig.cs) should be ported to the corresponding file in the new project (_gulp/bundles/content.js for CSS and _gulp/bundles/scripts.js for JavaScript).
When porting the references to CSS or JavaScript files, make sure that the corresponding reference format is used:
old format:
.Include("~/Content/custom/customStyle.css")new format:
`${contentRoot}/custom/customStyle.css`Also, take into consideration the name of the bundles inside the content.js file. The styles bundle is used for referencing third- party css files (like bootstrap.css, etc) while the custom bundle is used to reference custom stylesheets.
Path in old solution | Path in new solution |
|---|---|
App_Start/bundleConfig.cs | _gulp/bundles/content.js |
_gulp/bundles/scripts.js |
Custom widgets and components
Any custom widgets or components must be copied into the new folders and registered in the new project as follows
Path in new solution | Registry file |
|---|---|
App/src/customComponents/ | App/src/customComponentRegistry.ts |
App/src/customWidgets/ | App/src/customWidgetRegistry.ts |