Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Is it possible to outline charts - grids using widgets (css capability) as following :
outline: green dotted thick;
Sorry for not replying yesterday Dimitris
Using the example from here : http://help.qlik.com/en-US/sense-developer/3.0/Subsystems/Extensions/Content/Widget/widgets-example-...
I have added the lines I previously mentioned
HTML:
<div class="frame" ng-class="settings.color">
<div class="header">
<div class="header-logo-wrapper">
<img class="header-logo" alt="Qlik Sense" src="../resources/img/logo/sense-desktop.png">
</div>
</div>
<div class="content">
<h1>{{data.headers[0].qFallbackTitle}}</h1>
<h2>{{data.rows[0].measures[0].qText}}</h2>
</div>
<div class="footer">
<div class="footer-slogan"> Lorem ipsum dolor sit amet ™ </div>
<div class="footer-logo-wrapper">
<img alt="Qlik Sense" src="../resources/img/logo/devhub_logo_no_icon.png">
</div>
</div>
</div>
CSS:
@green: #61a729;
@green-darken: #529a18;@blue: #52a2cc;
@blue-darken: #468bb0;.frame{
width:100%;
height:100%;
box-sizing: border-box;
border-style: dashed;
border-color: #228B22;
border-width: 10px;overflow: hidden;
}.blue{
background: linear-gradient(45deg, @blue-darken 0%, @blue 100%);
}
.green {
background: linear-gradient(45deg, @green-darken 0%, @green 100%);
}/******************* SENSE COMPONENTS *******************/
.content {
position: absolute;
width: 100%;
height: calc( 100% );
top: 25px;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}/******************* HEADER *******************/
.header{
width:100%;
height: 100px;
position: absolute;
top: 0;
box-shadow: -1px 9px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.header-logo-wrapper{
height: 100%;
padding: 20px 0 0 20px;
box-sizing: border-box;
background-color: white;
float: left;
}/******************* FOOTER *******************/
.footer{
position:absolute;
width:100%;
height:50px;
padding-left: 20px;
box-sizing: border-box;
bottom:0;
box-shadow: -1px -6px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.footer-logo-wrapper{
height: 100%;
padding-right: 20px;
padding-top: 5px;
background-color: white;
box-sizing: border-box;
float: right;
}
.footer-slogan {
float:left;
font-size: 14pt;
color: black;
height:50px;
line-height: 50px;
font-style: italic;
}h1 {
font-size: 50pt;
color: white;
font-style: italic;
text-transform: uppercase;
-webkit-transition: font 0.2s; /* Safari */
transition: font 0.2s;
}h2 {
font-size: 100pt;
color: white;
font-style: italic;
text-transform: uppercase;
transition: font 0.2s;
}/******************* ELEMENT QUERY *******************/
.frame[max-width~="550px"] {
.header-dash, .footer-dash {
display: none;
}
.footer-slogan {
display: none;
}
h1 {
font-size: 50pt;
}h2 {
font-size: 100pt;
}
}.frame[max-height~="500px"] {
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-width~="440px"] {
.header-logo-wrapper{
width: 100%;
float: none;
line-height: 100px;
text-align: center;
padding: 10px 0 0 0;}
.header-logo{
height:40px;
width:auto;
}.footer-logo-wrapper{
text-align: center;
float: none;
}
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-height~="400px"] {
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-width~="280px"] {
.header-logo{
height:30px;
width:auto;
}
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-height~="300px"] {
h1 {
font-size: 15pt;
}h2 {
font-size: 25pt;
}
}.frame[max-height~="250px"] {
.header{
display:none;
}
.footer{
display:none;
}
.content{
top: 0;
}
}@green: #61a729;
@green-darken: #529a18;@blue: #52a2cc;
@blue-darken: #468bb0;.frame{
width:100%;
height:100%;
box-sizing: border-box;
border-style: dashed;
border-color: #228B22;
border-width: 10px;overflow: hidden;
}.blue{
background: linear-gradient(45deg, @blue-darken 0%, @blue 100%);
}
.green {
background: linear-gradient(45deg, @green-darken 0%, @green 100%);
}/******************* SENSE COMPONENTS *******************/
.content {
position: absolute;
width: 100%;
height: calc( 100% );
top: 25px;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}/******************* HEADER *******************/
.header{
width:100%;
height: 100px;
position: absolute;
top: 0;
box-shadow: -1px 9px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.header-logo-wrapper{
height: 100%;
padding: 20px 0 0 20px;
box-sizing: border-box;
background-color: white;
float: left;
}/******************* FOOTER *******************/
.footer{
position:absolute;
width:100%;
height:50px;
padding-left: 20px;
box-sizing: border-box;
bottom:0;
box-shadow: -1px -6px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.footer-logo-wrapper{
height: 100%;
padding-right: 20px;
padding-top: 5px;
background-color: white;
box-sizing: border-box;
float: right;
}
.footer-slogan {
float:left;
font-size: 14pt;
color: black;
height:50px;
line-height: 50px;
font-style: italic;
}h1 {
font-size: 50pt;
color: white;
font-style: italic;
text-transform: uppercase;
-webkit-transition: font 0.2s; /* Safari */
transition: font 0.2s;
}h2 {
font-size: 100pt;
color: white;
font-style: italic;
text-transform: uppercase;
transition: font 0.2s;
}/******************* ELEMENT QUERY *******************/
.frame[max-width~="550px"] {
.header-dash, .footer-dash {
display: none;
}
.footer-slogan {
display: none;
}
h1 {
font-size: 50pt;
}h2 {
font-size: 100pt;
}
}.frame[max-height~="500px"] {
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-width~="440px"] {
.header-logo-wrapper{
width: 100%;
float: none;
line-height: 100px;
text-align: center;
padding: 10px 0 0 0;}
.header-logo{
height:40px;
width:auto;
}.footer-logo-wrapper{
text-align: center;
float: none;
}
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-height~="400px"] {
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-width~="280px"] {
.header-logo{
height:30px;
width:auto;
}
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-height~="300px"] {
h1 {
font-size: 15pt;
}h2 {
font-size: 25pt;
}
}.frame[max-height~="250px"] {
.header{
display:none;
}
.footer{
display:none;
}
.content{
top: 0;
}
}
Charlie
Hi Dimitris,
If you wanted to deploy CSS you could use:
.wrapper {
border-style: dashed;
border-color: #228B22;
border-width: 10px;
}
and calling within the UL tags:
<ul class="wrapper" ng-repeat="head in data.headers">
Believe the widget preview window will lose the bottom and right sides of a border - a quick workaround would be defining fixed width's and height's. I will have a further look this evening.
Charlie
Thank you Charlie for the quick response, i am looking forward for your workaround. I will test also following your above post.
Sorry for not replying yesterday Dimitris
Using the example from here : http://help.qlik.com/en-US/sense-developer/3.0/Subsystems/Extensions/Content/Widget/widgets-example-...
I have added the lines I previously mentioned
HTML:
<div class="frame" ng-class="settings.color">
<div class="header">
<div class="header-logo-wrapper">
<img class="header-logo" alt="Qlik Sense" src="../resources/img/logo/sense-desktop.png">
</div>
</div>
<div class="content">
<h1>{{data.headers[0].qFallbackTitle}}</h1>
<h2>{{data.rows[0].measures[0].qText}}</h2>
</div>
<div class="footer">
<div class="footer-slogan"> Lorem ipsum dolor sit amet ™ </div>
<div class="footer-logo-wrapper">
<img alt="Qlik Sense" src="../resources/img/logo/devhub_logo_no_icon.png">
</div>
</div>
</div>
CSS:
@green: #61a729;
@green-darken: #529a18;@blue: #52a2cc;
@blue-darken: #468bb0;.frame{
width:100%;
height:100%;
box-sizing: border-box;
border-style: dashed;
border-color: #228B22;
border-width: 10px;overflow: hidden;
}.blue{
background: linear-gradient(45deg, @blue-darken 0%, @blue 100%);
}
.green {
background: linear-gradient(45deg, @green-darken 0%, @green 100%);
}/******************* SENSE COMPONENTS *******************/
.content {
position: absolute;
width: 100%;
height: calc( 100% );
top: 25px;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}/******************* HEADER *******************/
.header{
width:100%;
height: 100px;
position: absolute;
top: 0;
box-shadow: -1px 9px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.header-logo-wrapper{
height: 100%;
padding: 20px 0 0 20px;
box-sizing: border-box;
background-color: white;
float: left;
}/******************* FOOTER *******************/
.footer{
position:absolute;
width:100%;
height:50px;
padding-left: 20px;
box-sizing: border-box;
bottom:0;
box-shadow: -1px -6px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.footer-logo-wrapper{
height: 100%;
padding-right: 20px;
padding-top: 5px;
background-color: white;
box-sizing: border-box;
float: right;
}
.footer-slogan {
float:left;
font-size: 14pt;
color: black;
height:50px;
line-height: 50px;
font-style: italic;
}h1 {
font-size: 50pt;
color: white;
font-style: italic;
text-transform: uppercase;
-webkit-transition: font 0.2s; /* Safari */
transition: font 0.2s;
}h2 {
font-size: 100pt;
color: white;
font-style: italic;
text-transform: uppercase;
transition: font 0.2s;
}/******************* ELEMENT QUERY *******************/
.frame[max-width~="550px"] {
.header-dash, .footer-dash {
display: none;
}
.footer-slogan {
display: none;
}
h1 {
font-size: 50pt;
}h2 {
font-size: 100pt;
}
}.frame[max-height~="500px"] {
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-width~="440px"] {
.header-logo-wrapper{
width: 100%;
float: none;
line-height: 100px;
text-align: center;
padding: 10px 0 0 0;}
.header-logo{
height:40px;
width:auto;
}.footer-logo-wrapper{
text-align: center;
float: none;
}
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-height~="400px"] {
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-width~="280px"] {
.header-logo{
height:30px;
width:auto;
}
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-height~="300px"] {
h1 {
font-size: 15pt;
}h2 {
font-size: 25pt;
}
}.frame[max-height~="250px"] {
.header{
display:none;
}
.footer{
display:none;
}
.content{
top: 0;
}
}@green: #61a729;
@green-darken: #529a18;@blue: #52a2cc;
@blue-darken: #468bb0;.frame{
width:100%;
height:100%;
box-sizing: border-box;
border-style: dashed;
border-color: #228B22;
border-width: 10px;overflow: hidden;
}.blue{
background: linear-gradient(45deg, @blue-darken 0%, @blue 100%);
}
.green {
background: linear-gradient(45deg, @green-darken 0%, @green 100%);
}/******************* SENSE COMPONENTS *******************/
.content {
position: absolute;
width: 100%;
height: calc( 100% );
top: 25px;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}/******************* HEADER *******************/
.header{
width:100%;
height: 100px;
position: absolute;
top: 0;
box-shadow: -1px 9px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.header-logo-wrapper{
height: 100%;
padding: 20px 0 0 20px;
box-sizing: border-box;
background-color: white;
float: left;
}/******************* FOOTER *******************/
.footer{
position:absolute;
width:100%;
height:50px;
padding-left: 20px;
box-sizing: border-box;
bottom:0;
box-shadow: -1px -6px 13px -6px rgba(0,0,0,0.75);
background-color: white;
}.footer-logo-wrapper{
height: 100%;
padding-right: 20px;
padding-top: 5px;
background-color: white;
box-sizing: border-box;
float: right;
}
.footer-slogan {
float:left;
font-size: 14pt;
color: black;
height:50px;
line-height: 50px;
font-style: italic;
}h1 {
font-size: 50pt;
color: white;
font-style: italic;
text-transform: uppercase;
-webkit-transition: font 0.2s; /* Safari */
transition: font 0.2s;
}h2 {
font-size: 100pt;
color: white;
font-style: italic;
text-transform: uppercase;
transition: font 0.2s;
}/******************* ELEMENT QUERY *******************/
.frame[max-width~="550px"] {
.header-dash, .footer-dash {
display: none;
}
.footer-slogan {
display: none;
}
h1 {
font-size: 50pt;
}h2 {
font-size: 100pt;
}
}.frame[max-height~="500px"] {
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-width~="440px"] {
.header-logo-wrapper{
width: 100%;
float: none;
line-height: 100px;
text-align: center;
padding: 10px 0 0 0;}
.header-logo{
height:40px;
width:auto;
}.footer-logo-wrapper{
text-align: center;
float: none;
}
h1 {
font-size: 40pt;
}h2 {
font-size: 70pt;
}
}.frame[max-height~="400px"] {
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-width~="280px"] {
.header-logo{
height:30px;
width:auto;
}
h1 {
font-size: 20pt;
}h2 {
font-size: 50pt;
}
}.frame[max-height~="300px"] {
h1 {
font-size: 15pt;
}h2 {
font-size: 25pt;
}
}.frame[max-height~="250px"] {
.header{
display:none;
}
.footer{
display:none;
}
.content{
top: 0;
}
}
Charlie
Thank you charlie_mstrmnd fro this answer. I have upgraded to the 3.0 version and exploring the new widget feature by testing KPIs as you suggested above and the result is pretty nice :
Now i work on how to add the out of the box feature of a KPI ( link to a sheet) by using KPI widget
and i can not find the solution.
Any help?
Hi Dimitris,
In the first instance it might be worth reviewing this extension: Qlik Branch
This will contain the routing to another sheet which you should be able to feed in.
If you struggle please let me know and I will be happy to help more.
Charlie
When creating custom KPI with widget ot lacks the color expression functionality which is included in the out of the box KPI object to color based on conditions.Also the same i am facing when creating custom table widget, although you have all the power of css. So for widgets my opinion is that you can do many things for fron end but you lose out of the box functionality. What's your opinion?