Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
Yianni_Ververis
Employee
Employee

Another great mashup from the Demo Team!

 

After my favorite CIO where we introduced KPIs into the navigation, salesforce is beautiful, elegant and made mostly of custom extensions!

 

I started with the custom Selection toolbar (Angular Directive) that I introduced in the CIO dashboard. This changes based on the number of selections, if it's only one item of that dimension selected, or more than 6, it displays "Dimension: item selected". If there are more than one, but less than 6 items selected, it changes to a dropdown menu with the x button to deselect it. This is listening to selections, which means that whatever selections are made in the webpage, they will be displayed here as well.

2017-03-03 08_51_07-Salesforce.png

Then, we needed Sense like filters but as drop down menus (Angular Directive). I have done this with the UN Gender Statistics site but this one is more advanced and stays open until you finish making all selections and sorts them by state. It scrolls if many items.

2017-03-03 08_56_03-Salesforce.png

 

Another issue we were faced with, was that we created a combo chart in Sense but we needed to customize the colors to match our webpage. This lead me to create the Combo Chart extension.‌ This not only gives you the option of changing colors but, hover states, borders, set bar widths, dot widths, has a better display of the labels etc.

2017-03-03 11_23_51-Salesforce_Mashup_Demo_Team _ Sheets - Qlik Sense.png

 

In the same page, we had to display and compare two vertical bar charts. The problem is that when we placed the out-of-the-box ones, the y-axis max were different thus visually misleading.  So I used the combo chart with only one measure and set the max to achieve the desired results

2017-03-03 09_32_24-_Salesforce_Mashup_Demo_Team - Dashboard 2 _ App overview - Qlik Sense.png

2017-03-03 11_26_06-Salesforce.png

 

Moving on to the next page, we had two more issues to solve.

We needed to have a Stacked bar Chart based on the value of the measure and not the number of measures. For this, I created the SenseUI-ValueStackedbarChart.‌ I used the same tooltips, coloring, hover states etc as I used in my other extension like my most popular one, SenseUI-BarChart.

2017-03-03 10_27_46-_Salesforce_Mashup_Demo_Team - Opportunities 1 _ Sheets - Qlik Sense.png

The other issue was that we needed a horizontal menu for quarters and years. For this I used an older extension, the SenseUI-Filter.

2017-03-03 10_47_36-Salesforce.png

Lastly, I used my SenseUI-BarChart extension for all of the horizontal bars. I used the same bar color, border and hover color to match the rest of the website's objects.

2017-03-03 14_04_16-Salesforce.png

The mashup is found at http://webapps.qlik.com/salesforce/index.html

Please note that this is a work in progress. I still have to work on the mobile version and some other UI issues

 

Extensions mentioned here:

Senseui-ComboChart

SenseUI-ValueStackedbarChart

SenseUI-BarChart

SenseUI-Filter

 

For more of our work, you can go to webapps.qlik.com

 

Yianni

14 Comments