Forum Discussion

Silutions's avatar
Silutions
ETL
02-22-2022
Solved

Use of Conditions in BloX Column sets/columns

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 p...
Blox
  • harikm007's avatar
    harikm007
    02-25-2022

    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's avatar
Silutions
ETL
02-25-2022

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's avatar
harikm007
Data Warehouse
02-25-2022

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's avatar
    Silutions
    ETL
    02-25-2022

    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.