How to use same info window setup for more than one layer with identify, arcgis javascript api, cmv template

Question

I am new to javascript and am playing around with customizing the CMV template https://github.com/cmv/cmv-app. I am trying to customize my info windows for my layers, and have had some luck modifying the identify.js file. I would like to use the same info window setup (fields and formatting) for more than one layer in my map service, but I can't figure out how to do that. I've tried to just add an array ([6,7]), and also tried adding a for loop to loop through the array with no luck. I don't get any errors, just no info windows load when I tried to use the array or loop through it:

msArray = [6,7];
for (var i = 0;  i < msArray.length; i++) {    define({map:!0,mapClickMode:!0,mapRightClickMenu:!0,identifyLayerInfos:!0,identifyTolerance:5,identifies:{
    mapSets:{msArray[i]:{title:"Map Sets",description: "<b>Name:</b>  {Sheet Label}<br><b>County:</b>  {County}<br><b>Route:</b>  {Route}<br><b>Postmile:</b>  {Postmile}<br><b>Map Type:</b>  {Map Type}\
    <br><b>Hanging File:</b>  {Hanging File}<br><b>Revision Date:</b>  {Revision Date}<br><b>Original Draft Decade:</b>  {Original Draft Decade}<br><b>Coordinate System:</b>  {Coordinate System} \
    <br><br><div align=center>{image_path}</div>"}};
}

Here's the code that works, when I reference one layer only (layer id in the code below is 6):

define({map:!0,mapClickMode:!0,mapRightClickMenu:!0,identifyLayerInfos:!0,identifyTolerance:5,identifies:{ 
mapSets:{6:{title:"Map Sets",description: "<b>Name:</b>  {Sheet Label}<br><b>County:</b>  {County}<br><b>Route:</b>  {Route}<br><b>Postmile:</b>  {Postmile}<br><b>Map Type:</b>  {Map Type}\
<br><b>Hanging File:</b>  {Hanging File}<br><b>Revision Date:</b>  {Revision Date}<br><b>Original Draft Decade:</b>  {Original Draft Decade}<br><b>Coordinate System:</b>  {Coordinate System} \
<br><br><div align=center>{image_path}</div>"}},

UPDATE: Latest code posted below, using function provided in solution. Second function does not work:

define(function () {

    function createSharedTemplateMS () {
        return {
            title:"Map Sets",
            description: [
                '<b>Name:</b>  {Sheet Label}<br>',
                '<b>County:</b>  {County}<br>',
                '<b>Route:</b>  {Route}<br>',
                '<b>Postmile:</b>  {Postmile}<br>',
                '<b>Map Type:</b>  {Map Type} <br>',
                '<b>Hanging File:</b>  {Hanging File}<br>',
                '<b>Revision Date:</b>  {Revision Date}<br>',
                '<b>Original Draft Decade:</b>  {Original Draft Decade}<br>',
                '<b>Coordinate System:</b>  {Coordinate System}<br><br>',
                '<div align=center>{image_path}</div>'
            ].join('')
         };
    }
    return {
        map:true,
        mapClickMode:true,
        mapRightClickMenu:true,
        identifyLayerInfos:true,
        identifyTolerance:5,
        identifies: {
            mapSets: {
                6: createSharedTemplateMS(),
                7: createSharedTemplateMS(),
                8: createSharedTemplateMS(),
                9: createSharedTemplateMS(),
                10: createSharedTemplateMS(),
                11: createSharedTemplateMS(),
                12: createSharedTemplateMS()
            }
        }
    };
});

define(function () {

    function createSharedTemplatePrcl () {
        return {
            title:"Parcels",
            description: [
                '<b>Name:</b>  {Name}<br>',
                '<b>County:</b>  {County}<br>',
                '<b>Route:</b>  {Route}<br>',
                '<b>Postmile:</b>  {Postmile}',
                '<br><b>Description:</b>  {Description}<br>',
                '<b>Area:</b>  {Area}<br>',
                '<b>Map Sheet:</b>  {Map Sheet}<br>',
                '<b>Parcel Type:</b>  {Parcel Type}<br>',
                '<b>Parcel Phase:</b>  {Parcel Phase}',
                '<br><b>Geometry Quality:</b>  {Geometry Quality}<br>',
                '<b>Source:</b>  {Source}<br><br>',
                '<br><div align=center>{doc_path}</div>'
            ].join('')
         };
    }
    return {
        map:true,
        mapClickMode:true,
        mapRightClickMenu:true,
        identifyLayerInfos:true,
        identifyTolerance:5,
        identifies: {
            mapSets: {
                1: createSharedTemplatePrcl(),
                2: createSharedTemplatePrcl(),
                3: createSharedTemplatePrcl(),
                4: createSharedTemplatePrcl()
            }
        }   
    };
});

Answer 1

First, when working with CMV, you should start with the unminified versions of the configuration files that will make it much easier to work with. The latest release is here.

With respect to your question, you can use a function to create the popup template. Here's an reformatted example of your code reusing the same template for 3 different sublayers - 2 for your mapSets layer and one for another layer. Obviously, you'll need to modify it for the layers in your CMV application.

define(function () {

    function createSharedTemplate () {
        return {
            title:"Map Sets",
            description: [
                '<b>Name:</b>  {Sheet Label}<br>',
                '<b>County:</b>  {County}<br>',
                '<b>Route:</b>  {Route}<br>',
                '<b>Postmile:</b>  {Postmile}<br>',
                '<b>Map Type:</b>  {Map Type} <br>',
                '<b>Hanging File:</b>  {Hanging File}<br>',
                '<b>Revision Date:</b>  {Revision Date}<br>',
                '<b>Original Draft Decade:</b>  {Original Draft Decade}<br>',
                '<b>Coordinate System:</b>  {Coordinate System} align=center>{image_path}'
            ].join('')
         };
    }

    return {
        map:true,
        mapClickMode:true,
        mapRightClickMenu:true,
        identifyLayerInfos:true,
        identifyTolerance:5,
        identifies: {
            mapSets: {
                6: createSharedTemplate(),
                7: createSharedTemplate()
            },
            layer2: {
                1: createSharedTemplate()
            }
        }
    };
});

One last thing, I used a trick of putting all the text for the description into multiple elements of an array. I find this easier to see each line of the HTML in the code. When doing that, it became obvious that you had an extra closing div tag </div> at the end of your code. I think that would explain the CSS problem I assisted you with on IRC.

Answer 2

I'm not familiar with CMV, there are a few JavaScript mistakes in your code if that's the exact code you're using.

Firstly, you cannot use a variable (myArray[i]) as a name for JSON object key. Please see this tutorial and this reference. You should've gotten an error for this, I would've guessed...

Secondly, you cannot put Dojo's define in a loop. You should only call define once per file.

Lastly, I believe you need to explicitly specify each layer you want to identify with specific fields you need. CMV documented as such:

// config object definition:
//  {<layer id>:{
//      <sub layer number>:{
//          <pop-up definition, see link below>
//          }
//      },
//  <layer id>:{
//      <sub layer number>:{
//          <pop-up definition, see link below>
//          }
//      }
//  }

// for details on pop-up definition see: https://developers.arcgis.com/javascript/jshelp/intro_popuptemplate.html

Familiarizing yourself better with JavaScript and Dojo basics will help you a lot in the long run when creating applications with ArcGIS JSAPI

As a side note, please format your code better in the question, we are not machines and cannot read compressed code very readily :)

Good luck!