Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Join the FabCon + SQLCon recap series. Up next: Power BI, Real-Time Intelligence, IQ and AI, and Data Factory take center stage. All sessions are available on-demand after the live show. Register now

Reply
Fanco
New Member

Why conditional formatting UI is blank

Hi there,

 

I am buliding my custom visual and currently having the issus that the UI of conditional formatting is blank when using fillRule of capabilities value.

 

Have tested ColorPicker formatting property way with Fill capabilities value and it works totally fine.

 

Can't find any information related fillRule. Don't know which part is wrong. 

 

My code is below:

capabilities.json

 

...
    "objects": {
        "dataColor": {
            "displayName": "Data Colors",
            "properties": {
                "fillRule": {
                    "displayName": "Gradient Colors",
                    "type": {
                        "fillRule": {
                            "linearGradient2": {
                                "max": {
                                    "color": "#00ff00",
                                    "value": 100
                                },
                                "min": {
                                    "color": "#ff0000",
                                    "value": 0
                                },
                                "nullColoringStrategy": {}
                            },
                            "linearGradient3": {
                                "max": {
                                    "color": "#00ff00",
                                    "value": 100
                                },
                                "mid": {
                                    "color": "#00ff00",
                                    "value": 50
                                },
                                "min": {
                                    "color": "#ff0000",
                                    "value": 0
                                },
                                "nullColoringStrategy": {}
                            }
                        }
                    }
                }
            }
        }
    }
...

 

 

setting.ts

 

···
class DataPointCardSettings extends Card {
    fill = new GradientBar({
        name: "fillRule",
        displayName: "Font color",
        value: {value:""},
        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule,
        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals)
    })

    name: string = "dataColor";
    displayName: string = "Data color";
    slices: Array<Slice> = [this.fill];
}
···

 

 

Snipaste_2024-09-17_18-40-54.jpg

1 ACCEPTED SOLUTION
Anonymous
Not applicable

Hi, @Fanco 

Regarding the issue you raised, my solution is as follows:

1.Firstly, for the JSON part, you can refer to my code below. This code was obtained through third-party software, and I hope it will be helpful to you:

"objects": {
      "values": [
        {
          "properties": {
            "backColor": {
              "solid": {
                "color": {
                  "expr": {
                    "FillRule": {
                      "Input": {
                        "SelectRef": {
                          "ExpressionName": "Sum(Table.Column2)"
                        }
                      },
                      "FillRule": {
                        "linearGradient2": {
                          "min": {
                            "color": {
                              "Literal": {
                                "Value": "'minColor'"
                              }
                            }
                          },
                          "max": {
                            "color": {
                              "Literal": {
                                "Value": "'maxColor'"
                              }
                            }
                          },
                          "nullColoringStrategy": {
                            "strategy": {
                              "Literal": {
                                "Value": "'asZero'"
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

For detailed information, please refer to the following blog and official documentation:

Power BI Reporting Best Practices Analyzer - Microsoft Fabric Community

https://learn.microsoft.com/en-us/power-bi/developer/visuals/objects-properties?tabs=getFormattingMo...

 

2.Secondly, for the settings part, you can refer to forum questions similar to yours. Below are screenshots of the relevant content:

vlinyulumsft_0-1726726706522.png

For detailed information, please refer to the following links:

Solved: Re: Custom Visual - TextInput in Visual Format Set... - Microsoft Fabric Community


Of course, if you have any new ideas, you are welcome to contact us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

1 REPLY 1
Anonymous
Not applicable

Hi, @Fanco 

Regarding the issue you raised, my solution is as follows:

1.Firstly, for the JSON part, you can refer to my code below. This code was obtained through third-party software, and I hope it will be helpful to you:

"objects": {
      "values": [
        {
          "properties": {
            "backColor": {
              "solid": {
                "color": {
                  "expr": {
                    "FillRule": {
                      "Input": {
                        "SelectRef": {
                          "ExpressionName": "Sum(Table.Column2)"
                        }
                      },
                      "FillRule": {
                        "linearGradient2": {
                          "min": {
                            "color": {
                              "Literal": {
                                "Value": "'minColor'"
                              }
                            }
                          },
                          "max": {
                            "color": {
                              "Literal": {
                                "Value": "'maxColor'"
                              }
                            }
                          },
                          "nullColoringStrategy": {
                            "strategy": {
                              "Literal": {
                                "Value": "'asZero'"
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

For detailed information, please refer to the following blog and official documentation:

Power BI Reporting Best Practices Analyzer - Microsoft Fabric Community

https://learn.microsoft.com/en-us/power-bi/developer/visuals/objects-properties?tabs=getFormattingMo...

 

2.Secondly, for the settings part, you can refer to forum questions similar to yours. Below are screenshots of the relevant content:

vlinyulumsft_0-1726726706522.png

For detailed information, please refer to the following links:

Solved: Re: Custom Visual - TextInput in Visual Format Set... - Microsoft Fabric Community


Of course, if you have any new ideas, you are welcome to contact us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
April Power BI Update Carousel

Power BI Monthly Update - April 2026

Check out the April 2026 Power BI update to learn about new features.

New to Fabric survey Carousel

New to Fabric Survey

If you have recently started exploring Fabric, we'd love to hear how it's going. Your feedback can help with product improvements.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

FabCon and SQLCon Highlights Carousel

FabCon &SQLCon Highlights

Experience the highlights from FabCon & SQLCon, available live and on-demand starting April 14th.