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

Earn a 50% discount on the DP-600 certification exam by completing the Fabric 30 Days to Learn It challenge.

Reply
Andrew_lu1933
Regular Visitor

Use Html content<input type=radio> visual to build a slicer, how to get slicer function。

In power bi desktop,  we can't setting the input radio color, I want to use html <input type=radio> and css to get custom style.

it display the custom select element, but how can get the slicer function.

 

Month = 
AddColumns(
    values('Date'[Month]),
    "Html_month",
    var month_r = Format([Month],"Mmm-yy")
    var before_str = "<label><input type='radio' name='month'><span>"
    var after_str = "</span></label>"
    return before_str & month_r & after_str
)
css_month = "<style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            label {
                position: relative;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
            }
            label>span{
                margin-left: 12px;color:#FFEFD5;
            }

            input[type=radio] {
                visibility: hidden;
                height: 30px;
                margin-left: .2rem;

            }

            input[type=radio]:checked::before {
                background: #2957FF;
                visibility: visible;
            }

            input[type=radio]::before {
                content: '';
                position: absolute;
                margin-top: 15px;
                margin-left: 2px;
                height: 16px;
                width: 16px;
                border-radius: 50%;
                background-color: rgba(152,251,152,0.2);
                visibility: visible;
                z-index: 2;
            }

            input[type=radio]::after {
                content: '';
                position: absolute;
                height: 20px;
                width: 20px;
                margin-top: 13px;
                border-radius: 50%;
                background-color: transparent;
                border: 2px solid #FFF8DC;
                visibility: visible;
                z-index: -1;
            }
        </style>"

 

 

Andrew_lu1933_0-1675836685222.png

 

 

2 REPLIES 2
dm-p
Super User
Super User

Hi @Andrew_lu1933,

HTML Content does not support JavaScript, or include any of the JavaScript APIs necessary for building custom visuals using the TypeScript SDK.

If you're looking to build a functional slicer, please refer to the documentation for developing a custom visual here. Once you are familiar with the concepts required, you can look at setting up and using the filter API to ensure that your visual works as a slicer.

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




KerKol
Super User
Super User

Frequently Asked Questions | HTML Content - Custom Visual for Power BI (html-content.com)

 





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!




Helpful resources

Announcements
RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

MayPowerBICarousel

Fabric Monthly Update - May 2024

Check out the May 2024 Fabric update to learn about new features.

LearnSurvey

Fabric certifications survey

Certification feedback opportunity for the community.