QS UX - Pushing Boundaries - BeautifyMe

[IVAN-FELIPE]

This post is about how to improve the UX of Qlik Sense with no code and no CSS expertise.

UX is what the user perceives when interacting with a product, Service or device.

If you do it right you retain the user, if not, you lose it and get a bad reputation.

UX is lived everywhere, restaurant, in the bank, subway,... of course also in web analytics.

A well-designed UX will go unnoticed, but a poorly designed one is hell.

Here are some intentional examples of bad UX:

Bad UX 1

Bad UX 2

Bad UX 3

Not always but sometimes CSS is necessary to improve the UX and get a high customizable app:

OK 1

Overlap buttons

OK 3

To avoid the definition of complex CSS code I propose to use this extension that allows a high customization through a visual and assisted interface.

Available through this link BeautifyMe  (contains a qvf example)

The extension is very intuitive and generates all the CSS code.

It can help to customize:

• Global settings
  • Like titles alignment
  • general object background
  • global font
  • ...
• Sheets
  • Background color (degree available)
  • Background image
  • Set default sheet when using mobile
  • ...
• Filter Panes
  • Change font
  • color
  • background
  • add icons
  • ...
• Text Object
  • Change background
  • Change size of each letter font
  • add effects
  • ...
• Button Object
  • Add shadows
  • transparency
  • ...
• Variable Input Object
  • Change the look
• Tables
  • Change the whole look
  • Allow bold, underline and italic
• Date Picker
  • Change the look and reorganize items
• Any Specific Chart or object
  • Custom elements by ID (assisted)
  • add effects
• Container
  • Customize active tabs
• Overlap objects
  • Overlap any object and preserve its position in any screen (except mobile)

You can work with the extension in QS Desktop, QSEoW or SaaS.

About support:

Although the extension is developed by a Qlik employee, it's not officially supported by Qlik.

It will be updated according to last SaaS version when possible and with no obligation.

Looking for an officially supported way to improve your look&feel ?

Once the work is done, you can copy the CSS code generated by the extension and just add it to a supported element like a Theme or MultiKPI object (using its property 'Styles').

CSS Output

Ivan Felipe

Master Principal Solution Architect

Qlik Iberia

[KWF_JKassing]

Hi Ivan, this looks very handy! Thank you. 

How do I import this into extensions in Sense Cloud? As the qvf is also into it? Just import the .zip completely?

Greetings, Johan

[IVAN-FELIPE]

Thanks JKassing!

You have to import separately the QVF example and the extension:

- Download the BeautifyMe Example.qvf https://github.com/iviasensio/BeautifyMe/blob/main/BeautifyMe%20Example.qvf

and import it from QCS hub, option Add new + Upload App

- Then download the full project in a ZIP format (you can exclude the QVF this time), and import it from the QCS management console-->extensions

Regards

[KWF_JKassing]

Thank you Ivan, works very well!

[glennvancauter]

Hi there, great extension, thanks! 

Question: Is it possible to use a @Import url("https://www.domain.com/style.css"); to retrieve an external CSS file?

Kind regards,

Glenn

[IVAN-FELIPE]

Hi Glenn

This is something achieveable, you can use native objects to do that.

The multiKPI object contains a Styles property that supports this '@imports'

And of course you can add this import to your Themes.

Regards

[glennvancauter]

Hi @IVAN-FELIPE ,

I've tried but it doesn't work for me. Do you have an example QVF that I can use?

Regards,

Glenn

[IVAN-FELIPE]

Hi Glenn

There is a qvf in Github, in the same repository where I placed the extension.

There is a comment in the instructions, be aware that there could be some conflcits with your themes, as themes also add CSS.

Try using no themes, just Qlik Sense Classic.

Finally, keep in mind that the extension is been maintained for QS SaaS.

Regards

[RafaelBarrios]

Thanks @IVAN-FELIPE 

I'm trying it out after you showed it last week during a presentation and it's really great.
Eres un CRACK !!!!!

[itsmeanay]

@IVAN-FELIPE  is there a possibility to add tooltip or text on hover feature with any CSS?