Page History

• Solution Name: BlazorControlDemo
• Software Version: v10 Update 1d
• Keywords: BlazorControl

Summary

This example demonstrates how to use an external BlazorControl component on any HTML5 display of your solutions.

Technical Information

The example demonstrates how to use the BlazorControl enhancing the display with custom styles and interactive functionalities.

Step-by-Step:

1. Go to Displays / Draw (it is important to remember that BlazorControls only are available for HTML5 displays).

2. On the Components Panel, select Viewer, then BlazorCtrl(Web). Image Added

3. Click or drag-and-drop it on the Drawing area to use it.

4. Once you drop it, a File Explorer will open, here you must choose the control DLL file that will be used.

5. Select the file "BlazorControlExample.dll" and click Open

6. Choose the ProgressBar from the selected DLL and press OK, then click on the display to insert your control.
7. Double-click your control and configure the required fields like this:
   1. Control name: ProgressBar
   2. Assembly: BlazorControlExample.dll
   3. Type: BlazorControlExample.ProgressBar
8. Create the required tags for this demo:
   1. Barcolor = Text
   2. TargetProduction= Integer
   3. CurrentProduction = Integer
9. In the CodeBehind
10. Select the BlazorControl from the View Elements on left side Panel on the Drawing environment.
11. Select the DLL with the control.  In order to enable the web distribution, put that control is the foder BlazorControls in the product distribution folder.
12. Setup the settings in the configuration dialog with components references.
13. In the Code Behind, bind properties of the external control with Tags in your application. 

CodeBehind

In the CodeBehind, change the code to match with this:

public async Task BlazorControlLoaded(TBlazorControl control) 
{		
	//This event will be triggered for each Blazor Control in the display.
	//Using the TBlazorControl to access the desired Blazor control ProgressBar
	BlazorControlExample.ProgressBar myProgressBarComponent = control.BlazorComponent as BlazorControlExample.ProgressBar;
	myProgressBarComponent.CurrentProduction = 150;
	
	//The BindEvent can be used to bind bi-directional Tags to Blazor properties. It requires an EventCallback on the Blazor control to receive the value back into the Tag.
	control.BindEvent("CurrentProduction", @Tag.CurrentProduction.GetName(), "CurrentProductionRestarted");
	
	//Using "null" in the third property of the BindEvent function will set the Tag into the property in a one way, so the tag will only send values to the control, it will never receive values back.
	control.BindEvent("TargetProduction", @Tag.TargetProduction.GetName(), null);	
	control.BindEvent("BarColor", @Tag.BarColor.GetName(), null);
}

Once it is done, the project is ready to Start and the tags are linked properly to the control.

Image Added

Reference Information

→ See BlazorControls User Guide > Draw > Components > BlazorControl for more information.

In this section: