Configurable Map Viewer (CMV) - Content Pane with CMV

Question

I’m upgrading from the old viewer to the new CMV version.

Is there a better way for handling a content pane in the sidebar under the new format? In the previous version I did it thru the controller, but this seems to be against the best practices of the new CMV. Any suggestions?

This is what I was doing: (Last portion of the posted code from Controller.js creates the content pane pictured below circled in red and adds it to the 5th position.)

Controller.js

    initWidgets: function(evt) {
        var widgets = [];

        for (var key in config.widgets) {
            if (config.widgets.hasOwnProperty(key)) {
                var widget = lang.clone(config.widgets[key]);
                if (widget.include) {
                    widget.position = ('undefined' !== typeof(widget.position)) ? widget.position : 10000;
                    widgets.push(widget);
                }
            }
        }

        widgets.sort(function(a, b) {
            return a.position - b.position;
        });

        array.forEach(widgets, function(widget, i) {
            this.widgetLoader(widget, i);
        }, this);

        var wcCP = new ContentPane({
            content: "</br><a href='#' onclick=window.open('http://oilandgas.ohiodnr.gov/')><center><img src='https://gis.ohiodnr.gov/website/oit/OilGasJS_Test/images/DOGlogo_75.png'></center></a></br><center><b>Divison of Oil & Gas</b></br>2045 Morse Rd</br>Columbus, OH 43229</br>614-265-6922</br><a href='mailto:[email protected]'>[email protected]</a></br><a href='#' onclick=window.open('http://oilandgas.ohiodnr.gov/')>ODNR Oil & Gas Website</a></br></br></br>Download GIS Oil & Gas Well Data:</br><a href='#' onclick=window.open('https://gis.ohiodnr.gov/website/oit/OilGasJS_Test/widgetid_help_content_data2.html')>Download Well Data by County</a></center>"
        }).placeAt(this.sidebar, 5);
    },

Answer 1

There are always multiple ways to skin this configurable cat. ;) I can think at least three approaches:

1. Assuming you want your content at the bottom of the left sidebar, you can do this today in config/viewer:

   panes: {
       left: {},
       myContent: {
           id: 'myContent',
           placeAt: 'left',
           region: 'bottom',
           style: 'height: 220px !important;overflow:hidden',
           content: '<a href="#" onclick=window.open("http://oilandgas.ohiodnr.gov/")><center><img src="https://gis.ohiodnr.gov/website/oit/OilGasJS_Test/images/DOGlogo_75.png"></center></a></br><center><b>Divison of Oil & Gas</b></br>2045 Morse Rd</br>Columbus, OH 43229</br>614-265-6922</br><a href="mailto:[email protected]">[email protected]</a></br><a href="#" onclick=window.open("http://oilandgas.ohiodnr.gov/")>ODNR Oil & Gas Website</a></br></br></br>Download GIS Oil & Gas Well Data:</br><a href="#" onclick=window.open("https://gis.ohiodnr.gov/website/oit/OilGasJS_Test/widgetid_help_content_data2.html")>Download Well Data by County</a></center>'
       }
   },
   

This code places this new pane at the bottom of the left sidebar. Note: including the left: {} before your new pane is important so the left pane is created first.

If you want your content at the top of the pane, you can change the region accordingly. If for some reason you want your content somewhere in the middle between widgets, you cannot do that today but I like the possibilities. The next two options to accomplish this have now been logged as possible enhancement.

2. There already is a widget type of contentPane but today it does not use the position to control the placement within the parent pane. With this addition, you can create a reusable widget that you can have available for all your apps. The widget config would look something like this:

       myContent: {
           id: 'myContent',
           include: true,
           type: 'contentPane',
           position: 5,
           path: 'config/customWidgets/myContent'
       }
   

3. And finally, here's yet another option that I am visualizing that does not need a widget at all:

       myContent: {
           id: 'myContent',
           include: true,
           type: 'contentPane',
           position: 5,
           content: '<a href="#" onclick=window.open("http://oilandgas.ohiodnr.gov/")><center><img src="https://gis.ohiodnr.gov/website/oit/OilGasJS_Test/images/DOGlogo_75.png"></center></a></br><center><b>Divison of Oil & Gas</b></br>2045 Morse Rd</br>Columbus, OH 43229</br>614-265-6922</br><a href="mailto:[email protected]">[email protected]</a></br><a href="#" onclick=window.open("http://oilandgas.ohiodnr.gov/")>ODNR Oil & Gas Website</a></br></br></br>Download GIS Oil & Gas Well Data:</br><a href="#" onclick=window.open("https://gis.ohiodnr.gov/website/oit/OilGasJS_Test/widgetid_help_content_data2.html")>Download Well Data by County</a></center>'
       }
   

Note the additional content property and the removal of path property since there is no widget to create.

An additional thought comes to mind that would make #1 and #3 more reusable. Instead of placing the html in content property, use an href property in the config pointing to a url on your local server. This has a slight additional advantage in that the html content will be cached by the browser.