# Passing user click value from markdown component into custom prop

**URL:** <https://forum.inductiveautomation.com/t/passing-user-click-value-from-markdown-component-into-custom-prop/88311>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 3, 2024, 7:52pm UTC](https://forum.inductiveautomation.com/t/passing-user-click-value-from-markdown-component-into-custom-prop/88311 "2024-04-03T19:52:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryan\_Ahlstrom](https://avatars.discourse-cdn.com/v4/letter/r/ecb155/32.png) [@Ryan\_Ahlstrom](https://forum.inductiveautomation.com/u/Ryan_Ahlstrom)\
**Post date:** [April 3, 2024, 7:52pm UTC](https://forum.inductiveautomation.com/t/passing-user-click-value-from-markdown-component-into-custom-prop/88311/1 "2024-04-03T19:52:38Z")

</div>

Hi, we are trying to use the Color Picker from the Powercharts in a custom pen configuration view. Since the Color Picker component isn't exposed natively as a perspective component, we are trying to accomplish it by calling the class in a markdown component.

```auto
<div><div><div class="ia_colorPickerCommon__modal"><div class="saturation-container"><div style="position: absolute; inset: 0px; background: rgb(255, 0, 21);"><style>
          .saturation-white {
            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));
            background: linear-gradient(to right, #fff, rgba(255,255,255,0));
          }
          .saturation-black {
            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));
            background: linear-gradient(to top, #000, rgba(0,0,0,0));
          }
        </style><div style="position: absolute; inset: 0px;" class="saturation-white"><div style="position: absolute; inset: 0px;" class="saturation-black"></div><div style="position: absolute; top: 7.05882%; left: 82.7004%; cursor: default;"><div class="ia_colorPickerCommon__ringPointer"></div></div></div></div></div><div class="controls-container"><div class="hue-container"><div style="position: absolute; inset: 0px;"><div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;"><style>
            .hue-horizontal {
              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to right, #f00 0%, #ff0
                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }

            .hue-vertical {
              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
            }
          </style><div style="position: absolute; left: 98.6395%;"><div class="ia_colorPickerCommon__circlePointer"></div></div></div></div></div><div class="value-container"><span class="swatch" style="background-color: rgb(237, 41, 57);"></span><label>Hex</label><input type="text" value="#ed2939"></div></div></div></div></div><div></div>

```

It is partially rendering, but am not sure if we can have the user have the same functionality.

Thanks,

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 3, 2024, 8:03pm UTC](https://forum.inductiveautomation.com/t/passing-user-click-value-from-markdown-component-into-custom-prop/88311/2 "2024-04-03T20:03:53Z")

</div>

I don't know if it would help, but are you aware of [Perspective Draggable Color Picker](https://inductiveautomation.com/exchange/2388/overview) by Nicoli Liedtke on the Ignition Exchange?

![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/87d777f9f3874a84843f476dde1f04b5281eb0c0.png)