topic Sheet Background using Multi KPI - Styles CSS in App Development

Sheet Background using Multi KPI - Styles CSS

MatthewSmith — Fri, 15 Aug 2025 13:24:52 GMT

I am currently using the Multi KPI visualization to set the background on some sheets using it's styles (CSS) function.

I am using this to create a section of the top of the sheet which covers the width of the screen.

This object is now being deprecated so I am looking for an alternative.

I could use a layout container but this would leave gaps around the edges.

Is my only option to create a background image or is there another solution to achieve this?

For reference this is an example of the code I am using to set the colours:

#grid-wrap.sheet-grid {
background: linear-gradient(180deg,
rgba(0,63,107,100) 0%,
rgba(0,63,107,100) 8.5%,
rgba(255,255,255,100) 8.5%,
rgba(255,255,255,100) 30%,
rgba(0,63,107,100) 100%);

Thanks

Re: Sheet Background using Multi KPI - Styles CSS

Amit_Prajapati — Fri, 22 Aug 2025 04:36:36 GMT

Since the KPI object is being deprecated, we no longer have the option to apply additional CSS properties directly through any frontend object. As a result, the recommended approach is to develop a custom theme to incorporate custom CSS or UI design elements.

Qlik has also advised using custom themes, especially with the deprecation of the Multi KPI object, to maintain design flexibility and visual consistency.

https://help.qlik.com/en-US/sense-developer/May2023/Subsystems/Extensions/Content/Sense_Extensions/custom-themes-introduction.htm

Re: Sheet Background using Multi KPI - Styles CSS

MatthewSmith — Wed, 03 Sep 2025 09:21:40 GMT

For anyone interested CSS Styling is now available within sheet properties under Styling>Custom styles.

The top line of code is slightly different as shown below.

.qv-panel-sheet {
background: linear-gradient(180deg,
rgba(0,63,107,100) 0%,
rgba(0,63,107,100) 8.5%,
rgba(255,255,255,100) 8.5%,
rgba(255,255,255,100) 30%,
rgba(0,63,107,100) 100%);

}