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

Work in progress for new ui kit documentation

Browse Source
This commit is contained in:
Tyler Mairose
2025-08-14 11:08:50 -04:00
parent 58b05375df
commit 8000d87f59
7 changed files with 128 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,6 @@ Read this guide to learn about the UI Development Kit and how to use it. Once yo
- [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
@@ -44,135 +43,23 @@ You will be prompted to enter the following information:
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.
To enable these components, start the project and open the component selector. You can do this by clicking on the "Component Selector" tab in the sidebar.
![select components](./img/component-selector.png)
You can toggle the components you want to enable. You will notice that when you enable a component, it will be automatically added to your sidebar.
```typescript
## Create a new component
The sidebar is located at `src/lib/sidebar/navigation.ts`.
To create a new component, you can use the `npm run generate:component <component-name>` command. This will do the following:
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).
- Creates a new folder in the `projects/sailpoint-components/src/lib` directory with the name of your component.
- Creates the new component files in the new folder, including the component HTML, TypeScript, and CSS files.
- Updates the component selector to include your new component in the list of available components.
- Updates the `app.routes.ts` file to add a new route for your component.
- Updates the `app.component.html` file to add a link to your new component in the sidebar.
- Updates the `public-api.ts` file to export your new component so that it can be used in other parts of the application.
## Discuss