B4J Tutorial [ABMaterial]: Getting & Setting JavaScript Properties to Custom Components

Hi there

When creating custom components, you will deal with javascript. You component will come up with its own methods to execute and events that you can trap.

This tutorial deals with getting and setting values to your javascript based component.

You however need to understand what you need to do and also study the javascript of the component to understand what it does and why it does it.

The example below, after being inserted on ABMComp_Refresh method, will, when the event is trapped on your webapp, raise a change event and return the value that has been changed.

Getting a javascript property of your component

Dim options As String = $"$('#${ID}').ionRangeSlider({onChange: function (data) {
        console.log(data.from);
        b4j_raiseEvent('${compID}_change', {'value':data.from});
    }});"$

What this says is, when the rangeSlider changes value, raise a _change event passing it a value from the data.from property of the component. NB: add this code in ABMComp_Refresh method of your component, for more details on raising events and how to read the returned values, see this tutorial here.

Setting a property to a javascript component

To set a value to the method, define a method that will do that when creating your component. For example, when this method is called for my component, it will update the from value to what I have specified.

Sub Update(nValue As String)
    Dim sb As StringBuilder
    sb.Initialize
    sb.Append($"var ${compID}slider = $('#${compID}').data("ionRangeSlider");"$)
    sb.Append($"${compID}slider.update({from: ${nValue}});"$)
    page.ws.Eval(sb.tostring, Array As String(compID))
End Sub

So in your WebApp, you will have a call like

myComponent.Update(ValueFromTextBox)

Do you like this article?