Open first ContentPane in AccordionContainer

1754
2
07-25-2016 01:46 PM
GeorgeHilton__GISP
New Contributor III

This is a follow up to a question I asked earlier today. I'm trying to open a Content Pane with an AccordionContainer and Content Panes which are not visible when the application opens; while making sure the first Content Pane in the Accordion Container is opened.  The answer for the question I asked earlier was answered correctly by Robert Scheitlin in this thread:  https://community.esri.com/message/623381?et=watches.email.thread#comment-623381

Using the answer as a guide I tried to work it into an application I have where I have code broken out into a separate load.js file and not in the entire html file.  I'm wondering if perhaps I need to have my modules listed in a different order for the code to automatically open the first ContentPane in an Accordion Container?  I think I have all of the required modules and in an appropriate order  My load.js file is listed below. 

I hope just attaching the load.js file and not the other associated js files will work, if not I can attach all of my other js files and html file. Any help is greatly appreciated

Thanks,
George Hilton

var map;

var selectionToolbar;

var dLayer;

var idlay;

var scalebar;

var parfill;

var popup;

var qbyidpt;

var navToolbar;

var infoTemplate;

var idTask;

var idParam;

var pFP;

var yn;

var store;

var sr;

var legend;

var legaccord;

var inviz;

require([

  "esri/map",

  "esri/dijit/Legend",

  "esri/layers/GraphicsLayer",

  "esri/SpatialReference",

  "esri/toolbars/draw",

  "esri/dijit/Scalebar",

  "esri/geometry/Point",

  "esri/graphic",

  "esri/symbols/SimpleFillSymbol",

  "esri/symbols/SimpleLineSymbol",

  "esri/toolbars/navigation",

  "esri/tasks/IdentifyTask",

  "esri/tasks/IdentifyParameters",

  "esri/dijit/Popup",

  "dojo/dom-construct",

  "esri/geometry/Extent",

  "esri/InfoTemplate",

  "esri/layers/ArcGISDynamicMapServiceLayer",

  "dijit/layout/ContentPane",

  "dojo/on",

  "dojo/parser",

  "dojo/_base/array",

  "esri/Color",

  "dijit/registry",

  "dojo/domReady!"

],

function (

  Map, Legend, GraphicsLayer, SpatialReference, Draw, Scalebar, Point, Graphic, SimpleFillSymbol, SimpleLineSymbol, Navigation, IdentifyTask, IdentifyParameters, Popup, domConstruct, Extent, InfoTemplate, ArcGISDynamicMapServiceLayer,

  FloatingPane, on, parser, arrayUtils, Color, registry

) {

    // call dojo parser

    parser.parse();

    // Full extent of map

    fullExtent = new esri.geometry.Extent({ "xmin": fullMinX, "ymin": fullMinY, "xmax": fullMaxX, "ymax": fullMaxY, "spatialReference": { "wkid": fullWKID } });

    //var initExtent = new esri.geometry.Extent({ "xmin": -8227830.3637063, "ymin": 5340700.39573648, "xmax": -8171280.30528049, "ymax": 5394550.12077208, "spatialReference": { "wkid": 102100 } });

    map = new Map("map", {

        basemap: "topo",

        //infoWindow: popup,

        //extent: initExtent,

        showAttribution: false,

        slider: false,

        logo: false,

        center: [-73.7164, 43.3724],

        zoom: 11

    });

    map.on("update-start", showLoading);

    map.on("update-end", hideLoading);

   

   

    //scale = new scaleUtils.getScale(map);

    //console.log(scale);

    //var scale = scaleUtils.getScale(map);

    //var tscale = scale.toString();

    //alert(tscale);

    selectionToolbar = new Draw(map, {showTooltips: false});

    selectionToolbar.on("draw-end", addrectselToMap);

    scalebar = new Scalebar({

        map: map,

        scalebarStyle: "ruler",

        //scalebarUnit: "dual",

        attachTo: "bottom-left"

    });

    parfill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

    new Color([255, 0, 0]), 1), new Color([255, 255, 100, 0.25])

  );

    //define symbol for popup

    popup = new Popup({

        fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

            new Color([255, 0, 0]), 2), new Color([50, 50, 255, 0.25]))

    }, domConstruct.create("div"));

     sr = new SpatialReference(3857);

    

    // Empty Point for Qby Identify Function Info Window Box Location

    qbyidpt = new Point;

   

    infoTemplate = new InfoTemplate();

    infoTemplate.setTitle("Selected Parcel: ${NEWNUMBER}");

    infoTemplate.setContent("Parcel ID : ${NEWNUMBER}");

    idTask = new IdentifyTask("http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer");

    idParam = new IdentifyParameters();

    idParam.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;

    idParam.tolerance = 1;

    idParam.layerIds = [3];

    idParam.width = map.width;

    idParam.height = map.height;

  //idParam.spatialReference = this.map.spatialReference;

    idParam.returnGeometry = true;

    navToolbar = new Navigation(map);

   

    map.on("load", initOperationalLayer);

    map.on("layers-add-result", verifyLoadStatus);

    map.on("click", getMapPoint);

    map.on("mouse-move", showCoordinates);

    map.on("mouse-out", clearCoordinates);

    map.infoWindow.on("hide", hideidwin);

    function initOperationalLayer() {

        // Hook up jQuery

        $(document).ready(mapReady);

        //add QBY Map Service

        dLayer = new ArcGISDynamicMapServiceLayer("http://toqgis.queensbury.net/arcgis/rest/services/Web_App/MapServer");

  //add empty Graphics Layer

        idlay = new GraphicsLayer();

     map.addLayers([dLayer, idlay]);

    }

   

    //INITIALIZING FUNCTION FOR JQuery

    function mapReady() {

      //SET UP CLICK EVENT AND FUNCTION FOR LEGEND TOGGLE BUTTON

   //var tlg = document.getElementById("toggleleg");

   //tlg.addEventListener("click", showhideleg);

   $('#toggleleg').click(showhideleg);

   

   

   var easing = 1;

   var easing_effect ='easeOut Bounce';

   var animation_speed = 500;

  

   var slider_width = $('#content').width();

   

      //wire click event for check box to a function

      $('.sub-layer-label, .sub-layer-check').click(updateLayerList);

      

    //wire click event for left panel

    $('#layer-tabs-left-handle').click(function () {

           var mar = $('#content').css("margin-left");

    var cw = $('#content').css("width");

    //alert(cw);

   

   

    if ($('#content').width() == 0) {

    $('#layer-tabs-left-handle').animate({left:268}, "fast", "linear");

    $('#content').animate({width:300}, "fast", "linear" );

    $('#contenttitle').css("display", "inline-block");

    $('#accordion').css("display", "inline-block");

    $(this).css("border", "none");

        $(this).css("background-image", "url(http://toqgis.queensbury.net/webappjsworking/images/arrow_left.png)");

        $(this).attr('title', 'Close');

    }

    else {

    //alert(cw);

    $('#layer-tabs-left-handle').animate({left:0}, "fast", "linear");

    $('#content').animate({width:0}, "fast", "linear" );

    $('#contenttitle').css("display", "none");

    //$(this).css("border", "none");

    $(this).css({"background-color": "", "border": "none"});

        $(this).css("background-image", "url(http://toqgis.queensbury.net/webappjsworking/images/arrow_right.png)");

        $(this).attr('title', 'Open');

    }

   

  

   

   

   

   

   

    var is_collapsed = $(this).css("margin-left") == slider_width+"px" && !$(this).is(':animated');

    //alert(is_collapsed);

   

    var sign = (is_collapsed) ? '-' : '+' ;

   

       });

   

   

  

   

   

   

    $('#layer-tabs-left-handle').hover(

      function() {

  var cwid = $('#content').width();

  //alert(cwid);

  

            if (cwid == 0) {

  $(this).css({"background-color": "white", "border" : "solid 1px #a6c9e2"});   

    

        }

  

  }, function (){

  $(this).css({"background-color": "", "border": "none"});

  });

  

   

       

    }

  //******

  //TOGGLE LEGEND AND LAYER LIST CONTENT PANE

  //******

  function showhideleg() {

   var legwin = document.getElementById("rightPane"); 

   var viz = legwin.style.visibility;

   

   legwin.style.visibility = "visible"; 

      registry.byId("accord").selectChild("legendPane", true);

  }

   

    //Verify that all Layers have been loaded

  //set up to handle layers-add-result

    function verifyLoadStatus(results) {

       

        //BUILD LEGEND

        legend = new Legend({

   map: map,

  

   layerInfos: [{

     layer: dLayer,

  hideLayers: [0,1],

  title: "Interactive Map Layers"

   }]

  },"legendDiv");

  legend.startup();

  

  

        if (results.layers.length == 1) {

            //alert(map.layerIds.length);

            createLayerList();

        }

  }

    function createLayerList() {

        ////Gets Sub Layer Names then create Layer List/set visibility and check boxes

        var lyrInfos = dLayer.layerInfos;

        //count of all layers in service

        //alert(lyrInfos.length);

        for (lyr in lyrInfos) {

            var lyrname;

            lyrname = lyrInfos[lyr].name;

            //alert(lyrname);

        }

    }

      

});

0 Kudos
2 Replies
KenBuja
MVP Esteemed Contributor

The ContentPane in the AccordianContainer has the property "Selected". Setting the property on a ContentPane to true will open it up. Take a look at this example which opens the third pane: dijit/layout/AccordionContainer — The Dojo Toolkit - Reference Guide

GeorgeHilton__GISP
New Contributor III

Very strange.  Adding the selected property to the ContentPane I wanted shown didn't work.  What did work was setting that property (selected) to another content pane in the AccordionContainer and using Robert's solution (selectChild) to make the legend Pane visible.

Thanks to all,

George

0 Kudos