How to Change the Appearance of My Systemlink Server

Updated May 14, 2020

Reported In

Software

  • SystemLink Server

Issue Details

I want to modify the appearance of my SystemLink Server to change or add:

Solution

To start modifying the appearence of your server, navigate to the following directory, which will be called "root directory" in the contect of this article:
  • <root> = "C:\Program Files\National Instruments\Shared\Web Server\htdocs"
  • Three xxx will denote variable names in the context of a file path.

As always, it is highly recommended to create a backup of each file you modify. If you want to revert all changes you have implemented, you can repair the SystemLink installation, which will revert all files back to the default.



 

Modify Homepage Icon:



Open <root>\index.html and change the following line to point to a new icon or replace the default icon:

<link rel="icon" href="resources/images/nieagle-square-icon32.ico">

Restart the NI WebServer and delete your browser cache to see the changes.

 

Modify Homepage Title:



Open <root>\resources\json\locales\xxx\skyline-view.json, where "xxx" stands for a folder for each supported language and modifiy the following line:

"pageTitle": "NI SystemLink™",

In addition, you can modify further text, that are displayed by the landing page.
Restart the NI WebServer and delete your browser cache to see the changes.
 

Modify Homepage Colors:



Navigate to 

<root>\resources\css\skyline-view.css

Modify the Hex color values for the property "skyline-view-header" and "skyline-view-iframe". In addition you can also change the behavior of any other element as with any css definition.

Restart the NI WebServer and delete your browser cache to see the changes.

 

Modify Plugin Icons:

The icons of all default SystemLink plugins are stored as web open font format (woff) file, which can be found in

<root>\classic\resources\fonts\SkylineTheme-Icons\SyklineTheme-Icons.woff

These icons are referenced by the html file in the following location:


<root>\classic\resources\fonts\SyklineThemeIcons.html

You can replace the original .woff file with a modified one containing new icons or change the declaration in the html file.
Restart the NI WebServer and delete your browser cache to see the changes.

 

Modify Plugin Grouping:



By default, the SystemLink Server is organizing each plugin into several groups. Per default, all custom plugins are showing up in the "Additional Applications" 
group. You can modify plugin positions, and create new groups with the following modifications:

Navigate to

<root>\groups

which contains the data for each group. The config file in each group folder declares which plugins are associated to it.
The ID's of the default SystemLink plugins are listed in the table below:
 
ID's of the default SystemLink plugins
NameID
systemsmanagementSystems Manager
packagerepositoryPackage Repository
assetmanagerAsset Manager
alarmsnotificationsAlarms and Notifications
dashboardbuilderDashboards
fileviewerFile Viewer
tagviewerTag Viewer
datanavigatorData Navigation
dataanalyzerData Analysis
testmonitorTest Monitor
cloudconnectorCloud
opcviewerOPC UA
datapluginsData Plugins
preprocessorData Preparation
datafinderData Indexing
analysisserverAnalysis Automation

For custom plugins and the Jupyter Notebook you need to add an ID to their config file

<root>\plugins\xxx\config.json

"id": "jupyter"

After this step you can use each id to add all your custom plugins to existing or new groups. 
After having completed the above steps, restart the server and empty the browser cache.

 

Create additional groups:

To create additional groups, simply create a new folder in 

<root>\groups

and copy the content from one of the default groups into the new folder. You then need to modify variables in <root>\groups\xxx\config.json and <root>\roups/test/resources/json/locales/xxx/systemlink-server-common.json:

config.json:
  • "id": "Newgroupname"
  • "titleToken": "Newgroupname.group.title"
  • "tooltipToken": "Newgroupname.group.title"

systemlink-server-common.json:
  • {
       "Newgroupname": {
           "group": {
              "title": "Plugin Name"
           }
       }
    }

After having completed the above steps, restart the server and empty the browser cache.