# Widget

The `Widget` control enables integration of JavaScript libraries into Wisej.NET applications. It loads custom JavaScript and CSS libraries at runtime, allowing you to utilize and containerize custom controls.

These integrated controls can be configured with server-side resources and trigger server-side events.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Server Communication

Wisej.NET provides a streamlined infrastructure for client-server messaging between individual controls.

#### Client to Server

Use the `fireWidgetEvent` method to send messages from client to server by attaching to the client-side widget event:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
// Processes the client-side widget initialization.
this.init = function(options) 
{
    // retain a reference to 'this' context.
    var me            = this;
    options.onItemTap = function itemTap(event, inst) {
        me.fireWidgetEvent("itemTap", event.target.getAttribute("data-text"))
    }
    
    // simple integration of the MobiScroll JavaScript library.
    mobiscroll.optionlist("#demo", options);
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Check the Browser console for important messages when debugging the `Widget`.
{% endhint %}

The application routes received event data to the corresponding server-side control's `WidgetEvent` handler:

{% tabs %}
{% tab title="C#" %}

```csharp
// Processes events from the client-side widget.
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
    switch (e.Type)
    {
        case "itemTap":
            AlertBox.Show(e.Data);
            break;

        case "scroll":
            AlertBox.Show($"Scrolled: {e.Data.scrollValue}");
            break;
    }
}
```

{% endtab %}
{% endtabs %}

#### Server to Client

Use the `Instance` dynamic member to send messages to the client-side widget.

First, define a function in your client-side `Widget.InitScript`:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
// Adds two numbers together.
this.addNumbers = function(num1, num2) 
{
    return num1 + num2;
}
```

{% endtab %}
{% endtabs %}

Then call this method using `CallAsync` or `Eval` from the server-side instance:

{% tabs %}
{% tab title="C#" %}

```csharp
var result = await this.widget1.CallAsync("addNumbers", 1, 2);

// or

this.widget1.Eval($"this.addNumbers({1},{2});", 
    (result) => { AlertBox.Show(result.ToString()); });
```

{% endtab %}
{% endtabs %}

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                         |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.Widget"                                                                                                  |
| Theme appearance | "widget", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                               |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js) |