Custom widget

Even though grid widget and list widget are two of the most popular. There will be cases when business needs require developers to build customized widgets.

That's when the Custom Widget feature comes handy in Casewhere. Custom widgets are made of HTML, CSS and JavaScript. Like built-in widgets, custom widgets can load and display data from Casewhere data sources.

There are two important steps to configure a custom widget:

Step 1. Select a data source.

Step 2. Design the widget template. Casewhere will generate a default template you can customize when creating a new widget.

Step 3. Configure other advanced settings. A custom widget shares all common settings with other widget types. Read more in Widget management.

A simple example

Let's say business side asked the develop team to build some simple charts with provided input value.

This type of business requirement will not totally fit in with a grid or list widget. But lucky that Casewhere support customize widget where you can call out some visualization library.

This example uses ChartJS. You can implemented more library to Casewhere by using workersite or theme (Navigate to Theme > Custom component > Javascript).

Step 1. Navigate to Widgets, Click Create button, select Custom..

Then drag and drop Custom from Toolbox to main working area.

Step 2. Open Edit Custom Settings dialog.

Go to Template tab and append the following codes to the end of the default codes.

model.options = {
    type: 'line',
    data1: {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
            {
                label: '# of Votes',
                data: [40, 50, 35, 40, 30, 50],
                borderWidth: 3
            },

        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    reverse: false
                }
            }]
        }
    }
};

Go to HTML tab and paste the following codes.

<div class="row d-flex flex-grow">
    <div class="col-12 flex-grow flex-column text-right">        
        <canvas id='cisco-chart' tc-chartjs-line chart-data="model.options.data1" chart-options="model.options.options"></canvas>       
    </div>
</div>

And that's it. Reload your page to see the chart result.

You can inject all AngularJS built-in services to the customWidgetController. Besides that, Casewhere provides many worker services you can use to develop your widget.

Configure custom widget

A simple example

APIs to use with custom widget