Use of Conditions in BloX Column sets/columns

[Silutions]

I would like to be able to filter BloX column Panel Items & Values based on a conditional.  In my use case we have something similar to the mockup below:

The goal is to be able to filter the panel values in each column in the column set to a specific item.  Column 1 would show the photo of the top ranked breed, the name of that breed and the number of breeders.  Column 2 would show the photo of the 2nd ranked breed, the name of that breed and the number of breeders.  This would continue for the 4 top breeds.  It's straight forward to rank the number of breeders by breed in a widget calc, but it's not clear to me how to apply that to show the data about that breed in each column.

The attached JSON file from BloX shows the first part of the column set.

Thanks for your assistance with this -  Jim

[harikm007]

@Silutions ,

Please check if this blox JSON works for you:

{
    "style": ".content{counter-reset:section} .breedrank::before {counter-increment: section;  content: '#' counter(section) ' Breeder';} .breeditems{float:left; border:2px solid grey;margin:1%}",
    "showCarousel": false,
    "body": [
        {
            "type": "Container",
            "width": "22%",
            "class": "breeditems",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "class": "breedrank",
                    "color": "default",
                    "text": ""
                },
                {
                    "type": "Image",
                    "url": "{panel:BreedImageURL}",
                    "spacing": "small",
                    "horizontalAlignment": "center",
                    "size": "small"
                },
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "color": "default",
                    "text": "{panel:BreedTitle}"
                },
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "color": "default",
                    "text": "{panel:#Breeders} units"
                }
            ]
        }
    ]
}

The result will looks like this (it will show values and text when you add right panels(BreedTitle, Breeders, BreedImageURL) to widget):

-Hari

[Silutions]

Hari,

Great  work.  Very elegant.  Looking back I didn't do as good a job my requirements definition as I should have.  I have constructed a new version in BloX around products (my exact use case).  My goal is:

Without the carousel of course.  I want to have Panel data in the title section as well.  I tried putting it in the same container (nothing appears) and putting in a different container (your style code no longer works) without success.  

Also, just using your code stand alone (after substituting the appropriate class name, my panel names, etc.), I'm getting a strange effect.  See screen shot below:

I've played with the width tag with no joy.  Since I ultimately want 6 items, I set it to 15% with the result above.  Even if I have a full width widget and filter to 4 items instead of 6,  I still have this marching down the page effect.  This work is on Linux.  I just tried this on my Windows instance and don't see this march down the page effect.  Did I mess something up in the edits I made to your code and just can't see it?   I've attached the JSON for the above.

Thanks and regard, Jim

[harikm007]

@Silutions ,

I tried your JSON in Linux instance and its working fine. Please check if Blox versions are same on your windows and linux instance.

Here is what I'm seeing:

-Hari

[Silutions]

Hari,

I agree.  On my Windows instance using Blox v2.1.22 it works fine.  On the Linux production instance using BloX v2.1.30 is the one having the issue.

Any solution for adding my title info above your code?

Top 6 Products in {panel:xxxx}

{panel:xxx} Units: {panel:yyy} of Total Sold

{panel:mmmm} of Total Net Sales

I've tried a number of different approaches including moving your script code into the container and adding text blocks in a separate container above, etc.  Either the text blocks don't appear or your script code doesn't work.

Thanks, Jim

[harikm007 · Accepted solution]

@Silutions ,

Please use this JSON:

{
    "style": ".content{counter-reset:section} .casesrank::before {counter-increment: section;  content: 'Top ' counter(section) ' Product';} .productitems{float:left; border:2px solid grey}",
    "showCarousel": false,
    "body": [
        {
            "type": "Container",
            "class": "titlearea",
            "width": "100%",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "left",
                    "color": "default",
                    "text": "Top 6 Products in {panel:xxxx}"
                },
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "left",
                    "color": "default",
                    "text": "{panel:xxx} Units: {panel:yyy} of Total Sold"
                },
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "left",
                    "color": "default",
                    "text": "{panel:mmmm} of Total Net Sales"
                },
                {
                    "type": "TextBlock",
                    "spacing":"small"
                }
            ]
        },
        {
            "type": "Container",
            "width": "16%",
            "class": "productitems",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "class": "casesrank",
                    "color": "default",
                    "text": ""
                },
                {
                    "type": "Image",
                    "url": "{panel:ProductImageURL}",
                    "spacing": "small",
                    "horizontalAlignment": "center",
                    "size": "small"
                },
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "color": "default",
                    "text": "{panel:ProductTitle}"
                },
                {
                    "type": "TextBlock",
                    "size": "light",
                    "weight": "bold",
                    "horizontalAlignment": "center",
                    "spacing": "small",
                    "color": "default",
                    "text": "{panel:CasesSold} units"
                }
            ]
        }
    ]
}

And add below widget script to remove all containers except first:

widget.on('ready', function(se, ev){
	$("div.titlearea").not(":first").hide();
})

Result:

-Hari

[Silutions]

Hari,

Worked like a champ.  I still have the marching down the page issue in the Production version which is L2022.1.  Not in my Windows instance.  I also checked in my Linux VM which is L2021.10.  Works fine there.  I can only hope that when we upgrade Prod to L2022.3 next month that the issue will be resolved.

Thanks again for your help.