Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Not applicable

Outline charts with widgets in Qlik Sense 3.0

Is it possible to outline charts - grids using widgets (css capability) as following :

outline: green dotted thick;

1 Solution

Accepted Solutions
charlie_mstrmnd
New Contributor III

Re: Outline charts with widgets in Qlik Sense 3.0

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

6 Replies
charlie_mstrmnd
New Contributor III

Re: Outline charts with widgets in Qlik Sense 3.0

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

Not applicable

Re: Outline charts with widgets in Qlik Sense 3.0

Thank you Charlie for the quick response, i am looking forward for your workaround. I will test also following your above post.

charlie_mstrmnd
New Contributor III

Re: Outline charts with widgets in Qlik Sense 3.0

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

Not applicable

Re: Outline charts with widgets in Qlik Sense 3.0

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 :

kpi.png

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?

charlie_mstrmnd
New Contributor III

Re: Outline charts with widgets in Qlik Sense 3.0

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

Not applicable

Re: Outline charts with widgets in Qlik Sense 3.0

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?

Community Browser