Qlik Community

App Development

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

Announcements
QlikWorld happening right now! You can still join: REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
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
Contributor III
Contributor III

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

View solution in original post

6 Replies
charlie_mstrmnd
Contributor III
Contributor III

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
Author

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

charlie_mstrmnd
Contributor III
Contributor III

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
Author

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
Contributor III
Contributor III

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
Author

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?