I find this (https://github.com/looker/custom_visualizations_v2/blob/master/docs/api_reference.md#organizing-opti...) list to be incomplete, in particular how can I :
Any help with this?
tentatively tagging @RichardCzechows as he seems pretty knowledgeable regarding this (looking at this answer Options for custom visualization)
I’ve left a comprehensive answer here: https://github.com/looker/custom_visualizations_v2/issues/130#issuecomment-584771699
but I’ll copy it over for convenience.
For subsections the only thing I could think of is very hacky. If you create an option with a label, but give it a “display” property that we don’t recognize, it will just fail to render the option except for the label.
For hiding and showing we do allow a boolean property called “hidden” which I don’t know if we’ve documented. For your case we just need to be able to toggle “hidden” between true and false for a given option. Since we have the “registerOptions” ability we should be able to watch for a certain value to change and set our “hidden” property accordingly.
I’ve written an example vis that shows how this works in practice.
looker.plugins.visualizations.add({
options: {
// This is the value we'll watch to hide or show our chart type dropdown
hide_chart_type: {
type: "boolean",
label: "flip me to hide the chart type",
order: 1
},
// I've set a divider between the two options with a label
my_section: {
type: "string",
label: "------------ I'm a section -----------",
display: "divider", // This string is arbitrary it's just choosing an option that doesn't exist
order: 2
},
// We've started this option as hidden and can toggle it on with the above option
chart_type: {
type: "string",
label: "Chart type",
values: [
{"Bar": "Bar"},
{"Line": "Line"},
{"Pie": "Pie"}
],
display: "radio",
default: "Bar",
order: 3,
hidden: true
},
},
create: function(element, _config) {
// Set up the initial state of the visualization (noop in this case)
},
updateAsync: function(data, element, config, queryResponse, details, done) {
const options = { ...this.options }
options.chart_type.hidden = !config.hide_chart_type
this.trigger('registerOptions', options)
done()
}
});
Thanks @RichardCzechows for your quick answer. I am trying to implement the first part of your solution (the hackish way to have the sub section), but I have a problem:
What should I use as “type”?
If I don’t put any type (or if I use a non-existent one) then the “LEGEND” doesn’t appear, if I use string, number or boolean, the word LEGEND appear but alongside with the white box to input string and numbers, or the toggle, in the case of boolean…
[EDIT] Solved, Thanks, there was a typo in “display”