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

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

     

     

6 Replies

Replies have been turned off for this discussion
  • 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