LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-09 12:27:47 +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

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

@@ -11,23 +11,23 @@ slug: /tools/ui-development-kit/getting-started
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
- Find where you can update the sidebar to include new items
- Add new routes and pages
- [Change your custom user interface (UI) name](#change-your-custom-ui-name)
- [Update your sidebar to include new items](#update-the-sidebar)
- [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
<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
<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`.
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
import HomeSvg from '$lib/Components/SVGs/HomeSVG.svelte';
@@ -61,22 +61,22 @@ export const navigation = [
```
:::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
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
.
@@ -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.
The new project structure would look like:
The new project structure would look like this:
```bash
├── src
@@ -116,7 +116,7 @@ The new project structure would look like:
│   │   └── +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 TabItem from '@theme/TabItem';
@@ -147,6 +147,20 @@ import TabItem from '@theme/TabItem';
</TabItem>
</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).