Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

Qlik Sense Wordpress Plugin

There are a lot of people that use Wordpress as their company's portal. If you are one of these people then, you may find this plugin very useful. You can create a mashup from within wordpress, using the Capabilities API, without writing a single line of code. Just add the settings with the host and the App ID, then the shortcode for the objects that you want and you are done.

Here, I will show you how to do that.

  1. First go to your wp admin panel, under "Plugins" click on "Add New" and then search for "Qlik"
    install.png
  2. Click on "Install Now" and then on "Activate"
  3. This will create a "Qlik Sense" settings page, just open that
  4. Settings.png
  5. Here you need to define your host, the Virtual Proxy (prefix) and the App Id, as you would in a regular mashup. If you are planning on using a second app, then add the second app id in "App2 ID".
  6. Save changes.
  7. Then add the shortcode into your posts "[qlik-sense-object id="page1-obj2" qvid="nvqpV" height="400" app2="true"]"

- id: is the unique div id. This is needed especially when you want to display the same object in 2 different instances

- qvid: Is the object id as found in the "dev-hub/single-configurator"
- height: The height of the visualization in pixels
- nointeraction: Add this if you want to disable interactions. If you want the objects to have interaction, you can just omit this.

- app2: Add this if your object is coming from the second app that you have specified in the settings

EditPost.png

  • I have added few objects with a specific height in a bootstrap template for better layout. Now, lets preview the page
    Helloworld.pngHelloworld2.png

Make sure you whitelist your url in the virtual proxy.

If you use it and like it, please give it a 5 star in Wordpress.

This is it!

Yianni

In Portuguese: Qlik Sense Plugin para Wordpressby cleveranjos. Thank you Clever!

GitHub - yianni-ververis/qlik-sense-wordpress-plugin: A Wordpress plugin to create a Qlik Sense Mash...

Qlik Branch

50 Comments
Luminary
Luminary

Wow - that's a really neat idea.
Making the integration in a plug-in significantly lowers the barrier of doing this - nice!!

0 Likes
1,199 Views
neil_gabin
New Contributor III

Hi there

This sounds like a great plugin and I can't wait to get it to work. I've checked and rechecked all the settings and I'm 99% sure I have them right. Still nothing. I can embed an <iframe> in a WordPress page but not this. Just wondering if it a version issue. We have not upgraded our server for a while.

Also, would this work with QlikSense Cloud (FREE or Business)?

2017-11-11_170740.jpg

0 Likes
1,199 Views
Employee
Employee

jvs‌, may I translate this post and publish it?

0 Likes
1,199 Views
Employee
Employee

Yes. Please make sure that you link to the original and add the github / branch accounts

1,199 Views
Employee
Employee

neil.gabin

make sure you have your host correct and just the host. like mydomain.com, not https://mydomain.com/single

also make sure you have your Virtual Proxy right, either "/" or if you named it "/my_virtual_proxy/"

If you are still not able to make it work, send me a screenshot of the console errors (F12)

0 Likes
1,199 Views
neil_gabin
New Contributor III

Thanks for following me Yianni. Appreciate it.

Yes I did have the http:// in the Host Name but i have now removed it.

See errors below. Both are from the same laptop and same WordPress post. The first is from Chrome using my personal Google Account and the second is from my Corporate Google account on which we use Okta.

PERSONAL ACCOUNT

2017-11-12_170016.jpg

CORPORATE ACCOUNT

2017-11-12_165937.jpg

Thanks again for your help.

YIC Neil

0 Likes
1,199 Views
MVP & Luminary
MVP & Luminary

Hi Yanni,

We can't get this plugin to work quite yet. I've submitted a report on the github page: qs object not shown in post - Uncaught TypeError: qlik.setOnError is not a function · Issue #1 · yia...

It also seems that when you use the same qs object in two blog posts it won't be rendered on the homepage the second time. Only in the last post (the first shown of the page).

Another limitation is that you can now only use one qs app site wide. It would be great if we could use different qs apps in different blog posts or even multiple apps in the same post.

0 Likes
1,199 Views
Employee
Employee

Send me your settings file at yianni.ververis@qlik.com, your qlik.js is not loading so I am assuming its something with your proxy. Did you whitelist the wp page?

I will add the resize() method for duplicate objects on different page

The second app is coming up. Sometime this week

0 Likes
1,199 Views
Employee
Employee

Please upgrade to the latest 1.0.5

0 Likes
1,199 Views
MVP & Luminary
MVP & Luminary
your qlik.js is not loading so I am assuming its something with your proxy.

qlik.js is loaded. But perhaps not at the right order?

2017_11_13_08_24_48_sources.png


The proxy settings are fine. Otherwise the plugin wouldn't show the object in the post on the home page of wordpress. But the plugin doesn't show the object on the blog post page itself.

wordpress homepage:

2017-11-13 08_14_46 wp homepage.png

blog post page:

2017-11-13 08_14_46 wp blogpost.png

0 Likes
1,199 Views
Employee
Employee
0 Likes
1,199 Views
Employee
Employee

Thank you Clever, nice job!!!

1,199 Views
Employee
Employee

Version 1.1 supports 2 apps.

1,199 Views
MVP & Luminary
MVP & Luminary
  1. Then add the shortcode into your posts "[qlik-sense-object id="page1-obj2" qvid="nvqpV" height="400" app2="true"]"

The div id is a good id. I think you should also add appid to the shortcode. Otherwise you can only use two apps (now, unless you add more options in the plugin) in wordpress. That would likely mean that older blog posts will stop working since a newer blog post needs to get objects from a newly created qs app and there are only two slots. So you have to remove the reference to an older app. Or you'd have to create some kind of monster app that contains all the objects and data that you ever want to show in wordpress posts.

Thanks btw for the effort you put in this plugin. It's is going to be totally awesome once the kinks are straightened out!

0 Likes
1,199 Views
Partner
Partner

Hi Yianni,

Does this work with the Qlik Analytics Platform as well? We are having some trouble getting it set up

0 Likes
1,199 Views
Employee
Employee

Yes that is how we are using it.

What is the issue and send me your console screenshots.

0 Likes
1,199 Views
Partner
Partner

it appears our QAP is on a http connection, not https, which is causing an error and no response

error-wp-plugin-console.PNG

0 Likes
1,199 Views
Employee
Employee

For those that experience issues like the website is broken, you may want to try and upgrade to 1.1.2. I changed the loading order of the css to load first and then the rest of your Theme.

0 Likes
1,199 Views
MVP & Luminary
MVP & Luminary

I've updated the plugin to 1.1.3 and wordpress to 4.9. I still get the same error Uncaught TypeError: qlik.setOnError is not a function

0 Likes
1,199 Views
MVP & Luminary
MVP & Luminary

For those that still get errors...

I've created a small patch that makes sure the QS Plugin stuff is loaded and executed after wordpress does its own things: Update qlik-sense.php to load js at end of body Pull Request #2 · yianni-ververis/qlik-sense-wordpre...

Give it a try and let us know how it works out.

0 Likes
1,199 Views
Employee
Employee

Thank you gwassenaar‌.

I have updated the plugin in the wordpress.org repo.

You can update from your wp-admin and let me know how it works.

0 Likes
1,199 Views
Employee
Employee

v1.1.4 was with requirejs loading after all wp js files

v1.1.5 is with the css loading first so it does not interfere with wp themes

1,199 Views
MVP & Luminary
MVP & Luminary

Thanks Yianni!

Folks, something to keep in mind. There are css selectors in qlik-styles.css that also exist (or may exist) in your wordpress themes css. That means that your wordpress theme could apply css to the qlik sense objects you embed in wordpress with results you don't like. So you may have to add some extra css for children of the wp-qs class elements to overrule those css rules again to make things look pretty again.

1,199 Views
Partner
Partner

Hi jvs‌ ,

First off thanks for making this plugin.

I would love to use this plugin, but unfortunately I just can't make it work. This is probably caused by me being new at using both Wordpress/plugins/html, but hopefully you can help me out.

This is what I have done so far:

- Created a local server/database;
- Installed wordpress on to this server;
- Installed the Qlik Sense plugin for Word press;
- Activated the plugin;
- put in the following in the settings:
1.JPG

I tried doing what you did, but since I am a using localhost I can't really copy your fields. I figure I am maybe making multiple mistakes here, but I can't figure it out(tried all kind of different combinations).

Possible mistake 1:
Using localhost instead of localhost:4848, because I also use http://localhost:4848/hub/my/work‌ to access the qlik sense hub.

Possible mistake 2:
Using localhost / using a local server instead of a qlik server. Maybe this isn't possible with this plugin, but I don't really see why not (because a local server also works with mashups etc.)

Possible mistake 3:

Putting a / in "Virtual Proxy (Prefix):", maybe I should leave this empty?

Possible mistake 4:

My App ID is wrong. If you compare mine with yours you probably wonder what I did, well I followed this:

Obtaining app id's and object id's ‒ Qlik Sense Developers

And that gives me this:2.JPG

So I basically copied my App ID from here. I tried looking for an App ID like what you have, but I couldn't find it (even tried different computers that both have Qlik Sense installed).

Ok so after filling in these settings I continued following your example and saved the settings. After that I went to Posts and added a new one, went to the Text tab and inserted this:

<div class="row">

     <div class="col-mid-12">
     </div>
</div>

<div class="row">
     <div class="col-mid-12">
          [qlik-sense-object id="page1-obj1" qvid="jRMGQG" height="400" app1="true"]"
     </div>

</div>

<div class="row">
     <div class="col-mid-6">
          [qlik-sense-object id="page1-obj2" qvid="NeLVr" height="400" app1="true"]"

     </div>
     <div class="col-mid-6">
          [qlik-sense-object id="page1-obj3" qvid="qZPdytp" height="400" app1="true"]"

     </div>

</div>

The only thing I changed are the qvid's to qvid's I found in the Single Configurator, so for example this one:
3.JPG

I did this for all 3. I also changed app2="True" to app1="true" since I am using app1 and not app2. After that I published the post and went to see how it looked. Well it only displayed " and nothing that even looks like Qlik sense objects. Here an example (quite hard to see, but there is a random " and if I scroll down I see more of these "):
4.JPG

I have tried everything I could think of, from rechecking everything to trying different inputs, but it still doesn't work. Hopefully you can help me make it work, I would really appreciate it! If you need any more information please let me know.


Thanks in advance,

Casper

0 Likes
1,199 Views
MVP & Luminary
MVP & Luminary

The appid doesn't look correct. Try Executive Dashboard.qvf instead.

0 Likes
1,199 Views
Partner
Partner

Tried it, didn't work. I don't really understand why I get the weird AppId instead of a normal one like you guys.

0 Likes
1,199 Views
MVP & Luminary
MVP & Luminary

That's because you're using Qlik Sense Desktop. The rest of us are using Qlik Sense Server. I haven't tried using the plugin with QS Desktop yet.

Try using the server that Yianni used: sense-demo-staging.qlik.com. The id of the Executive Dashboard there is 075506ed-73ee-4f1a-b9a0-1955df0bb3e0.

0 Likes
1,199 Views
Partner
Partner

Ahh that's a good explanation for that. I still think this plugin should theoretically work with a localhost as well (even though I get the weird AppID)

In the future I will have a Qlik sense server available to me, but for now I only have access to Qlik Sense Desktop. The problem is, I want to make a proof of concept using this plugin + wordpress + QS desktop so when I do have the QS server available everything is already ready to go.

0 Likes
1,199 Views
Partner
Partner

Hi,

Didn't see your second part of your message (edited it afterwards?). But after reading it again I suddenly saw it, so I tried using the server Yianni used and then it did work!

Finally I have some progress, thanks! Would still like to use localhost, but at least now I can test a bit more.

0 Likes
1,199 Views
Employee
Employee

Hello,

I have upgraded to 1.1.7 and I have added the ability to connect to Qlik Sense Desktop.

For those of you that have already installed any of the previous versions and you cannot connect, you will need to check the settings again, you will need to add the port and https protocol.

Settings-local.png

0 Likes
1,199 Views