mirror of
https://github.com/LukeHagar/developer.sailpoint.com.git
synced 2025-12-08 12:27:47 +00:00
181 lines
7.1 KiB
Plaintext
181 lines
7.1 KiB
Plaintext
---
|
|
id: udk-explore
|
|
title: Getting Started
|
|
pagination_label: UDK
|
|
sidebar_label: Getting Started
|
|
sidebar_position: 1
|
|
sidebar_class_name: rudk
|
|
keywords: ['UI', 'development', 'kit']
|
|
description: Develop custom user interfaces.
|
|
slug: /tools/ui-development-kit/getting-started
|
|
tags: ['UI']
|
|
---
|
|
|
|
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:
|
|
|
|
- [Create a new environment](#create-a-new-environment)
|
|
- [Enable shared components from the component selector](#enable-shared-components-from-the-component-selector)
|
|
- [Create a new component](#create-a-new-component)
|
|
- [Add route and new page](#add-route-and-new-page)
|
|
|
|
## Create a new environment
|
|
|
|
:::info
|
|
|
|
The UI Development Kit uses the existing environment configuration from the SailPoint CLI. You MUST re-enter your client ID and secret as they are not shared between projects.
|
|
|
|
:::
|
|
|
|
To create a brand new environment, select the "Create new environment" option in the dropdown menu when you first open the UI Development Kit.
|
|
|
|
|
|
|
|
You will be prompted to enter the following information:
|
|
- **Environment name**: The user friendly name of the environment you want to create.
|
|
- **Tenant name**: The name of your Identity Security Cloud tenant. This is used to connect to your ISC instance.
|
|
- **Tenant URL**: The web URL used to access your Identity Security Cloud tenant (ex. https://tenant.identitynow.com). This is used during the OAuth process.
|
|
- **API URL**: The API URL used to access your Identity Security Cloud tenant (ex. https://tenant.api.identitynow.com). This is used for the API calls made by certain commands.
|
|
- **Authentication method**: The authentication method you want to use for this environment. You can choose between OAuth and Personal Access Token (PAT).
|
|
- **Client ID**: The client ID of your PAT. This is used to authenticate your requests to the Identity Security Cloud API.
|
|
- **Client Secret**: The client secret of your PAT. This is used to authenticate your requests to the Identity Security Cloud API.
|
|
|
|
|
|
## Enable shared components from the component selector
|
|
|
|
By default, the UI Development Kit comes with a set of shared components that you can use in your custom UIs. These components are located in the `projects/sailpoint-components` folder and are built by the SailPoint Developer Relations team as well as other Community members.
|
|
|
|
To enable these components, start the project and open the component selector. You can do this by clicking on the "Components" button in the top right corner of the application.
|
|
|
|
```typescript
|
|
|
|
## Create a new component
|
|
|
|
The sidebar is located at `src/lib/sidebar/navigation.ts`.
|
|
|
|
To add a new sidebar item, add this code snippet to the file under the `content` array:
|
|
|
|
```typescript
|
|
import HomeSvg from '$lib/Components/SVGs/HomeSVG.svelte';
|
|
import ReportsSvg from '$lib/Components/SVGs/ReportsSVG.svelte';
|
|
|
|
export const navigation = [
|
|
{
|
|
name: 'Main',
|
|
content: [
|
|
...
|
|
{
|
|
url: '/home/account-list',
|
|
name: 'Account List',
|
|
description:
|
|
'an example showcasing how to list accounts',
|
|
icon: ReportsSvg,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
```
|
|
|
|
:::info
|
|
You can add a custom SVG icon for each sidebar item. Save and import your icon svg under `lib/Components/SVGs/*`.
|
|
:::
|
|
|
|
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.
|
|
|
|
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
|
|
|
|
To create new routes, you can create new folders and pages for those routes under `src/routes`.
|
|
|
|
Here is an example of how to create a new route:
|
|
|
|
The route `/home/example-pages` takes you to `src/routes/home/example-pages/+page.svelte`.
|
|
|
|
The route `/home/example-pages/list-of-identities` takes you to `src/routes/home/example-pages/list-of-identities/+page.svelte`.
|
|
|
|
```bash
|
|
.
|
|
├── src
|
|
│ └── routes
|
|
│ ├── home
|
|
│ │ ├── example-pages
|
|
│ │ │ ├── +page.svelte
|
|
│ │ │ ├── inactive-identities-with-access
|
|
│ │ │ ├── list-of-identities
|
|
│ │ │ ├── missing-cloud-life-cycle-state
|
|
│ │ │ ├── reports.ts
|
|
│ │ │ ├── source-aggregations
|
|
│ │ │ └── source-owner-configured
|
|
```
|
|
|
|
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 this:
|
|
|
|
```bash
|
|
├── src
|
|
│ └── routes
|
|
│ ├── home
|
|
│ │ ├── example-pages
|
|
│ │ │ ├── +page.svelte
|
|
│ │ │ ├── inactive-identities-with-access
|
|
│ │ │ ├── list-of-identities
|
|
│ │ │ ├── missing-cloud-life-cycle-state
|
|
│ │ │ ├── reports.ts
|
|
│ │ │ ├── source-aggregations
|
|
│ │ │ └── source-owner-configured
|
|
│ ├── accounts
|
|
│ │ ├── +page.svelte # Root accounts page at route `accounts`
|
|
│ │ └── account-list
|
|
│ │ ├── +page.server.ts # Server side code for the account list page
|
|
│ │ └── +page.svelte # Account list page at route `accounts/account-list`
|
|
```
|
|
|
|
You can now update those files with this content so that they display correctly:
|
|
|
|
import TabItem from '@theme/TabItem';
|
|
import Tabs from '@theme/Tabs';
|
|
|
|
<Tabs>
|
|
<TabItem value="accounts_page" label="+page.svelte" default>
|
|
|
|
```html
|
|
<div class="flex justify-center flex-col align-middle gap-2">
|
|
<div class="card p-4">
|
|
<p class="text-2xl text-center">Accounts Homepage</p>
|
|
</div>
|
|
</div>
|
|
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="accounts_list_server" label="accounts-list/+page.server.ts">
|
|
|
|
```html
|
|
<div class="flex justify-center flex-col align-middle gap-2">
|
|
<div class="card p-4">
|
|
<p class="text-2xl text-center">List of all Accounts</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
To see the new sidebar item, as well as its new route and page, restart the project.
|
|
|
|
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). |