Grafana 7 Plugin plugin dev: Dynamically adding options

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.

Is this still possible with Typescript, in Grafana 7?

Thanks

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.

.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.

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.

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 to see how create one.

Check out SimpleEditor.tsx.

You also need to configure your plugin to use the custom editor in module.ts.

1 Like

Great ! Thank you for your help :+1:

1 Like

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?

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.

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 :slight_smile:

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

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.

1 Like

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.