Viewbox as a "list" - how to sort and search

[aprescott]

Hello all (and likely peteconway as he is the resident Viewbox expert)

I am playing with/learning Viewboxes and am attempting to replace some list controls in a UX with a viewbox to improve speed and just improve my overall knowledge.

Is there a way to emulate list behaviors such as Sorting by clicking a column, search/filter "list". These two functions would seem to be the only things keeping my UX from running exactly as before when it had lists.

Any help, advice, instruction would be greatly appreciated!

[madtowng]

I haven't tried sorting, simply because the search does so good for me.
Feel free to check out https://z5.youshould-seethis.com/vbproject/testdl.a5w.

Clicking the Get Started button will take you to a list of youtube videos posted by Alpha Anywhere and a few people helping with various
other development topics. The search feature is fast, but that's because it does not make a callback to the server.

If that's at least part of the process you're looking for, I will make it available to you(I have to go back and figure it out as I've
been stumped for a few weeks by the downloading from AWS S3 not working as expected/desired).

[aprescott]

Thanks Gregg, I'd say the search is definitely the most important part. Sorting is just a "would be nice" but if I could get a search working it'd be gold.

[peteconway]

Are your wanting to search Static Data (a VB populated on an initial load) or Dynamic (refreshed data base) data (preferred)?
Pete

[aprescott]

I think in most cases static would suffice, as the typical use case would be looking up a record previous entered to then open an edit panel with a "detail view". Happy to learn either method though.

[madtowng]

This is my code to search a viewbox.

function populateVB(datacontrol,vbcontrol,nextp){
//debugger;

var showme = {dialog.object}.getValue(datacontrol.toUpperCase());
//alert(showme);
var vbObj = {dialog.object}.getControl(vbcontrol);
var mhcbOBJ = {dialog.object}.getControl('CONTROLBAR_8')
var vbData = JSON.parse('[' + {dialog.object}.getValue(datacontrol) + ']');
vbObj.populate(vbData);
vbObj.setState({'mastercount': vbData.length});
{dialog.object}.setValue('fullcount',vbData.length);
{dialog.object}.stateInfo['allvideos'] = vbData.length;
//vbObj.refresh();
//$svs('mastercount',vbData.length);
mhcbOBJ.update('vidcount',vbData.length);
{dialog.object}.panelSetActive(nextp,false);
}

function jssearch(searchcontrol,whattosearch){
//debugger;
var rawterm = {dialog.object}.getValue('searchbox');
var rawsource = {dialog.object}.getValue('searchchan');
var filtersource = rawsource.length;
var searchObj
var searchterm = rawterm.toLowerCase();
//alert(searchterm);
var tracker = 0;

if(typeof(whattosearch) == 'string'){
searchObj = JSON.parse ('[' + {dialog.object}.getValue(whattosearch) + ']');
}
let searchitems = [];

if(filtersource < 1){
searchObj.forEach(s => {if(s.videotitle.toLowerCase().indexOf(searchterm) != -1 || s.videodescription.toLowerCase().indexOf(searchterm) != -1 || s.keywords.toLowerCase().indexOf(searchterm) != -1 )

searchitems.push(s)
})
} else {
searchObj.forEach(s => {if(s.channeltitle.toLowerCase().indexOf(rawsource) != -1 && (s.videotitle.toLowerCase().indexOf(searchterm) != -1 || s.videodescription.toLowerCase().indexOf(searchterm) != -1 || s.keywords.toLowerCase().indexOf(searchterm) != -1 ))

searchitems.push(s)
})
}
//

//
{dialog.object}.setValue('filteredcount',searchitems.length);
{dialog.object}.setValue('activefilter',searchterm);
var output = {dialog.Object}.getControl('vbSearchResults');
var searchCB = {dialog.Object}.getControl('RESULTS_HEADER_CB');
searchCB.update('filteredcount',searchitems.length);
searchCB.update('searchterm',searchterm);
output.populate(searchitems);
{dialog.object}.stateInfo['filteredvideos'] = vbData.length;
output.refresh();
}

[peteconway]

Well that's a lot of code ..

This is my solution for the Viewbox search..

function setVBStateVariable(){

// Set a viewboxs state variable from the UX's clientside values from a UX control (or a UX state variable) to be visible in the Viewbox as a filter, a conditional argument, or something to display.


var vb = {dialog.object}.getControl('aprescott'); // get the Viewboxame and assign to vb
var cv = {dialog.object}.stateInfo['controlValue']; // get the UX controls value and assign to cv
var tempObj = cv ;

vb.setState({'filter': tempObj}); // add or update the state variable in the viewbox vb.setState({'filter': tempObj});
vb.refresh();
}

How to Search - let me know if this (video) is what you are trying to do and I'll do the how to and sample component. The sample is ideal for static or database population methods, where callbacks are not required for the search like when off-line..

https://www.screencast.com/t/vHUkOGHLjr

[sambre]

Hi Peter

How does this code filter the view box?

[peteconway]

Well its late in the night here so I will go over it now sow it's clear..no need for a video: The reason I didn't do anymore on this is the person who wanted help - didn't reply.
Set a viewboxs state variable from the UX's clientside values from a UX control (or a UX state variable) to be visible in the Viewbox as a filter, a conditional argument, or something to display.


var vb = {dialog.object}.getControl('aprescott'); // get the Viewboxame and assign to vb this is the viewbox
var cv = {dialog.object}.stateInfo['controlValue']; // get the UX controls value and assign to cv this is a UX state variable in the UX that has the search info
var tempObj = cv ; remember this is a pointer to the viewbox we are wanting to filter

vb.setState({'filter': tempObj}); // add or update the state variable in the viewbox vb.setState({'filter': tempObj}); this line inserts the search info into the viewbox as a viewbox state variable.
vb.refresh(); now I have refreshed the viewbox with to added a control- it has a value like Smith or UK.

IN the Viewbox layout you can see we now have access to the search info as it's in the state variable I inserted called filter

Once it's inserted the viewbox template can use it like below in a if statement, the possibilities are endless, keeping in-mind you can have as many viewbox state vars and multiple layouts as you want.

The search button does this..

{dialog.Object}.setValue('VideoCount',0);
{dialog.object}.stateInfo['controlValue'] = this.data.SearchItem;
setVBStateVariable();

The clear button does this..
{dialog.Object}.setValue('VideoCount',0);
var cbObj = {dialog.object}.getControl('CONTROLBAR_APRESCOTT')
cbObj.update('SearchItem','');
{dialog.object}.stateInfo['controlValue'] = this.data.SearchItem;
setVBStateVariable();

{*root}
{*header}
<div class="[theme:listBox.base.columnLayout.header.className]">
<div style="display: table; width: 100%;">
<div style="display: table-cell; width: 40%; vertical-align: left;">
<div class="[theme:listBox.base.columnLayout.header.item.className]">Contact Name</div>
</div>
<div style="display: table-cell; width: 20%; vertical-align: left;">
<div class="[theme:listBox.base.columnLayout.header.item.className]">Company Name</div>
</div>
<div style="display: table-cell; width: 20%; vertical-align: left;">
<div class="[theme:listBox.base.columnLayout.header.item.className]">City</div>
</div>
<div style="display: table-cell; width: 20%; vertical-align: left; ">
<div class="[theme:listBox.base.columnLayout.header.item.className]">Country</div>
</div>
</div>
</div>
{/*header}
{*if [temp].state.filter == 'All' || Country.toLowerCase().includes([temp].state.filter) || ContactName.toLowerCase().includes([temp].state.filter.toLowerCase()) || CompanyName.includes([temp].state.filter) || City.toLowerCase().includes([temp].state.filter.toLowerCase())}
<div class="[theme:listBox.base.item.className]" a5-item="row" a5-value="{[count]}">
<div style="display: table; width: 100%;">
<div style="display: table-cell; width: 40%; vertical-align: left;">
<div class="[theme:listBox.base.columnLayout.header.item.className]">{ContactName}</div>
</div>
<div style="display: table-cell; width: 20%; vertical-align: left;">
<div class="[theme:listBox.base.columnLayout.header.item.className]">{CompanyName}</div>
</div>
<div style="display: table-cell; width: 20%; vertical-align: left; ">
<div class="[theme:listBox.base.columnLayout.header.item.className]">{City}</div>
</div>
<div style="display: table-cell; width: 20%; vertical-align: left;">
<div class="[theme:listBox.base.columnLayout.header.item.className]">{Country}</div>
</div>
</div>
</div>
{*endif}
{/*root}

And that's it - I've added the component so you expand on what I've presented. The viewbox is by far the best way to produce high quality, low overhead, xbasic and Javascript Action -free applications in your builds.
Also I'm available for selected consults and mentoring if any wants to learn. Just PM me.

Pete

[sambre]

Thanks for the explanation.

[peteconway]

Cheers

[aprescott]

Sorry everyone - I got called into a week of jury duty and now am trying to get my head above water after missing a week of work. Going to take a look at everything suggested here and give it a whirl. Thanks to everyone for their suggestions!

[peteconway]

Cheers

[aprescott]

peteconway - works like a dream. Perfect. Thanks so much.

[peteconway]

Good. I'm glad you have certainly had your battles.