CMV Widget Toggle

Question

In Configurable Map Viewer project, I'd like to be able to set the initial display of a widget to hidden and show it with a press of a button, for example, by clicking on a button in a toolbar. Take for instance the Legend widget, I don't want to see the Legend widget at all on the left Pane, but would like to add a button on top to toggle it on/off.

I added this line of code to controller.js, but with no luck.

if (options.hidden) {
     domStyle.set(this[widgetConfig.id].domNode, "display", "none");
}

Answer 1

I believe your code is hiding the wrong domNode. When creating a titlePane widget, the widget has a parentWidget that is what you want to hide.

I do not recommend modifying the Controller. That's makes updates to future versions of CMV much easier. You can just do what you desire with custom css. This would hide the legend titlePane widget:

#legend_parent {
    display: none;
}

Then your button can find the correct domNode and show it (or hide it):

var el = dom.byId('legend_parent');
domStyle.set(el, 'display', 'block');

There are many ways to skin a cat. Here are some alternative approaches to consider:

1. Assuming your button is a domNode widget. Add code to that widget to hide the titlePane similar to the JS code above.

2. Don't create the legend widget initially. Your button can create the legend widget and place it properly the first time it is clicked. You can do this with dojo's topic.publish