Enabling the native 'Styling' panel in an extension

[André]

Hi devs,

Is there a way to enable the native chart styling option/panel in an extension?

I can set the object background using
element.closest('.qv-inner-object').css('background-color', 'transparent');
here set to transparent, but can be any color either hard-coded or set via color-picker in a custom accordion item, but would be good if we could access the native styling panel? Is it possible?

Cheers!

[BPiotrowski]

Hi @André,

So as the documentation says:

When you reuse the Appearance section, it includes the following:

• General: Includes settings for Title, Subtitle and Footnote
• Presentation (only available for visualizations that have more than one dimension)
• Colors and legend (only available in some types of visualizations)
• X-axis (only available in some types of visualizations)
• Y-axis (only available in some types of visualizations)

More informations under these links:

https://qlik.dev/extend/property-panel-basics/extensions-reusing-properties/

https://qlik.dev/extend/property-panel-basics/define-properties/custom-color-picker-properties/

[André]

Thanks @BPiotrowski! How does it work for something like the native KPI object that only takes 2 measures, and no dimensions? 🤔

[BPiotrowski]

The Presentation options will not show up as in your case and you need to use custom color picker from second link to change color of extension.

[André]

Ah that's a bummer - thanks for your input! Speaking of the color-picker - do you know, is there a property I need to pass the component to enable the alpha slider?

I.e. this is the standard one

But I'd like to also have the alpha control?

[BPiotrowski]

So there is no easy way to achive that I haven't found a way to do that in easy way unfortunetly, you can share if you will discover better way 🙂

You might want to use slider:

https://qlik.dev/extend/property-panel-basics/define-properties/slider-properties/

with custom css so it will look similar than combine alpha with rgb before $element.css in paint.

or you can use type integer, predefine colors with alpha.

These are the options I see.