QlikTip #39: Displaying Html content within QlikView (Minimalistic HtmlTextBox Object Extension)

Abstract and Motivation

By default QlikView’s TextBox object does not interpret Html content. It will just show the full Html code loaded into the TextBox object. This also does not change if you are using the WebClient (Ajax client or Mobile client).

This article shows how easy this can be achieved by creating a simple object extension.

Minimalistic HtmlTextBox Extension

I call this extension “Minimalistic HtmlTextBox Extension” because I could think of a lot of nice features which could be implemented for such a control. But for the first step let us just display Html …

After deploying the object extension to the appropriate directory create a new sheet object using the context menu in either the Ajax client or within the QlikView Desktop (using WebView):

Just drag and drop this object type to your existing sheet.
The next step is easy:

  • Either enter a static string containing the Html
  • or define a field in your data modell into which you have loaded your Html content from any datasource.

Example static string:


='<b>This is the header</b><br/><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>'

This will result into:

Example using a field:

 =Only(FieldWithHtml)
 

You can certainly use more advanced formattings like the following example:

Scrolling:

If the QV object is not large enough horizontal and vertical scrollbars will be displayed automatically:

Properties:

The following properties will be copied from the QV-object to control responsible for displaying the Html content:

  • height and width
  • Font size, family (if not overruled by CSS within the Html code

Ideas for Improvements

There are a lot of possibilities how this could be improved:

  • Stylesheets: Add a possibility to reference style sheets
  • Other formatting: Support not only Html but for example also BBCode or Wiki formatting
  • Security: Remove Javascript and other possible harmfull code !!!

Download “Minimalistic HtmlTextBox” Extension:

MinimalisticHtmlTextBox on GitHub (5 KB)

Tested on:
QlikView 11 SR1, Windows 7 x64, Internet Explorer v9, Firefox v14, Google Chrome v21

Bookmark and Share

and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

22 Comments

  1. Posted September 19, 2012 at 14:00 | Permalink

    Stefan,
    Thank you for this solution. I’ll take a good look as soon as I have time.

    Best Regards,
    Michael

  2. Nick
    Posted September 20, 2012 at 16:15 | Permalink

    Hi Stefan,

    Whenever i drag and drop into the sheet, my desktop version just hang and had to close it.
    and same thing happen again after.

    Is this running on any specific platform? or version?

    Thanks,
    nick

    • Posted September 24, 2012 at 19:37 | Permalink

      Hi Nick,

      thank you for your feedback.
      Unfortunately I cannot reproduce these issues.
      Could you please give me some more details what’s happening, which browser, QlikView Version, Operating System, etc. you are using?

      Thanks & regards
      Stefan

      • nagaraju
        Posted July 17, 2014 at 11:25 | Permalink

        Hi Stefen,

        It’s very god extension.
        but i have doubt here,
        suppose i have created 3 links in qlikview using HTML Extension.

        How to give navigation one sheet to another sheet in Extension…

        is it possible or not….????/

        Hope you understand..

        Thanks in Advance

  3. Posted September 21, 2012 at 19:55 | Permalink

    Trying… It works in QV11… to be continued…

    Regards,
    Michael

  4. Nick
    Posted September 25, 2012 at 09:33 | Permalink

    Hi Stefan,

    This is the steps i did.

    1) i downloaded the extension.
    2) i double clicked on it, and after it says, it’s done.
    3) i open QV V11 SR1.
    4) switch to web view.
    5) right click add extension, drag and drop.
    6) i got a prompt, ” Qlikview 11.00 sr1 has encountered a problem and needs to close.”

    So it repeats the same thing.
    Did i installed the extension correctly?
    I am not supposed just double click on it?

    Nick

  5. Matthias Dix
    Posted October 1, 2012 at 18:01 | Permalink

    That’s a really nice solution. I like it.

  6. Nick
    Posted October 8, 2012 at 09:16 | Permalink

    Hi Stefan,

    I’m on x86.

    Nick

    • Posted October 8, 2012 at 18:12 | Permalink

      Hmmm, interesting … not tested the extension so far in different OS, only in different browser version … I’ll test that and will come back to you …

      Regards Stefan

  7. Nick
    Posted October 17, 2012 at 16:27 | Permalink

    Hi Stefan,
    I saw your have some new extensions released. It really itches me not being able to use it. i tried qTemplate and i got the same error.
    So, it is really for 64 bits machine only?

    Hi Matthias,
    Did you run on x86 or x64?

    • Posted October 17, 2012 at 18:21 | Permalink

      Sorry, so far I did not have the chance to test it on x86 …

  8. jnrpromr
    Posted October 25, 2012 at 11:19 | Permalink

    Only works on QV 11, i’m trying run it on QV 10 and doesn’t works, multiple errors on Javascript….

    • Posted November 8, 2013 at 18:49 | Permalink

      Yes, as stated in the article, this extension is only developed and tested for QlikView 11, not QlikView 10.

      Regards
      Stefan

  9. jnrpromr
    Posted October 25, 2012 at 14:24 | Permalink

    Hi,

    I’ve just solved the problem to QlikView 10:

    You can download from here: https://www.box.com/s/qkobany67r0gcjfjv48a

    SCRIPT.JS


    Qva.AddExtension('HTML TextBox QV10', function() {

    this.Element.innerHTML = "";
    this.Element.firstChild.innerHTML = this.Layout.Text0.text;
    setProps(this.Element.firstChild, this);

    // asignamos los estilos de la fuente
    function setProps(obj, parentObj) {

    obj.style.fontStyle = parentObj.Layout.Style.fontstyle;
    obj.style.fontFamily = parentObj.Layout.Style.fontfamily;
    obj.style.fontSize = parentObj.Layout.Style.fontsize + "pt";

    }
    });

    And PROPERTIES.QVPP:

    HTML TextBox QV10

    HTML Code:

    Editar HTML

    Layout

    Caption

  10. Posted December 20, 2012 at 15:35 | Permalink

    Hi,

    Do you guys know if it works to embed a videos?

    I added a link to my video in the HTML field

    It seems to work on Qlikview desktop webview but the video does not appear on the server.

    • Bastien
      Posted February 6, 2013 at 16:06 | Permalink

      Hi,

      In fact it also works to embed a video! That’s great!

  11. Hari
    Posted January 8, 2013 at 06:09 | Permalink

    I was looking for this for a long time.. wonderful.. thanks..

  12. csy
    Posted July 12, 2013 at 10:12 | Permalink

    Awesome! It’s working fine after I upgraded QlikView PE to v11.2 sr2.
    Can we have this html extension in pivot table? Kindly advise regarding this post.
    http://community.qlikview.com/message/364874#364874
    I wish to use html format in the description column to design the format such as bold, color and alignment.

    Thanks,
    csy

  13. Posted January 8, 2014 at 11:53 | Permalink

    I’m not that much of a online reader to be honest but your sites really nice,
    keep it up! I’ll go ahead and bookmark your website to come back
    down the road. Cheers

  14. priya
    Posted January 19, 2014 at 23:01 | Permalink

    Hi Stefan,

    Minimalistc HTML text box Extension is really a useful object.I am using this in my dashboard to display the text with formatting .However, I am unable to use this object in my reports . Please let me know if there is any alternative method which can be used to display this object in the report and export the same into PDF.

    Regards,
    Priya

  15. Jeremy
    Posted July 1, 2014 at 23:32 | Permalink

    This is a handy extension. Could it also be used to sneak a small JavaScript or a CSS reference into the QVW?

2 Trackbacks

  1. […] mi caso, he adaptado el Extension de Stefan WALTHER a QlikView 10. Como la mayoría, está desarrollado en Javascript y jQuery. Nuestro Extension […]

  2. […] (either loaded from a database or declared manually). Author: Stefan Walther Description: QlikTip #39: Displaying Html content within QlikView Download: github.com/stefanwalther/QlikView_Extension_HtmlMinimalisticTextBo Technology: Html, CSS, […]