Discovery Tips&Tricks #3 – Build a form

You can use Discovery to build forms in order to configure your dashboard. Learn how to build it efficiently.

Discovery Tips & Tricks

Before you start, everything you need to know about Discovery is here.

Principles

You can use events to trap data coming from inputs in order to parametrize a WarpScript which will display a chart.

Discovery comes with some UI inputs:

Of course, each input can send an event to another tile, but, in the case of multiple inputs, you will execute as many times a WarpScript as you have events.

The main idea is to send input events to a button tile, and then, send a structure containing all the parameters to a chart by clicking on the button. In other words, we will build a form submit button.

Discovery Tips&tricks #1: Synchronization of zoom and focus between charts
Discovery Tips&tricks #2:
Reproduce the WarpStudio Plot view

Dashboard definition

At first, we have to define a gts variable that holds our random GTS list.

{
  'title' 'My Form'
  'cellHeight' 90
  'vars' {
    'gtsCount' '4'
    'dataCount' '10'
    'myStruct' { 'gtsCount' '4' 'dataCount' '100' }
  }
  'tiles' [  ]
}

Tiles definition

Now we define the first tile which will handle the gtsCount variable:

{
  'type' 'input:text'
  'title' 'gtsCount'
  'w' 2 'h' 1 'x' 0 'y' 0
  'macro' <% { 'data' $gtsCount 'events' [ { 'tags' [ 'gtsCount' ] 'type' 'variable' 'selector' 'gtsCount' } ] } %>
}

In the same way, we define another tile for dataCount handling:

{
  'type' 'input:text'
  'title' 'dataCount'
  'w' 2 'h' 1 'x' 0 'y' 1
  'macro' <% { 'data' $dataCount 'events' [ { 'tags' [ 'dataCount' ] 'type' 'variable' 'selector' 'dataCount' } ] } %>
}

And then, the button which will listen at gtsCount and dataCount:

{
  'type' 'button'
  'options' {
    'button' { 'label' 'Submit' }
    // event listener
    'eventHandler' 'type=variable,tag=(gtsCount|dataCount)'
  }
  'w' 2 'h' 1 'x' 0 'y' 2
  'macro' <% // executed when the button is clicked
  { 
    'data' <% 
      // we generate the form structure
      { 'gtsCount' $gtsCount 'dataCount' $dataCount } 'myStruct' STORE
      // return a custom data format with an event declaration, emitted once the script is executed
      { 'data' $myStruct 'events' [ { 'tags' [ 'myStruct' ] 'type' 'variable' 'selector' 'myStruct' 'value' { 'myStruct' $myStruct } } ]  } 
    %>    
  } %>
}

And finally, the parametrized chart:

{
  'type' 'line'
  'title' 'My chart'
  'w' 10 'h' 3 'x' 2 'y' 0
  'macro' <% 
    // fetch parameters
    $myStruct 'gtsCount' GET TOLONG 'gtsCount' STORE
    $myStruct 'dataCount' GET TOLONG 'dataCount' STORE
    // build a random GTS
    1 $gtsCount <%
      'i' STORE
      NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE
      1 $dataCount <% 'j' STORE  $g [ NOW $j STU * - RAND ] ADDVALUE DROP  %> FOR
      $g
    %> FOR
  %>
  'options' { 'eventHandler' 'type=variable,tag=myStruct' }
}

All together: https://snapshot.senx.io/0005de59f4502b3b-0-6-10463e831072cb06
I invite you to read this post to learn how to create a custom tile for Discovery.

The result

{ 'title' 'My Form' 'cellHeight' 90 'vars' { 'gtsCount' '4' 'dataCount' '10' 'myStruct' { 'gtsCount' '4' 'dataCount' '10' } } 'tiles' [ { 'type' 'input:text' 'title' 'gtsCount' 'w' 2 'h' 1 'x' 0 'y' 0 'macro' <% { 'data' $gtsCount 'events' [ { 'tags' [ 'gtsCount' ] 'type' 'variable' 'selector' 'gtsCount' } ] } %> } { 'type' 'input:text' 'title' 'dataCount' 'w' 2 'h' 1 'x' 0 'y' 1 'macro' <% { 'data' $dataCount 'events' [ { 'tags' [ 'dataCount' ] 'type' 'variable' 'selector' 'dataCount' } ] } %> } { 'type' 'button' 'options' { 'button' { 'label' 'Submit' } // event listener 'eventHandler' 'type=variable,tag=(gtsCount|dataCount)' } 'w' 2 'h' 1 'x' 0 'y' 2 'macro' <% // executed when the button is clicked { 'data' <% // we generate the form structure { 'gtsCount' $gtsCount 'dataCount' $dataCount } 'myStruct' STORE // return a custom data format with an event declaration, emitted once the script is executed { 'data' $myStruct 'events' [ { 'tags' [ 'myStruct' ] 'type' 'variable' 'selector' 'myStruct' 'value' { 'myStruct' $myStruct } } ] } %> } %> } { 'type' 'line' 'title' 'My chart' 'w' 10 'h' 3 'x' 2 'y' 0 'macro' <% // fetch parameters $myStruct 'gtsCount' GET TOLONG 'gtsCount' STORE $myStruct 'dataCount' GET TOLONG 'dataCount' STORE // build a random GTS 1 $gtsCount <% 'i' STORE NEWGTS 'data-' $i TOSTRING + RENAME 'g' STORE 1 $dataCount <% 'j' STORE $g [ NOW $j STU * - RAND ] ADDVALUE DROP %> FOR $g %> FOR %> 'options' { 'eventHandler' 'type=variable,tag=myStruct' } } ] }

Read more articles and tutorials about Discovery.