topic Re: Minimal CSS for integration in Angular App in Integration, Extension & APIs

Minimal CSS for integration in Angular App

matthi0uw — Mon, 18 Mar 2019 09:00:52 GMT

Hi,

I would like to use graph in my angular(2+) app.

Is there a minimal CSS file containing specific rules for graphs ?

When I load 'resources/autogenerated/qlik-styles.css', there to many rules for global design and in conflict with my app ?

Exemple:

body {font-family: inherit!important; }

Re: Minimal CSS for integration in Angular App

Anil_Babu_Samineni — Mon, 18 Mar 2019 09:39:30 GMT

My suggestion is here, Open resources/autogenerated/qlik-styles.css file in that there could be one .html page also that you can manipulate with

</body>

Then, CSS should written in 2 ways

#Sample {font-family: inherit!important;}

You can like below for your next version of dashboard.

.Sample1 {font-family: inherit!important;}

Re: Minimal CSS for integration in Angular App

matthi0uw — Mon, 18 Mar 2019 10:04:39 GMT

Thanks for your answer.

My problem is to have all CSS rules and display correctly graphs (not to find how add CSS in HTML).

Re: Minimal CSS for integration in Angular App

Anil_Babu_Samineni — Mon, 18 Mar 2019 11:07:53 GMT

Question to you, Where are you referring that CSS? Could you please brief about your work..

Re: Minimal CSS for integration in Angular App

matthi0uw — Mon, 18 Mar 2019 13:51:04 GMT

I have an angular app with multiple route (=url). I need to load only CSS, JS when I go in module using Qlik (to avoid unused loaded files) :

myApp.com
myApp.com/tools/...
myApp.com/dashboard/...  // only those routes use Qlik.

So I have a 'guard' that loads require.js from Qlik Server to get all JS that Qlik needs.

Here an exemple of demo that shows my services : https://stackblitz.com/edit/angular-s3non3 (I commented the part of injection about Qlik (require.js and qlik-styles.css) to avoid error for demo).

If load JS takes time, the guard force to wait complete then I go in the route. So I can create component to display graph like that :

//HTML:
<div id="qv01" style="height:200px;"></div>

//Typescript:
export class DashboardComponent implements OnDestroy {
  qlikApp: {};
  constructor() {
    window['require'].config( {
        baseUrl: 'http://myServerQlik/jwt/resources/',
      } );
      window['require'](['js/qlik'], (qlik: {}) => {
        this.qlik = qlik;
        resolve(true);
      });
    this.qlikApp = this.qlik['openApp']('idApp', this.config);
    this.qlikApp['getObject']('qv01', 'myGraphId');
  }

  ngOnDestroy(): void {
    this.qlikApp['close']();
  }
}

This (extract of) code loads properly the graph and data from Qlik. But CSS doesn't work :

loading CSS file in head tag breaks some rules of my app (not enough focus on Qlik elements).
loading CSS file as import, in component with no encapsulation, don't load correctly files for fonts, image (background: url()), and put wrong places for tooltips (because tooltips are add in DOM outside of my component)...

// TypeScript:
@Component({
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class DashboardComponent {
    ...
}

// scss :
@import  url("https://myServerQlik/jwt/resources/autogenerated/qlik-styles.css");

So where can I find a file containing minimal CSS to display graphs ? Or which rules can I remove ? How often the file changes (in case I update manually and store it in my app project) ?