LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-09 20:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI Dev Kit Docs

Browse Source
This commit is contained in:
Tyler Mairose
2025-08-05 16:25:19 -04:00
parent 1d8607b04f
commit 58b05375df
4 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,27 +13,42 @@ 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:
- [Change your custom user interface (UI) name](#change-your-custom-ui-name)
- [Update your sidebar to include new items](#update-the-sidebar)
- [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)
## Change your custom UI name
## Create a new environment
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.
:::info
Update the Electron application window name. To do so, update the text in `src/app.html` on line 7:
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.
```html
<title>UI Development Kit</title>
```
:::
Update the home page. To do so, change the text in `src/routes/+layout.svelte` on line 124:
To create a brand new environment, select the "Create new environment" option in the dropdown menu when you first open the UI Development Kit.
```html
<p class="text-xl lg:!block hidden">UI Development Kit</p>
```
![Create new environment](./img/environment-creation.png)
## Update the sidebar
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`.
@@ -118,8 +133,8 @@ The new project structure would look like this:
You can now update those files with this content so that they display correctly:
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';
<Tabs>
<TabItem value="accounts_page" label="+page.svelte" default>