Creating a form for user input in Looker.

Looker Q&A Looker
,
1

Hi,

I have a requirement in which I want to show a form onto the looker dashboard. This form would show 3 fields, of which two would be for user inputs namely Currency and Cost and Expected View %, both I believe will be in the form of a parameter. The third field would be a measure named Current View % which we are already calculating in the Looker model and will have a value which would be already populated and change based on filter selection. The from will have a Calculate Saving button, which when clicked, will show the Savings value based on the calculation in the Looker model.

The form would be something similar to this image. where the current rate in the middle will be populated automatically and CPM and Target rate will be user input values. On clicking the calculate button the savings value would show up on the right side.

I wanted to know if this is possible in some way in Looker, if so how can I get that, I dont know much of HTML but if any way it is possible I would appreciate the help.

Thanks in advance,

Rahul.

2

Hi @Rahulkn ,

Filters always appear at the top of the dashboard, explore or look. If you are embedding the dashboard, you potentially could investigate the use of themes. You could use a text tile under the filters to label the “How much estimated savings tile”.

Alternatively, this involves more code, but you potentially could create an extension to mirror this form.

3

Hi!

I have the same need. @Rahulkn did you get any solution?

Tks

4

Hi Lucas,

I tried to implement a bunch of solutions but eventually the requirement got changed completely.

Towards a solution for this question, I tried to create a form on a text tile and use it to pass on as a filter to the dashboard. you can use something like the below code.

<form action="/dashboards/7187" method="get">

<div style="background-color:#3B54CA; padding: 20px; border-radius: 25px;">

<h2><font color="#ffffff"><center>Estimated savings on a Higher Viewability Rate?</center></font></h2>

<input type="hidden" name="run" value="1" />

<div style="display:flex">

<div style="margin:0 1em">

<select type="text" id="currency-parameter" name="Currency Selection">

<option value="dollar">$</option>

<option value="pound">£</option>

<option value="euro">€</option>

</select>

<br /><label for="currency-parameter" style="color:#FFF;font-size:0.8em">Currency Selection</label><br />

</div>

<div style="margin:0 1em">

<input type="text" id="avg-partner-cpm" name="Average Partner CPM" /><br />

<label for="avg-partner-cpm" style="color:#FFF;font-size:0.8em">Average Partner CPM</label>

</div>

<div style="margin:0 3em">

<input type="text" id="new-viewability-parameter" name="% Viewability Estimate Offset" /><br />

<label for="new-viewability-parameter" style="color:#FFF;font-size:0.8em">% Viewability Estimate Offset</label>

</div>

<div style="margin:0 7em">

<button name="Submit Selection" type="submit" value="cs">Calculate Savings

</button>

</div>

</div>

<table>

<div style="margin:0 1em">

<tr><td></td><td></td><td></td><td></td><td><label for="team-id" style="color:#FFF;font-size:0.8em">Team ID: </label></td>

<td><input type="number" id="team-id" name="Team ID" min="1" /></td>

<td></td><td><label for="campaign-id" style="color:#FFF;font-size:0.8em">Campaign ID: </label></td>

<td><input type="number" id="campaign-id" name="Campaign ID" /></td>

<td></td><td><label for="format-name" style="color:#FFF"><b>Format:</b></label></td>

<td>

<input type="checkbox" id="m-format-v" name="Format" value="Video" checked="checked" />

<label for="m-format-v" style="color:#FFF;font-size:0.8em">Video</label>  

<input type="checkbox" id="m-format-d" name="Format" value="Display" checked="checked" />

<label for="m-format-d" style="color:#FFF;font-size:0.8em">Display</label>

</td>

</tr>

</div>

</table>

</div>

</form>

You will have to make sure that your backend filters matchup to the name. The form of filters looks something like this. Hope this helps.

2 Likes
5

Hi Eric_Lyons,

thanks for you help. That worked for me!

6

This is great! Would you be able to give some examples of how to connect the backend filters to the form inputs?