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.

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:

Text input
List input (including auto-complete, classical list, checkboxes list, and so on)
Slider
Date input and date range input
Button

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
Discovery Tips&tricks #4: Production-ready!

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.