SailPoint Angular Components

To implement the SailPoint-styled angular components, your project needs to include the SailPointBundleLibrary JavaScript file. There are specific directive dependencies on this library when you use the SailPoint-styled components.

Widgets and snippets donot require this library in the plugin project, because for those, the plugin architecture automatically references this library from your IdentityIQ instance. But if you are going to use these in a full page plugin implementation, your plugin needs to include a copy of this JavaScript library, copied from your IdentityIQ version. Plus, your page.xhtml component needs to explicitly reference the JavaScript file in a script element so IdentityIQ can resolve the SailPoint Angular directives you are be using. This library needs to match the version of IdentityIQ where the plugin will be deployed.

Your angular module definition needs to specify any other modules that your module has dependencies on. This list will vary, depending on the elements you include. For example, if you are using modal boxes, you need to include sailpoint.modal, tree components rely on sailpoint.tree, and so on. If your user interface only contains some of the more basic of the field types, you need fewer modules in your dependency list.

An example plugin that demonstrates the different components that are part of the SailPoint Angular bundle, called the Kitchen Sink plugin is installed with IdentityIQ. The plugin is available for download from Compass. Once the plugin is downloaded, you can install and view the plugin through IdentityIQ to see how the different field types behave. Then you can examine the HTML and JavaScript files to see the directives involved and how they are populated.

The library contains a wide array of field types, just like you might see throughout core product pages. For example, selection lists, plain text entry fields or fields where you can enter multiple separate text values as a list, dropdown list boxes where you can select from a set of choices, and a special directive for when the choices should be Boolean true-false values, date pickers, checkboxes, and radio buttons.

The library offers SailPoint styled buttons, and the demo plugin shows how you can use them to attach logic to do things like open modal boxes of various types, post an alert notification to the page or navigate the user to another page in IdentityIQ while preserving navigation history.

Beyond the simpler field types and buttons, there are a few components that create more complex elements. For example, a tree directive for showing nested relationships in data, a directive for displaying a list of cards that is configured for paging when result sets are large, and a directive for a data table that matches the tables in the Angular pages of IdentityIQ.