Web Client Custom Properties Property
Magic xpa 4.0 has introduced a property named, Custom Properties in its Web Client offering to control the look, feel, and behavior of the UI.
The Web Client Form and all the Web Client controls has this property, which can be enabled using Magic expressions from the generated HTML code. This is a read-only property. In xpa 3.X, the font and color properties that were required to modify the look and feel of the forms and controls are no longer supported in 4.0.
In a dynamic web site, the developer always needs to display the HTML contents based on certain conditions that require evaluation at the client-side. For example, the developer wants to dynamically display the color of a label based on certain condition. In Web Client development we have provided the Web Developers an ability to write a method called mg.getCustomProperty in the Angular component’s code of executing expressions in the Magic task. This will enable the developer to access the data that is defined in the Magic task and use it to control the UI behavior.
Custom Properties property is recomputed when the variables that appear in its expression are updated. To accomplish this, an API of the Web Client Engine will be available and it will evaluate a form or control custom property by its name. The Web developer will use this API in the HTML whenever they want to control the UI according to the result of the Custom Property.
Applying Custom Properties Property to a Form
|
Syntax:
|
mg.getCustomProperty(FormName, CustomPropertyName )
|
|
Parameters:
|
FormName is a string for form name.
CustomPropertyName is a string depicting custom property name.
|
|
Returns:
|
The return type of the expression set.
|
|
Example:
|
<p >
(mg.getCustomProperty ('webExampleCustomProperties', 'IsCreatedModeState'))
</p>
|
|
See also:
|
The WebSamples project (program CustomPropertiesForm)
|
Applying Custom Properties Property to a Control
|
Syntax:
|
mg.getCustomProperty (ControlName, CustomPropertyName[, RowNumber])
|
|
Parameters:
|
ControlName is a string for form name.
CustomPropertyName is a string depicting custom property name.
RowNumber is optional.
|
|
Returns:
|
The return type of the expression set.
|
|
Example:
|
Code in CustomPropertiesControl.css:
.redClass{background-color: #FF0000;}
.blueClass{background-color:deepskyblue;}
Code in CustomPropertiesControl.html:
<div *ngIf="(mg.getCustomProperty('EditControlName1', 'IsValidNumber1') === '1')" >
<p class="redClass" >{{ 'Control1 is greater then 100'}}</p>
</div>
<div *ngIf="(mg.getCustomProperty('EditControlName2', 'IsValidNumber2') === '1')">
<p class="blueClass">{{ 'Control2 is greater then 50'}}</p>
</div>
|
|
See also:
|
The WebSamples project (program CustomPropertiesControl)
|
Since version: 4.0
Using Enum to get the Value of Custom Properties
Earlier when any Custom Property was set and you wanted to use it, you needed to hardcode it, which was quite prone to making typo mistakes. Magic xpa generates Enum for Custom Properties in control accessor. Enum has Custom Properties defined for all the controls and the form.
The format of enum is as follows:
<ConrtolID~Custom Property Name>
You can use Enum to get the value of Custom Property as follows:
mgcp.<Custom_Property>
Where mgcp is an Enum and
<Custom_Property> is issued in the list of available properties shown by intellisense.
The Enum is generated in the accessor file as follows:
|
export enum MgCustomProperties {
CustomPropertiesControl_IsCreatedModeState = 'CustomPropertiesControl~IsCreatedModeState',
EditControlName1_IsValidNumber1 = 'EditControlName1~IsValidNumber1',
EditControlName2_IsValidNumber2 = 'EditControlName2~IsValidNumber2',
}
|
For example, you can use Enum in HTML, as follows:
|
// The new syntax using of Enum
<div *ngIf="(mg.getCustomProperty (mgcp.EditControlName1_IsValidNumber1) === '1')" >
<p class="redClass" >{{ 'Control1 is gretter then 100'}}</p>
</div>
//The old syntax without using Enum, (supported for backward compatibility)
<div *ngIf="(mg.getCustomProperty ('EditControlName2', 'IsValidNumber2') === '1')">
<p class="blueClass">{{ 'Control2 is gretter then 50'}}</p>
</div>
|
JavaScript Trigger on Custom Property Change
To allow you to handle the change in Custom Properties property in Magic xpa, a method named PropertyChanged() is exposed in the component. The PropertyChanged() method is invoked whenever the value of Custom Properties property changes.
You need to write the method in the .ts file of the component and handle the property change as follows:
|
PropertyChanged(propertyName: string, rowID: number, propertyValue: any): void{
if(propertyName == 'form~prop1') //using string for compare of format
<controlName>~<propertyname> this.myprop1 = propertyValue;
else if(propertyName == this.mgcp.rowCustomProperty) //using enum for compare
this.myprop2.set(rowID, propertyValue);
}
|
Triggering JavaScript Code from Magic xpa on Changing Custom Properties
Since version: 4.7
