cancel
Showing results for 
Search instead for 
Did you mean: 

Use of Conditions in BloX

CDavidOrr
7 - Data Storage
7 - Data Storage

I am attempting to use Conditions in a BloX widget.  Unfortunately, the documentation for this feature is not very thorough and doesn't cover my use case.

I am building a table.  Each row has two columns, a label and a value.  For each row in the table, I want to check the value and if it is below a certain amount, I want to hide the complete row.  Basically, I want to set the style to "Display": "none" for that item in the container.

In the attached snip, I want to hide the item that begins on line 41 because CountTotal2017 has a negative value.

I have searched for documentation on using Conditions in BloX and pretty much everywhere it gives the same basic example of changing a text's color and changing which image to display.  If anyone knows how to accomplish what I need, or can point me to more thorough documentation on the feature, I would greatly appreciate a reply.

TIA.

1 ACCEPTED SOLUTION

harikm007
9 - Travel Pro
9 - Travel Pro

Hi @CDavidOrr ,

You can use javascript in Blox (inside <script> tag). For example see line 4 and 5 below.

 

 "columns": [
                        {
                            "type": "TextBlock",
                            "class": "Count2017",
                            "text": "2️0️1️7️<script>if({panel:Count2017}<0){$('.Count2017').parent().hide()} </script>",
                            "horizontalAlignment": "center",
                            "style": {
                                "width": "75px",
                                "border-top": "solid",
                                "border-bottom": "solid",
                                "border-left": "solid",
                                "border-right": "solid",
                                "border-width": "2px"
                            }
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:count2017}",
                            "horizontalAlignment": "center",
                            "style": {
                                "width": "175px",
                                "border-top": "solid",
                                "border-bottom": "solid",
                                "border-left": "solid",
                                "border-right": "solid",
                                "border-width": "2px"
                            }
                        }
                    ]

 

 

View solution in original post

2 REPLIES 2

harikm007
9 - Travel Pro
9 - Travel Pro

Hi @CDavidOrr ,

You can use javascript in Blox (inside <script> tag). For example see line 4 and 5 below.

 

 "columns": [
                        {
                            "type": "TextBlock",
                            "class": "Count2017",
                            "text": "2️0️1️7️<script>if({panel:Count2017}<0){$('.Count2017').parent().hide()} </script>",
                            "horizontalAlignment": "center",
                            "style": {
                                "width": "75px",
                                "border-top": "solid",
                                "border-bottom": "solid",
                                "border-left": "solid",
                                "border-right": "solid",
                                "border-width": "2px"
                            }
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:count2017}",
                            "horizontalAlignment": "center",
                            "style": {
                                "width": "175px",
                                "border-top": "solid",
                                "border-bottom": "solid",
                                "border-left": "solid",
                                "border-right": "solid",
                                "border-width": "2px"
                            }
                        }
                    ]

 

 

View solution in original post

This is a nice, localized, solution.  Thanks.

I ended up taking a similar approach by setting the class name of each item that contained a value to a single name.  Then in the script for the widget, I checked each element's value that had that class name and conditionally hid the parent element.