# Grafana 7 Plugin plugin dev: Dynamically adding options

**URL:** <https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865>\
**Category:** Grafana Plugin Development\
**Created:** [May 25, 2020, 10:25am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865 "2020-05-25T10:25:54Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![goox](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@goox](https://community.grafana.com/u/goox)\
**Post date:** [May 25, 2020, 10:25am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/1 "2020-05-25T10:25:54Z")

</div>

Hello,

with angular JS, we were able to dynamically add settings on the Settings page of a plugin. For example, in the “Gauge” panel, we can click on “Add threshold” in “Thresholds” and it dynamically adds a new line representing the new threshold.

I read the tutorial, at step 6, we can add new options, but I don’t know how I can do that dynamically.

> **[Build a panel plugin](https://grafana.com/tutorials/build-a-panel-plugin/#6)**
>
> Learn at how to create a custom visualization for your dashboards.

Is this still possible with Typescript, in Grafana 7?

Thanks

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [May 25, 2020, 12:25pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/2 "2020-05-25T12:25:07Z")

</div>

Yes, there are two ways you can do this.

If you simply want to toggle visibility of options depending on the value of another option, you can use the `showIf` property when defining the control.

```auto
.addBooleanSwitch({
  path: 'showLegend',
  name: 'Show legend',
})
.addNumberSwitch({
  path: 'legendSize',
  name: 'Size of the legend',
  showIf: (config: SimpleOptions) => config.showLegend,
})

```

If you need more control than what `showIf` gives you, you can also create your own custom options editor, which is more involved.

---

<div class="post-metadata">

**Author:** ![goox](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@goox](https://community.grafana.com/u/goox)\
**Post date:** [May 25, 2020, 1:53pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/3 "2020-05-25T13:53:45Z")

</div>

Do you have example of code with a custom options editor ? I need to add new fields when the user click on a link, I can’t use “showIf” to achieve this unfortunately.

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [May 25, 2020, 2:10pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/4 "2020-05-25T14:10:22Z")

</div>

The starter for panel plugins used to explain the custom editor approach before the options builder was a thing. You can browse the history of the [simple-react-panel](https://github.com/grafana/simple-react-panel/tree/1c238de7da40ed1c00e20354764bac140cf4f5bc/src) to see how create one.

Check out [SimpleEditor.tsx](https://github.com/grafana/simple-react-panel/blob/1c238de7da40ed1c00e20354764bac140cf4f5bc/src/SimpleEditor.tsx).

You also need to configure your plugin to use the custom editor in [module.ts](https://github.com/grafana/simple-react-panel/blob/1c238de7da40ed1c00e20354764bac140cf4f5bc/src/module.ts#L6).

---

<div class="post-metadata">

**Author:** ![goox](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@goox](https://community.grafana.com/u/goox)\
**Post date:** [May 25, 2020, 3:42pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/5 "2020-05-25T15:42:21Z")

</div>

Great ! Thank you for your help 👍

---

<div class="post-metadata">

**Author:** ![kramik1](https://avatars.discourse-cdn.com/v4/letter/k/c68b51/32.png) [@kramik1](https://community.grafana.com/u/kramik1)\
**Post date:** [June 22, 2020, 7:39pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/6 "2020-06-22T19:39:16Z")

</div>

I need to do a custom panel to support a svg id to data series mapping for color conditions and composites. Basically a polystat panel but using an svg image. I have been trying to look through the source for a couple of the panels and it appears the builder has no solution for this. So in reality, setEditor really isn’t deprecated…

If polystat was react and not angular it might serve as a better example. Any plans to convert it to react?

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [June 23, 2020, 6:03am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/7 "2020-06-23T06:03:25Z")

</div>

Yes, I think I was unclear in my reply. As you say, the `setEditor` is still very much available for those who need more advanced UIs than what the options builder provides. However, with the introduction of the options builder, most plugin developers shouldn’t have to use `setEditor`.

As for the polystat, I don’t know whether there are any plans to convert it to React.

---

<div class="post-metadata">

**Author:** ![kramik1](https://avatars.discourse-cdn.com/v4/letter/k/c68b51/32.png) [@kramik1](https://community.grafana.com/u/kramik1)\
**Post date:** [June 23, 2020, 11:59am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/8 "2020-06-23T11:59:37Z")

</div>

So why mark it as deprecated? Shouldn’t there be a comment instead to prefer the builder method if possible. I figured since it was deprecated that the builder must have someway of adding custom panels.

Thanks for coming back and leaving a reply on an old thread. It is appreciated 🙂

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [June 24, 2020, 8:16am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/9 "2020-06-24T08:16:48Z")

</div>

Hm. You’re right, it’s indeed marked as deprecated. Not sure why. I’ll check with the team and get back to you.

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [June 24, 2020, 8:30am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/10 "2020-06-24T08:30:10Z")

</div>

It’s indeed deprecated. I apologize for misleading you. Here’s the reply from one of the core devs:

> Nope, it’s deprecated. We want consistent UI for panel options, and custom editor (setEditor) will not guarantee that.
> 
> So whenever there is a case when something cannot be achieved with declarative options API, it’s a case for a feature request/API update.
> 
> `addCustomEditor` in the declarative options API should be flexible enough to implement advanced editors. And it’s available for both panel options and field options.

---

<div class="post-metadata">

**Author:** ![kramik1](https://avatars.discourse-cdn.com/v4/letter/k/c68b51/32.png) [@kramik1](https://community.grafana.com/u/kramik1)\
**Post date:** [June 25, 2020, 9:21pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/11 "2020-06-25T21:21:03Z")

</div>

You didn’t mislead. Just frustrated because the documentation for plugins isn’t great and I am new to react. They still support angularjs plugins so I take it they don’t plan on removing it anytime soon. I am mostly reading source code and comments in that code to fill in knowledge gaps.Thanks for getting the core developer feedback. It is appreciated.

---

<div class="post-metadata">

**Author:** ![kramik1](https://avatars.discourse-cdn.com/v4/letter/k/c68b51/32.png) [@kramik1](https://community.grafana.com/u/kramik1)\
**Post date:** [July 21, 2020, 8:39pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/12 "2020-07-21T20:39:50Z")

</div>

Just in case someone wonders what I ended up doing… The standardoptions function in the code added the standard reduce options. I extracted that part as not all of it was relevant to my code. So I have 3 sections, useFieldConfig for the overrides that I wanted (i.e. FieldConfigProperty.Thresholds), useCustomConfig for extra drop down item I wanted in the overides and setPanelOptions which has 3 standardoptions I wanted that I mentioned above. The reduceOptions will do the calculations for you for the mean.

I downloaded and looked through the grafana source for a number of days using VS Code while also looking at all of their builtin plugins and various add on ones. My plugin was simple at the end because of the overrides that are built into the framework but YMMV.

---

<div class="post-metadata">

**Author:** ![kranjdoo](https://avatars.discourse-cdn.com/v4/letter/k/258eb7/32.png) [@kranjdoo](https://community.grafana.com/u/kranjdoo)\
**Post date:** [August 14, 2020, 10:41am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/13 "2020-08-14T10:41:12Z")

</div>

> [@marcusolsson](#):
>
> `addCustomEditor` in the declarative options API should be flexible enough to implement advanced editors. And it’s available for both panel options and field options.

Is there an example how to create a class for addCustomEditor?  
I can’t really use the example from setEditor anymore.

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [August 17, 2020, 2:44pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/14 "2020-08-17T14:44:26Z")

</div>

There’s no official examples on this yet, but I’m using a custom editor in one of my plugins. Feel free to check it out:

> <https://github.com/marcusolsson/grafana-treemap-panel/blob/master/src/module.ts#L28-L38>

---

<div class="post-metadata">

**Author:** ![alessandrovzp](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/alessandrovzp/32/14071_2.png) [@alessandrovzp](https://community.grafana.com/u/alessandrovzp)\
**Post date:** [December 16, 2020, 7:19pm UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/15 "2020-12-16T19:19:32Z")

</div>

Thanks a lot dude, your answer will be a huge step to my target.

---

<div class="post-metadata">

**Author:** ![murphy1312](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/murphy1312/32/16219_2.png) [@murphy1312](https://community.grafana.com/u/murphy1312)\
**Post date:** [April 30, 2021, 8:07am UTC](https://community.grafana.com/t/grafana-7-plugin-plugin-dev-dynamically-adding-options/30865/16 "2021-04-30T08:07:59Z")

</div>

Usually deprecated functions are still available for legacy compatibility. I don’t see anything rendered by my .setEditor/.setDefaults call at all, so you should not deprecate it but remove it completely then.