Plugins - Angular / Material Design / Material Icons

IdentityIQ (IIQ) IIQ Discussion and Questions
1

I’m a fairly competent SailPoint developer whose build a couple AngularJS plugins. I came across this wiki guide a while back and wanted to have a go at developing an Angular full page plugin.

following the guide I have the plugin built and installed in my sandbox. The Material components are working ok but I’m having issues with the Angular Material CSS styles and Material Icons. The icons don’t seem to be getting included at all. I’ve included them in my page.xhtml like so:

<head> 
..
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
..
</head>

Regarding the Material design styling some of it seems to work ok and some of it seems to be getting overridden by IIQ’s included styling. I’m really not sure.

Has anyone tried doing this yet? Have you tried to use Angular Material components or Icons at all in your Angular plugins? I realize I’m pretty outside the box here so any help is appreciated.

Thanks!

2

May I ask are you using TypeScript for plugin frontend compliation?
Also, does the IIQ instance has internet connection to Google.

In my case, I am using TypeScript and Common Angular Material for plugin frontend design and implementaiton. The problem which need to be double check is that your IIQ instance should also have internet connection in order to load the icon.

3

Yes I am using TypeScript. And IIQ has access to the internet.

I found the issue here is when I followed the advice to the guide I posted, and included the link to the icon / stylesheet in the of page.xhtml IIQ was ignoring it. I confirmed this by adding some very simple scripts to the head and they were ignored also. This is some querk of the IIQ plugin framework. I wasn’t sure how to fix that.

Although it is not considered best practice per HTML5 tags can also be added to the element. Once putting it there all of my styles and icons for the plugin worked perfectly.

I attached an example of what worked for me.
ex.page.xhtml.txt (1.1 KB)

4

Hello @kyle_knox,

Here is the example of my page.xhtml

image
image2641×703 72.2 KB

This works in my case. (Sorry for a lot revision on the reply… as there is a problem to post code in the reply box, I decided just paste with screenshot)

Best regards,
Mike

5

@mike818148

yeah thanks. This is pretty similar to mine now. I do see that you have included SailPointBundleLibrary.js. Are you able to get this working and use it in your Angular project? I decided not to use those assets for this plugin but am interested to know how to get it working.

6

Yes. For me this is working. Once you include the link for Mat Icon it should work.
Regarding the SailPointBundleLibrary.js, please describe more details on your use case.

7

Since I saw you included the SailPointBundleLibrary I assumed you were using their modals or the identity selector etc. For my current use case I don’t need it. But was curious if you had done so. I’m not sure how to include those in my angular project (typescript).

8

I am sorry that actually, I am not really sure to use the SailPointBundleLibrary directives (AngularJS) within Angular project. In my use case, I mainly use this since I would like to call PluginBaseHelper within Angular. For example:

declare const PluginHelper: {
  getCsrfToken: Function
  getPluginRestUrl: Function
  getCurrentUsername: Function
};
...
constructor(private http : HttpClient) {
    if (environment.production) {
      this.pluginUrl = PluginHelper.getPluginRestUrl('xxxx');
      this.iiqUrl = window.location.origin + "/" + window.location.pathname.split('/')[1];
      this.token = PluginHelper.getCsrfToken();
      this.currentUserName = PluginHelper.getCurrentUsername();
    } else {
      this.pluginUrl = 'http://xxxxxx:8080/identityiq/plugin/rest/xxxx';
      this.iiqUrl = 'http://xxxxxx:8080/identityiq';
      this.currentUserName = 'spadmin';
    }
  }

This is helpful especially for RESTful API calls.

Best regards,
Mike

9

Ok ok. Still a good tip. Thanks!