LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-10 04:19:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edits

Browse Source
This commit is contained in:
james.haytko
2024-03-21 12:47:09 -05:00
parent b93395e7bc
commit eedb1e5a54
4 changed files with 115 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/tools/ui-development-kit/accounts-list.mdx
View File

@@ -13,24 +13,24 @@ tags: ['UI']
## Overview ## Overview
This guide will walk you through implementing a new page to list all accounts in your tenant. This guide will walk you through the process of implementing a new page that lists all the accounts in your tenant. This serves as an example you can use to learn how to implement many different types of custom UI pages.
This is a continuation of the [getting started guide](./getting-started#add-route-and-new-page). You must have created your routes and pages before continuing with this guide. This guide is a continuation of [Getting Started](./getting-started). To implement a new page, you must have already created your routes and pages. To learn how to do so, refer to the [Add New Route and Page section](./getting-started#add-route-and-new-page).
At the end of this guide you will be able to: At the end of this guide you will be able to do the following:
- List all accounts in your tenant - List all accounts in your tenant
- Paginate accounts by page limits of 5, 10, 50, 100, 250 - Paginate accounts by page limits of 5, 10, 50, 100, 250
- Click through each page of results - Click through each page of results
- View the json response of the account from your tenant - View the JSON response of the account from your tenant
- Sort the results using the sort syntax on the [list accounts](https://developer.sailpoint.com/docs/api/v3/list-accounts) API. - Sort the results, using the sort syntax on the [List Accounts endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts).
- Filter the results using the filter syntax on the [list accounts](https://developer.sailpoint.com/docs/api/v3/list-accounts) API. - Filter the results, using the filter syntax on the [List Accounts endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts).
## Get Account Data ## Get account data
First, retrieve the account data from the list accounts endpoint to show. The first thing your new page needs to do is get the account data to show. You can implement this by using the [List Accounts endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts).
Add this logic to the server side of the accounts list page at `src/routes/accounts/account-list/+page.server.ts`. To do so, add this logic to the server side of the accounts list page at `src/routes/accounts/account-list/+page.server.ts`:
```typescript ```typescript
// Import classes needed // Import classes needed
@@ -69,11 +69,11 @@ export const load = async ({locals}) => {
}; };
``` ```
Navigate back to your accounts list page and in your IDE you will see the response of the accounts after the page loads. Return to your accounts list page. In your IDE, you will see the response containing the accounts after the page loads.
Now that we have our account data, add a table to the UI and display our results. Now that you have your account data, you need to display the data. You can add a table to the UI and display your results.
Add the following code to `src/routes/accounts/account-list/+page.svelte`: To do so, add this code to `src/routes/accounts/account-list/+page.svelte`:
<details> <details>
@@ -172,15 +172,16 @@ Add the following code to `src/routes/accounts/account-list/+page.svelte`:
</details> </details>
Save the `+page.svelte` file and navigate back to the accounts list page and you will see up to 250 accounts in the table. Save the `+page.svelte` file and return to the accounts list page. You will see up to 250 accounts in the table.
## Pagination ## Pagination
You will likely have more than 250 accounts in your tenant, to handle more than 250 account you must implement pagination on your front end page. You will likely have more than 250 accounts in your tenant. To handle more than 250 accounts, you must implement pagination on your front end page.
Pagination is the process of paging through your records. With pagination, you can handle 1000 accounts in 4 pages of 250, for example.
Add the following code to allow you to paginate accounts in groups of 5, 10, 50, 100 and 250 depending on your requirement. To implement pagination, add the following code. This code allows you to paginate accounts in groups of 5, 10, 50, 100 and 250, depending on your requirement:
The highlighted portions of the code are the changes made to the previous code to allow for pagination. The highlighted portions of the code are the changes made to the previous code to allow pagination.
import Tabs from '@theme/Tabs'; import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem'; import TabItem from '@theme/TabItem';
@@ -356,15 +357,20 @@ export const load = async ({ url, locals }) => {
</TabItem> </TabItem>
</Tabs> </Tabs>
Navigate back to the accounts list page and you will see the paginator at the top of the page. You can now paginate through the accounts in your tenant. Return to the accounts list page. You will see the paginator at the top of the page. You can now paginate through the accounts in your tenant.
## Sort and Filter ## Sort and filter
Add the following highlighted code to allow you to sort and filter accounts in your tenant. To better view and organize the data displayed in your accounts list page, you may want to implement sorting and filtering.
Sorting is the process of organizing the data. You may want to provide users with a way to sort the data in ascending or descending alphabetical order based on the account name, for example.
Filtering is the process of limiting the displayed data based on specified details. You may want to provide users with a way to filter the data to only include accounts associated with one source, for example.
Once a user types in a filter or sorter and clicks the go button, the `onCreateGo` function is called and the page is reloaded with the new sorters and filters. To implement sorting and filtering, add the following highlighted code. It allows you to sort and filter the accounts in your tenant:
On the server side, the `getFilters` and `getSorters` functions are used to get the filters and sorters from the url. These are then passed to the list accounts endpoint to filter and sort the accounts. With this implementation, once a user types in a filter or sorter and clicks the 'Go' button, the UI Development Kit calls the `onCreateGo` function and reloads the page with the new sorters and filters.
On the server side, the kit uses the `getFilters` and `getSorters` functions to get the filters and sorters from the URL.
The kit then passes these functions to the [List Accounts endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts) to filter and sort the accounts.
<Tabs> <Tabs>
<TabItem value="accounts_page" label="account-list/+page.svelte" default> <TabItem value="accounts_page" label="account-list/+page.svelte" default>
@@ -547,10 +553,17 @@ export const load = async ({ url, locals }) => {
</TabItem> </TabItem>
</Tabs> </Tabs>
## Next Steps ## Error Handling
You have now implemented a new page to list all accounts in your tenant. You can now paginate, sort and filter the accounts in your tenant. You have now implemented a new page that lists all the accounts in your tenant, and you can now paginate, sort and filter the accounts in your tenant.
If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error. You can handle this error by adding a try catch block to the server side of the accounts list page. Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error, for example.
You can handle this error by adding a `try catch` block to the server side of the accounts list page.
Read the [error handling](./error-handling) guide to learn how to handle errors in your UI. To learn more about handling errors in your UI, refer to [Error Handling](./error-handling).
## Discuss
The most valuable resource for ISC developers is the SailPoint Developer Community itself, where ISC users and experts all over the world come together to ask questions and provide solutions.
To learn more about the ISC UI Development Kit and discuss it with SailPoint Developer Community members, go to the [SailPoint Developer Community Forum](https://developer.sailpoint.com/discuss/c/identity-security-cloud/6).

23
docs/tools/ui-development-kit/error-handling.md
View File

@@ -11,11 +11,18 @@ slug: /tools/ui-development-kit/error-handling
tags: ['UI', 'Error'] tags: ['UI', 'Error']
--- ---
If any of your backend calls result in a server error or bad request you'll want to handle those errors. Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error, for example.
You can handle this error by adding a `try catch` block to the server side of the accounts list page.
## 400 bad request If any of your backend calls result in a server error or bad request, you also want to handle those errors.
If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error. This example awaits the response and does not exit the program when a 4xx level status is received. If a 4xx level status is received then the user will be redirected to an error page. Read this guide to learn how to use the UI Development Kit to handle errors.
## 400 Bad Request
If you provide an invalid filter or sorter, the [List Accounts Endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts) returns a 400 error. This example awaits the response and doesn't exit the program when a 4xx level status is received. If a 4xx level status is received, the user is redirected to an error page.
Refer to this code block to learn how to implement error handling for invalid filters or sorters:
```typescript ```typescript
import {createConfiguration} from '$lib/sailpoint/sdk.js'; import {createConfiguration} from '$lib/sailpoint/sdk.js';
@@ -69,10 +76,12 @@ export const load = async ({url, locals}) => {
}; };
``` ```
## 500 server issues ## 500 Server Issues
You can update the code block to handle more than just the 400 level statuses. You can see the highlighted code changes to handle any error response from the API call. You can send back an error to the user with the status, a detailed message, the details about the parameters used that caused the error, and the error response from the API. You can update the code block to handle more than just the 400 level statuses. You can see the highlighted code changes to handle any error response from the API call. You can send back an error to the user with the status, a detailed message, the details about the parameters used that caused the error, and the error response from the API.
Refer to this code block to learn how to implement error handling for other non-400 errors:
```typescript ```typescript
import {createConfiguration} from '$lib/sailpoint/sdk.js'; import {createConfiguration} from '$lib/sailpoint/sdk.js';
import {getFilters, getLimit, getPage, getSorters} from '$lib/Utils.js'; import {getFilters, getLimit, getPage, getSorters} from '$lib/Utils.js';
@@ -126,3 +135,9 @@ export const load = async ({url, locals}) => {
return {accountData, totalCount, params: {page, limit, sorters, filters}}; return {accountData, totalCount, params: {page, limit, sorters, filters}};
}; };
``` ```
## Discuss
The most valuable resource for ISC developers is the SailPoint Developer Community itself, where ISC users and experts all over the world come together to ask questions and provide solutions.
To learn more about the ISC UI Development Kit and discuss it with SailPoint Developer Community members, go to the [SailPoint Developer Community Forum](https://developer.sailpoint.com/discuss/c/identity-security-cloud/6).

54
docs/tools/ui-development-kit/getting-started.mdx
View File

@@ -11,23 +11,23 @@ slug: /tools/ui-development-kit/getting-started
tags: ['UI'] tags: ['UI']
--- ---
In this guide you will get an understanding of where things are in the UI Development Kit. After reading this guide you will be able to: Read this guide to learn about the UI Development Kit and how to use it. Once you have read this guide, you will be able to do the following:
- Change the name of your custom user interface - [Change your custom user interface (UI) name](#change-your-custom-ui-name)
- Find where you can update the sidebar to include new items - [Update your sidebar to include new items](#update-the-sidebar)
- Add new routes and pages - [Add new routes and pages](#add-new-routes-and-pages)
## Change the name of your custom user iterface ## Change your custom UI name
By default, the name of this project is `UI Development Kit`. You will need to update the code in two different places to change the name. By default, the name of this project is 'UI Development Kit'. To update the name of your custom UI, you must update the code in two different places.
Update the electron app window name by updating the text in `src/app.html` on line 7. Update the Electron application window name. To do so, update the text in `src/app.html` on line 7:
```html ```html
<title>UI Development Kit</title> <title>UI Development Kit</title>
``` ```
Update the home page by changing the text in `src/routes/+layout.svelte` on line 124. Update the home page. To do so, change the text in `src/routes/+layout.svelte` on line 124:
```html ```html
<p class="text-xl lg:!block hidden">UI Development Kit</p> <p class="text-xl lg:!block hidden">UI Development Kit</p>
@@ -37,7 +37,7 @@ Update the home page by changing the text in `src/routes/+layout.svelte` on line
The sidebar is located at `src/lib/sidebar/navigation.ts`. The sidebar is located at `src/lib/sidebar/navigation.ts`.
Add a new sidebar item by adding the following code snippet to the file under the content array. To add a new sidebar item, add this code snippet to the file under the `content` array:
```typescript ```typescript
import HomeSvg from '$lib/Components/SVGs/HomeSVG.svelte'; import HomeSvg from '$lib/Components/SVGs/HomeSVG.svelte';
@@ -61,22 +61,22 @@ export const navigation = [
``` ```
:::info :::info
A custom svg icon can be added for each sidebar item. Save and import your icon svg under `lib/Components/SVGs/*`. You can add a custom SVG icon for each sidebar item. Save and import your icon svg under `lib/Components/SVGs/*`.
::: :::
Now we have a new sidebar link, but it points to a route that doesn't exist and will show a 404 not found when clicked. You now have a new sidebar link, but it points to a route that doesn't exist yet. If you click the link, you will encounter a 404 error.
Next, we will create a route and page for this new sidebar item. To learn how to add a route and page for the new sidebar item, refer to [Add route and new page](#add-route-and-new-page).
## Add route and new page ## Add route and new page
You can create new routes by creating new folders and pages for those routes under `src/routes`. To create new routes, you can create new folders and pages for those routes under `src/routes`.
For example: Here is an example of how to create a new route:
The route `/home/example-pages` will take you to `src/routes/home/example-pages/+page.svelte`. The route `/home/example-pages` takes you to `src/routes/home/example-pages/+page.svelte`.
The route `/home/example-pages/list-of-identities` will take you to `src/routes/home/example-pages/list-of-identities/+page.svelte` The route `/home/example-pages/list-of-identities` takes you to `src/routes/home/example-pages/list-of-identities/+page.svelte`.
```bash ```bash
. .
@@ -95,7 +95,7 @@ The route `/home/example-pages/list-of-identities` will take you to `src/routes/
With this information, you can create a new route for an accounts landing page and a page that lists accounts. With this information, you can create a new route for an accounts landing page and a page that lists accounts.
The new project structure would look like: The new project structure would look like this:
```bash ```bash
├── src ├── src
@@ -116,7 +116,7 @@ The new project structure would look like:
│   │   └── +page.svelte # Account list page at route `accounts/account-list` │   │   └── +page.svelte # Account list page at route `accounts/account-list`
``` ```
You can now update those files with the following content so that they show up correctly. You can now update those files with this content so that they display correctly:
import Tabs from '@theme/Tabs'; import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem'; import TabItem from '@theme/TabItem';
@@ -147,6 +147,20 @@ import TabItem from '@theme/TabItem';
</TabItem> </TabItem>
</Tabs> </Tabs>
Restart the project with `npm run dev` and you will see the new sidebar item and the new route and page. To see the new sidebar item, as well as its new route and page, restart the project.
You can now [implement the accounts list page](/docs/tools/ui-development-kit/accounts-list). To restart the project, run this command:
```bash
npm run dev
```
Once you have run the command, the new sidebar item, as well as its new route and page, will display.
Now that you have the new sidebar item, its new route, and its new page, you can implement the page. To continue following this example and learn how to implement an accounts list page, refer to [Accounts List](/docs/tools/ui-development-kit/accounts-list).
## Discuss
The most valuable resource for ISC developers is the SailPoint Developer Community itself, where ISC users and experts all over the world come together to ask questions and provide solutions.
To learn more about the ISC UI Development Kit and discuss it with SailPoint Developer Community members, go to the [SailPoint Developer Community Forum](https://developer.sailpoint.com/discuss/c/identity-security-cloud/6).

36
docs/tools/ui-development-kit/index.md
View File

@@ -15,21 +15,21 @@ tags: ['UI']
The SailPoint UI Development Kit is a project you can use to quickly develop custom user interfaces that interact with Identity Security Cloud (ISC). The SailPoint UI Development Kit is a project you can use to quickly develop custom user interfaces that interact with Identity Security Cloud (ISC).
The UI Development Kit provides you with a framework to build your own applications or processes on the ISC platform. The UI Development Kit provides you with a framework you can use to build your own applications or processes on the ISC platform.
Learn how to use the SailPoint UI Development Kit in this guide. Read this guide to learn how to use the SailPoint UI Development Kit.
## Requirements ## Requirements
You need the following to use the UI Development Kit: These are the requirements to use the UI Development Kit:
- **Node**. To learn how to download it and set it up, go [here](https://nodejs.org/en/download). - **Node**: To learn how to download Node and set it up, go [here](https://nodejs.org/en/download).
- Your tenant name in ISC. To learn how to find it, refer to [Getting Started](/docs/api/getting-started#find-your-tenant-name). The SDK will use this tenant name to connect to your ISC instance. - **Your ISC tenant name**. To learn how to find it, refer to [Getting Started](/docs/api/getting-started#find-your-tenant-name). The SDK will use this tenant name to connect to your ISC instance.
## Clone the project ## Clone the project
You can find the UI Development Kit and its examples in the Github repo [here](https://github.com/sailpoint-oss/ui-development-kit). The first step to setting up the UI Development Kit is to clone the project from its GitHub repository. You can find the UI Development Kit and its examples in the Github repository [here](https://github.com/sailpoint-oss/ui-development-kit).
To clone the project, you can run this command: To clone the project, you can run this command:
@@ -39,11 +39,13 @@ git clone git@github.com:sailpoint-oss/ui-development-kit.git
## Project structure ## Project structure
This project is built on [Svelte-Kit](https://kit.svelte.dev/) and ultimately builds an [electron](https://www.electronjs.org/) app. This project is built on [Svelte-Kit](https://kit.svelte.dev/) and ultimately builds an [Electron](https://www.electronjs.org/) application.
We have configured the environment and building of the application so that all you are left to do is create your custom user interface without having to worry about those details. Setting up the project is simple. The environment and application building process are configured so you can start creating custom UIs immediately. However, it is still helpful to understand the project structure.
You will spend most of your time in the `src` folder, adding new pages, routes and sidebar items. This will be explained later in [adding a new component](./adding-a-new-component). For now, you can run and develop the project locally by following [these steps](#run-the-application-for-local-development). Most of your activity will involve the `src` folder, such as adding new pages, routes, and sidebar items. You will learn more about these processes later in [Add a New Component](./adding-a-new-component).
This is the project structure:
```bash ```bash
. .
@@ -71,16 +73,26 @@ You will spend most of your time in the `src` folder, adding new pages, routes a
## Run the application for local development ## Run the application for local development
In the root of the project run this command to install dependencies: To run and develop the project locally, follow these steps:
1. In the root of the project run this command to install dependencies:
```bash ```bash
npm install npm install
``` ```
To start the application run: 2. To start the application, run this command:
```bash ```bash
npm run dev npm run dev
``` ```
Continue to [Exploring the UI Development Kit](./getting-started.md) ## Get started
To start learning how to use the UI Development Kit and explore its possibilities, refer to [Getting Started](./getting-started.md).
## Discuss
The most valuable resource for ISC developers is the SailPoint Developer Community itself, where ISC users and experts all over the world come together to ask questions and provide solutions.
To learn more about the ISC UI Development Kit and discuss it with SailPoint Developer Community members, go to the [SailPoint Developer Community Forum](https://developer.sailpoint.com/discuss/c/identity-security-cloud/6).