# Ignition sdk prespective component development

**URL:** <https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [April 16, 2025, 11:17am UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167 "2025-04-16T11:17:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![avinash.jha](https://avatars.discourse-cdn.com/v4/letter/a/a9adbd/32.png) [@avinash.jha](https://forum.inductiveautomation.com/u/avinash.jha)\
**Post date:** [April 16, 2025, 11:17am UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/1 "2025-04-16T11:17:20Z")

</div>

I want to create a button folder in the prespective component-\>rad component example and move two action buttons that i have created, the button folder shall open and close and shows inside buttons

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [April 16, 2025, 1:08pm UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/2 "2025-04-16T13:08:07Z")

</div>

Reading this makes me feel like an LLM being treated like a Google search engine

jokes jokes, but really if you elaborate and share examples and specific requests, there’s lots of people happy to help here

---

<div class="post-metadata">

**Author:** ![dillon](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dillon/32/81537_2.png) [@dillon](https://forum.inductiveautomation.com/u/dillon)\
**Post date:** [April 16, 2025, 2:07pm UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/3 "2025-04-16T14:07:33Z")

</div>

> [@kgamble](#):
>
> Reading this makes me feel like an LLM being treated like a Google search engine

This.

This is a community forum to help each other, not a place to look for volunteers to do your work for you 😆

---

<div class="post-metadata">

**Author:** ![avinash.jha](https://avatars.discourse-cdn.com/v4/letter/a/a9adbd/32.png) [@avinash.jha](https://forum.inductiveautomation.com/u/avinash.jha)\
**Post date:** [April 16, 2025, 2:14pm UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/4 "2025-04-16T14:14:50Z")

</div>

[ignition-sdk-examples/perspective-component at master · inductiveautomation/ignition-sdk-examples · GitHub](https://github.com/inductiveautomation/ignition-sdk-examples/tree/master/perspective-component)

I am extending this project and want to add a button folder in the prespective component-\> rad component. I have created two new buttons with name as screencapture and csvtoalarmlogconverter and want to move those inside a button folder and the name of the button folder would be actionbuttons. I am not a full stack developer, just learning by doing

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [April 16, 2025, 2:18pm UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/5 "2025-04-16T14:18:45Z")

</div>

I am still not 100% sure I am following the goal here

But maybe my guess is you are looking to put your components into a dedicated Palette category in the perspective component browser? To do that, you need to change what you are providing `.setPaletteCategory(ExampleComponents.COMPONENT_CATEGORY)` in your descriptor.

> <https://github.com/keith-gamble/example-perspective-component-module/blob/2eb10d7d3ae945919f1227ba164764e86c8cbec3/common/src/main/java/dev/kgamble/perspective/examples/common/components/input/Button.java#L56C4-L56C61>

Maybe going through this detailed tutorial I wrote my help: [Introduction | Example Perspective Component Module](https://keith-gamble.github.io/example-perspective-component-module/)

Here is the source repo for that tutorial:

> **[GitHub - keith-gamble/example-perspective-component-module: An Example Repository for building Ignition...](https://github.com/keith-gamble/example-perspective-component-module)**
>
> An Example Repository for building Ignition Perspective Component Modules

---

<div class="post-metadata">

**Author:** ![avinash.jha](https://avatars.discourse-cdn.com/v4/letter/a/a9adbd/32.png) [@avinash.jha](https://forum.inductiveautomation.com/u/avinash.jha)\
**Post date:** [April 17, 2025, 7:51am UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/6 "2025-04-17T07:51:24Z")

</div>

Thank you for your reply. The goal here is to create a dropdown button folder in the example UI Library component and move example button and checkbox button inside it. As per the example given by you in the repo and i tried that too. I want to have similar structure like Input-\>Button-\>Primary, secondary. See attached images for reference. Once it works i want to create the similar button folder in the Rad things and move CsvtToAlarmLog and ScreenCapture button inside it

 ![Screenshot 2025-04-17 095006](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a87921c915dba441da96f0caba469920ac8a48d4.png)

 ![Screenshot 2025-04-17 094426](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/6/664ac4d8c83038ad6a281b410910097afe426324.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [April 17, 2025, 11:37am UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/7 "2025-04-17T11:37:37Z")

</div>

I understand now. I believe you are looking to add `Variants` to your component?

Keep in mind, and someone at IA can correct me if I am wrong, but the only differences you can have in your variant from a user standpoint are a base difference of props. I believe the intent is for each of the elements in the list to be the same, with just different default props applied.

That being said, heres how to achieve it.

On your actual component builder, there is an `addPalleteEntry` method that can add these additional variants for you, [See the docs page here](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.47/com/inductiveautomation/perspective/common/api/ComponentDescriptorImpl.ComponentBuilder.html#addPaletteEntry(java.lang.String,java.lang.String,java.lang.String,java.awt.image.BufferedImage,com.inductiveautomation.ignition.common.gson.JsonObject))

Lets say in our button example, you wanted to add a second variant that has a default text set to it, you could create a custom JsonObject with the props you want to set, and then just add the palette entry in your builder.

```python
static JsonObject customButtonProps = new JsonObject();
static {
	customButtonProps.addProperty("text", "Click Me");
}

public static ComponentDescriptor DESCRIPTOR = ComponentDescriptorImpl.ComponentBuilder.newBuilder()
		.setPaletteCategory(ExampleComponents.COMPONENT_CATEGORY)
		.setId(COMPONENT_ID)
		.setModuleId(Constants.MODULE_ID)
		.setSchema(ComponentUtilities.getSchemaFromFilePath(PROPS_SCHEMA_PATH))
		.setEvents(List.of(ActionPerformedDescriptor))
		.setName(COMPONENT_NAME)
		.addPaletteEntry("", COMPONENT_NAME, COMPONENT_DESCRIPTION, thumbnail, null)
		.setDefaultMetaName(COMPONENT_DEFAULT_NAME)
		.setResources(ExampleComponents.BROWSER_RESOURCES)
		.addPaletteEntry("default-text-button", "Button with Default Text", "A button with default text", thumbnail, customButtonProps)
		.build();

```

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [April 17, 2025, 11:55am UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/8 "2025-04-17T11:55:55Z")

</div>

Also, I updated my example project to show adding component variants in detail.

[https://keith-gamble.github.io/example-perspective-component-module/Guides/Adding%20Components/variants](https://keith-gamble.github.io/example-perspective-component-module/Guides/Adding%20Components/variants)

Let me know if anything is unclear or I should add more info!

---

<div class="post-metadata">

**Author:** ![avinash.jha](https://avatars.discourse-cdn.com/v4/letter/a/a9adbd/32.png) [@avinash.jha](https://forum.inductiveautomation.com/u/avinash.jha)\
**Post date:** [April 17, 2025, 12:40pm UTC](https://forum.inductiveautomation.com/t/ignition-sdk-prespective-component-development/105167/9 "2025-04-17T12:40:32Z")

</div>

It is now somewhat working, what I am trying here is the buttonfolder shall have different icon and button shall have different icon. I tried that, but it is taking same icon and the buttonfolder with svg icon is coming as a separate entity and also button is coming under it. If we create a two java classes then to access the private attributes u need getter and setter or make them as a public. That is not advised, i wish we can setup a teams call. So that i can explain the issue better
