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

     

     

harikm007's avatar
harikm007
Data Warehouse
02-24-2022

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

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

    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'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