Add more field in datasource form

Hello there,

I’m buildind my own plugin app, and for my kind of datas I need another field in the datasource form or query.options metrics. For example, I need an information about throughput from one source to determinate destination. So, I need at least more 3 fields for my source, destination and event-type. Has some way to do that without need to build grafana from source and change the controller file? I can do that inside my GenericQueryOptionsCtrl class on module.js?

class GenericQueryOptionsCtrl {
     "create my treatment for the form variables here using angular?"
GenericQueryOptionsCtrl.templateUrl = '/partials/query.options.html';

Ok, I tested here and i got it. Now, my new question is… If I have these 2 form:

<div name="divPerfsonar">
			<form  name="testForm" id="target" >
			  Source: <input type="text" name="source" required ></br>
			  Destination: <input type="text" name="destination" required ></br>
			  <input type="submit" value="Enter">
		<div id="hidden_div" style="display: none">
			<form name="etForm" id="target2" >
			  <select name="eventList" form="target2" id="selectFormID">
			  <input type="button" value="Submit" onclick="newQuery()"> 

How can I acess my input and select values on:

class GenericQueryOptionsCtrl {
     "create my treatment for the form variables here using angular?"
GenericQueryOptionsCtrl.templateUrl = '/partials/query.options.html';

Grafana is written in Angular so this is not how it works.

In Angular you bind a field to an input and it automatically will set the value on the model. You then have access to the model in the controller.

<input type="text" class="gf-form-input width-3" ng-model="" spellcheck="false" placeholder="" ng-blur="ctrl.refresh()">

The above HTML binds to yourField which you can access in the ctrl like this: The ng-blur means that it will call refresh when the user leaves the field. Refresh calls the query and refreshes the graph/table/etc.

Have a look at some existing data sources to get an idea of how it works. The Simple JSON data source is a good place to start:

1 Like

Ok, I think i got it. But, whos is my controller? I can see my query_ctrl.js as one extension of QueryCtrl controller?
For example, the simple JSON :

import {QueryCtrl} from 'app/plugins/sdk';
import '../css/query-editor.css!'

export class GenericDatasourceQueryCtrl extends QueryCtrl {

  constructor($scope, $injector, uiSegmentSrv)  {
    super($scope, $injector);

    this.scope = $scope;
    this.uiSegmentSrv = uiSegmentSrv; = || 'select metric'; = || 'timeserie';

  getOptions() {
    return this.datasource.metricFindQuery(
      // Options have to be transformed by uiSegmentSrv to be usable by metric-segment-model directive

  toggleEditorMode() { = !;

  onChangeInternal() {
    this.panelCtrl.refresh(); // Asks the panel to refresh data.

GenericDatasourceQueryCtrl.templateUrl = '/partials/query.editor.html'; 

And if I wanna acess my new form variable ( I will create a new function like:

newMetric() {
var storeFormValue =;

And, in my template on query.editor.html

<input type="text" class="gf-form-input width-3" ng-model="" spellcheck="false" placeholder="" ng-blur="ctrl.newMetric()">

Values in get saved to the panel json automatically - one target per row. You can see that by clicking on the panel context menu -> Panel JSON (or by looking at the dashboard JSON). Here is an example of the targets array from the panel JSON:

"targets": [
      "apiVersion": "2016-09-01",
      "appInsights": {
        "groupBy": "none",
        "metricName": "select",
        "timeGrainType": "auto"
      "azureMonitor": {
        "aggOptions": [

So unless you are doing something special with the values, you shouldn’t need much code. If you use ng-model, then it will be automatically saved and if you use ng-blur="ctrl.refresh()" then it will refresh when the user changes a value.

1 Like