How to update ViewBox data when used as the list's detail view (onClick event)?

[Maroine81]

Hi,

For a better understanding of what I'm trying to achieve, please refer to this video Using a ViewBox as the List's Detail View.

So instead of using a hyperlink, It'd be better, for usability purposes, to click anywhere on the row to view the data related to that row in the ViewBox.

I tried the following:

In the onClick event in the list properties I added this

var vb = {dialog.object}.getControl('viewbox1');
var rowNum = this.selection[0];

vb.populate(this.selectionData[rowNum]);

and on the viewbox I have its data source coming from the list and in the viewbox layout i am showing only one field for testing purposes.

When I run the component & click on the first row in the list, the viewbox shows the associated data to that first row just like when I click on the hyperlink, but when I click the other rows in the list, it doesn't.

I thought about using the list as a viewbox as well but I can't for so many reasons...

Any ideas about how to update the associated data in the viewbox by clicking on any row in the list?

Thanks

[Davidk]

Re: How to update ViewBox data when used as the list's detail view (onClick event)?

You always want selectionData[0] because that's the currently selected row. By passing in a number other than 0 in rowNum, Alpha believes you're set up for multiple selections... and that you're going after the data, for example, in the 2nd selected row by using selectionData[1]. This results in a Javascript error which you'll see if you inspect the page.

You only want to pass in the currently selected data... and you don't need to go after the row number to do that... it's always 0 because your List is set up for a single selection. The row number is the row number of the row(s) selected. For single row selection it's always 0... for multiple row selection it's zero based for the number of rows you've selected in the List control.

This code will give you what you want...

{dialog.object}.panelSetActive('PANELCARD_2');

var vb = {dialog.object}.getControl('viewbox1');
vb.populate(this.selectionData[0]);

[Maroine81]

Re: How to update ViewBox data when used as the list's detail view (onClick event)?

You only want to pass in the currently selected data... and you don't need to go after the row number to do that... it's always 0 because your List is set up for a single selection. The row number is the row number of the row(s) selected. For single row selection it's always 0... for multiple row selection it's zero based for the number of rows you've selected in the List control.

I understand now how it is set up, I thought I had to go for the row number to get the data for the selected row. Thanks David
It's working as expected & I'm hoping that you'd help me on this last simple yet complicated css rendering problem. I'd very much appreciate it.

When I do a refresh of the viewBox on the onBlur event of a field in the list detail view (yes I do have a detail view for the list to edit the data besides the viewbox) the viewbox refreshes & the class that is applied for the selected item doesn't render.

So I looked up the documentation & found this method: A5.ViewBox.setElementClass Method

A5.ViewBox.setElementClass(value, className) where value is a string defined in the a5-value attribute for the element & the className is the CSS className to set the element's class.

In the viewBox Layout, I have this:

<div class="[theme:listBox.base.item.className|{dialog.style}ListItem]"  a5-item="_AARow:AARow_attribute" a5-value="{Name}"><div>
{Name}
</div></div>

In the Selected class name I have this:

[theme:listBox.base.item.selectedClassName|{dialog.style}ListItemSelected]

I'm just testing here with red color. I think I'm referencing the viewbox item value wrong from the onBlur event of the field in the detail view.

var lObj = {dialog.object}.getControl('list1');
lObj.updateListFromUXControls();
var vb1 = {dialog.object}.getControl('viewbox1');
vb1.setElementClass('{Name}','red');
vb1.refresh();

Basically the goal is be able to dynamically render HTML and css of the viewbox item as edits are made to the list's detail view, since more items will be added to the viewbox & that each item has its own html & css class.

[Davidk]

Re: How to update ViewBox data when used as the list's detail view (onClick event)?

These things get a tiny bit complex because there are bits and pieces in a few places. If you could post a sample UX, static data, with your Detail View and Viewbox with code in place, then I'll have a look.

However, I think some of your stuff isn't quite right. The ViewBox layout has a5-value="{Name}"... but this value gets replaced with the actual name. So, you're trying to perform a setElementClass on "John"... not Name. I believe it should be a5-value="Name".

Next, .setElementClass replaces the class for Name... but the existing class is what makes the ViewBox look pretty. Unless you have already added your class named "red" to the item, then maybe use .addElementClass. Using the "Alpha" style... this works for changing Name red...

<div class="[theme:listBox.base.item.className|{dialog.style}ListItem]"  a5-item="_AARow:AARow_attribute" a5-value="Name"><div>
{Name}
</div></div>

var vb1 = {dialog.object}.getControl('VIEWBOX1');
vb1.setElementClass('Name','listItem red');

And ViewBox1 CSS of...

.red {
color:#ff0000;
}

Notice also there is no refresh on the viewbox as that would just change everything back. I have a feeling that, overall, this isn't really what you want to do... but it does address some issues you have. I'm not sure how to pick up the existing class for the .setElementClass method... so I just checked to see how it rendered and then added it into the method.

[Maroine81]

Re: How to update ViewBox data when used as the list's detail view (onClick event)?

Since I'm trying to dynamically generate HTML for different field types, I found that the layout in the viewBox example (iOS style settings screen - shows a switch checkbox radiobutton in a list) with some client side templating is the closest to the functionality I'm aiming to obtain. Each field type (item) has its own class css html settings.

I will work on this later since I moved to working on something else.

Thank you David for your time & effort