Description

The MaterialLogin component allows you to change the appearance of the Niagara login page by adapting it to the Material Design.


Implementation


  • Copy / paste the WebService component into the station services.
  • Change the properties of the component to the desired appearance or run the Customize action to adopt the default appearance.
  • Relaunch the login page in the web browser.


Properties

  • Logo: Since 4.11.2, to add a logo, please follow the instructions below. Alternatively, you can use an image stored in the station or on a module. 
  • Background: Background of the page. Only URL links are allowed for images.

(info)  The following error appears when a URL link is defined (java.lang.ClassCastException:com.tridium.net.BHttpObject cannot be cast to javax.baja.file.BIFile), but this has no impact on the operation of the component.

  • Color: Main color that will be used for the login page
  • TitleColor: Text color for the station name and the login button.
  • LicenseColor: Color of the license text.
  • WebStartColor: Color of the Java Web Start text.
  • WebStartBackground: Background of the block containing the Java Web Start message.
  • WebStartBorder: Color of the border for the block containing the Java Web Start message.


Actions

  • Customize: activates the new appearance by creating or modifying the logo and loginCss slots in the WebService. The action is run automatically when changing a slot of the component.

For further customization, the created CSS file can be modified directly (in this case it is advisable to make a copy of the file to avoid modifications being deleted when a new action is triggered and to indicate the path of the new file in the loginCss slot located in the WebService).


Niagara 4.11 compatibility

Since Niagara 4.11.2.18 material login component needs the BtibLoginTemplate.

Copy/paste the module BtibLogin into your modules. Restart the station and the workbench.

Go to the WebService, uncheck null and select BtibLoginTemplate

For security issues, Niagara has changed restrictions for files, so the customization is a bit more complicated since 4.11.2.18.


Logo

Since 4.11.2, the logo must be added as follows : 

Once you've configured your MaterialLogin properly, you can add a logo slot directly to the WebService. 

  • Open the Ax Slot Sheet view of the WebService. 
  • Right-click, Add Slot. 
  • Name the logo slot, which is of the type gx:image. 

The path to the image must absolutely be the one indicated above : file^^public/

To do this, you need to create the public folder in the station files. Here is the path co create it : C:\ProgramData\Niagara4.1...\TridiumEMEA\stations\stationName

Paste your image inside this folder and remember to restart your station to see the logo.