topic Re: Enabling the native 'Styling' panel in an extension in Integration, Extension & APIs

Enabling the native 'Styling' panel in an extension

André — Wed, 11 Jun 2025 04:34:03 GMT

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!

Re: Enabling the native 'Styling' panel in an extension

BPiotrowski — Wed, 11 Jun 2025 07:01:34 GMT

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)

Re: Enabling the native 'Styling' panel in an extension

André — Wed, 11 Jun 2025 11:21:21 GMT

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

Re: Enabling the native 'Styling' panel in an extension

BPiotrowski — Wed, 11 Jun 2025 12:11:49 GMT

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.

Re: Enabling the native 'Styling' panel in an extension

André — Wed, 11 Jun 2025 20:36:58 GMT

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?

Re: Enabling the native 'Styling' panel in an extension

BPiotrowski — Thu, 12 Jun 2025 08:09:32 GMT

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.

Re: Enabling the native 'Styling' panel in an extension

devan9876 — Sun, 15 Jun 2025 04:04:39 GMT

This isn't officially documented/released by qlik (although in my opinion it should be) but this is what I have found to work for rendering the Style section. Add this to your property panel declaration.

{ component: "styling-panel", ref: "components", chartTitle: "Title", subtitle: "Subtitle", translation: "LayerStyleEditor.component.styling", useGeneral: true, useBackground: true, defaultValue: [], items: {} }

Re: Enabling the native 'Styling' panel in an extension

devan9876 — Sun, 15 Jun 2025 04:13:52 GMT

This also works:

{ uses: "presentation", items:{} }

Re: Enabling the native 'Styling' panel in an extension

André — Sun, 15 Jun 2025 22:21:49 GMT

Works perfectly! Thank you 🙏

Re: Enabling the native 'Styling' panel in an extension

Dave_Channon — Tue, 17 Jun 2025 10:23:56 GMT

I'll take the feedback from this discussion into our upcoming review of the extension docs. If you have any further feedback with specific examples please feel free to DM them over!