event handling to manipulate input text
I've created a report with an onscreen keyboard. (see attached image.) The OSK is 27 buttons with a text input box. When the user enters text into the box, the data table below the text input box (not shown) gets narrowed down to results depending on what the user types.
This part works if I click in the text box and start typing. (I did this by adding a compare filter to the data table and an "oninput" event listener and Action.refreshelement to the text input box, in case anyone wonders.)
The part I need help with is: how to I add text to the input box when someone clicks one of the letter buttons? Do I have to do this in javascript and include the javascript code into the report? Or is there a native Logi way using Logi report elements to do it?
The buttons would get an "onclick" event listener added to them and then @Request.inputName~ would add a character to the string value depending on which lettered button is clicked. Something like: @Request.inputName~ += 'A' if the A button is pressed and then refresh the text input box.
That's as far as I can get with this though.
-
Doing this via an Action.Refresh of the DataTable is VERY expensive with regards to processing, however, If you are using Logi's table pagination this might be the only approach. Basically with every keystroke you are telling Logi to re-render the datatable to filter the results.
If you are already showing all of the rows of data and then filtering it based on the user's input, it would be more performant to do this client side with javascript or jquery.
To implement your on-screen keyboard each key will not only have to update the input control but also trigger a keyup (which has to match the event on your input text).
I'm providing you with a super simple jquery POC that highlights or hides a row within the datatable based on a text input. Spaces within the filter string designate separate words. Buttons append their value to the input and trigger a keyup of the input text.<Report ID="newReport6">
<IncludeScriptFile IncludedScriptFile="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" />
<Body>
<IncludeHtml Html="<style>

table th, table td {
 font-size: 35px !important;
}

.highlight {
 color: Red !important;
}
input[type="checkbox"] {
 height: 25px;
 width: 25px;
 margin: 3px 3px 3px 4px !important;
}

</style>" />
<Button Caption="A" Class="alphabet h1" ID="btnA" />
<Button Caption="B" Class="alphabet h1" ID="btnB" />
<Button Caption="C" Class="alphabet h1" ID="btnC" />
<LineBreak LineCount="2" />
<InputText ID="inpHighlight">
<EventHandler DhtmlEvent="onkeyup">
<Action Javascript="filterTable('dt1');" Type="Javascript" />
</EventHandler>
</InputText>
<InputCheckbox Caption="Hide Rows" CheckedValue="true" Class="ThemeAlignBottom" DefaultValue="true" ID="inphiderows">
<EventHandler DhtmlEvent="onchange">
<Action Javascript="filterTable('dt1');" Type="Javascript" />
</EventHandler>
</InputCheckbox>
<DataTable ID="dt1">
<DataLayer Type="Static">
<StaticDataRow Col1="ABC" />
<StaticDataRow Col1="ACD" />
<StaticDataRow Col1="ADE" />
<StaticDataRow Col1="ABX" />
<StaticDataRow Col1="ASR" />
<StaticDataRow Col1="BCE" />
<StaticDataRow Col1="CDE" />
<StaticDataRow Col1="ACE" />
<StaticDataRow Col1="BAC" />
</DataLayer>
<DataTableColumn Header="Col1" ID="colCol1">
<Label Caption="@Data.Col1~" ID="lblCol1" />
<DataColumnSort DataColumn="Col1" />
</DataTableColumn>
</DataTable>
<IncludeScript IncludedScript="jQuery.expr[':'].contains = function(a, i, m) {
 return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

function filterTable(datatable) {
 $('#' + datatable + ' > tbody > tr').show();
 $('*').removeClass('highlight notfiltered');
 var searchtext = $('#inpHighlight').val();
 var searcharray = searchtext.trim().split(' '); 
 var searchcontains = '';
 if ($('#inphiderows').is(':checked')) {
 $('#' + datatable + ' > tbody > tr').hide();
 }
 if(searchtext.length > 0) {
 $.each(searcharray, function(index, value) {
 searchcontains = searchcontains + ':contains(\'' + value + '\')';
 });

 $('#' + datatable + ' > tbody td' + searchcontains).addClass('highlight');
 $('#' + datatable + ' > tbody > tr' + searchcontains).addClass('highlight');
 $('#' + datatable + ' > tbody > tr' + searchcontains).show();
 }
 else {
 $('#' + datatable + ' > tbody > tr' + searchcontains).show();
 }
}

$('.alphabet').on('click', function() {
 var character = $(this).val();
 var searchtext = $('#inpHighlight').val();
 var newtext = searchtext + character;
 $('#inpHighlight').val(newtext);
 $('#inpHighlight').trigger('keyup');
});
" />
</Body>
<ideTestParams />
</Report>
VISUI can further assist your customization needs.0 -
Thanks. This is very helpful. I can work with this.
What they want is a kiosk so when someone comes to the front desk, they can lookup an employee. The data table starts with all employees by default, so even though the refreshing is going on with each keystroke, at least it is only one initial database call.
1 -
Hi Scott
Here's a Logi only way of doing what you're looking for. Hope this is useful :-)
<?xml version="1.0" encoding="utf-8"?>
<Report
ID="Devnet.FilterAsTyping.Example"
>
<Body>
<Division
ID="InputSim"
>
<Division
ID="keyboard"
>
<Button
Caption="A"
ID="btnA"
>
<HtmlAttributeParams
style="display: flex; width: 1.5rem; height: 1.5rem; background-color: lightyellow; justify-content: center; align-items: center; border: 1px solid black; cursor: pointer; margin: 1rem 0.5rem;"
/>
<EventHandler
DhtmlEvent="onclick"
>
<Action
ElementID="DataTable, keyboard"
ID="artref1"
Type="RefreshElement"
>
<LinkParams
inpText="@Request.inpText~A"
/>
</Action>
</EventHandler>
</Button>
<Button
Caption="B"
ID="btnB"
>
<HtmlAttributeParams
style="display: flex; width: 1.5rem; height: 1.5rem; background-color: lightyellow; justify-content: center; align-items: center; border: 1px solid black; cursor: pointer; margin: 1rem 0.5rem;"
/>
<EventHandler
DhtmlEvent="onclick"
>
<Action
ElementID="DataTable, keyboard"
ID="artref2"
Type="RefreshElement"
>
<LinkParams
inpText="@Request.inpText~B"
/>
</Action>
</EventHandler>
</Button>
<HtmlAttributeParams
style="display: flex; flex-direction: row;"
/>
<Button
Caption="C"
ID="btnC"
>
<HtmlAttributeParams
style="display: flex; width: 1.5rem; height: 1.5rem; background-color: lightyellow; justify-content: center; align-items: center; border: 1px solid black; cursor: pointer; margin: 1rem 0.5rem;"
/>
<EventHandler
DhtmlEvent="onclick"
>
<Action
ElementID="DataTable, keyboard"
ID="artref3"
Type="RefreshElement"
>
<LinkParams
inpText="@Request.inpText~C"
/>
</Action>
</EventHandler>
</Button>
<Button
Caption="D"
ID="btnD"
>
<HtmlAttributeParams
style="display: flex; width: 1.5rem; height: 1.5rem; background-color: lightyellow; justify-content: center; align-items: center; border: 1px solid black; cursor: pointer; margin: 1rem 0.5rem;"
/>
<EventHandler
DhtmlEvent="onclick"
>
<Action
ElementID="DataTable, keyboard"
ID="artref4"
Type="RefreshElement"
>
<LinkParams
inpText="@Request.inpText~D"
/>
</Action>
</EventHandler>
</Button>
<Button
Caption="E"
ID="btnE"
>
<HtmlAttributeParams
style="display: flex; width: 1.5rem; height: 1.5rem; background-color: lightyellow; justify-content: center; align-items: center; border: 1px solid black; cursor: pointer; margin: 1rem 0.5rem;"
/>
<EventHandler
DhtmlEvent="onclick"
>
<Action
ElementID="DataTable, keyboard"
ID="artref5"
Type="RefreshElement"
>
<LinkParams
inpText="@Request.inpText~E"
/>
</Action>
</EventHandler>
</Button>
</Division>
</Division>
<Division
ID="DataTable"
>
<HtmlAttributeParams
style="margin-top: 3rem;"
/>
<Label
Caption="[inpText = @Request.inpText~]"
/>
<DataTable
ID="DataTable1"
SortArrows="True"
>
<DataLayer
ID="StaticDataLayer2"
Type="Static"
>
<StaticDataRow
Name="Able Smith"
Phone="111"
/>
<StaticDataRow
Name="Andrew Smith"
Phone="222"
/>
<StaticDataRow
Name="Brian Smith"
Phone="333"
/>
<StaticDataRow
Name="Brian Smith"
Phone="334"
/>
<StaticDataRow
Name="Brian Jones"
Phone="444"
/>
<StaticDataRow
Name="Charles Jones"
Phone="555"
/>
<StaticDataRow
Name="David Davison"
Phone="666"
/>
<StaticDataRow
Name="Eddie Eagle"
Phone="777"
/>
<StaticDataRow
Name="Zola Williams"
Phone="888"
/>
<ContainFilter
CaseSensitive="False"
ContainType="Contains"
DataColumn="Name"
ID="containFilter"
IncludeCondition=""@Request.inpText~" != """
SearchString="@Request.inpText~"
/>
</DataLayer>
<DataTableColumn
Header="Name"
ID="colName"
>
<Label
Caption="@Data.Name~"
ID="lblName"
/>
<DataColumnSort
DataColumn="Name"
/>
</DataTableColumn>
<DataTableColumn
Header="Phone"
ID="colPhone"
>
<Label
Caption="@Data.Phone~"
ID="lblPhone"
/>
<DataColumnSort
DataColumn="Phone"
DataType="Number"
/>
</DataTableColumn>
</DataTable>
</Division>
</Body>
<ideTestParams
inpText=""
/>
</Report>0
Please sign in to leave a comment.
Comments
3 comments