topic Re: Title Pane close on start in ArcGIS JavaScript Maps SDK Questions

Title Pane close on start

MathewSuran — Tue, 27 May 2014 13:30:33 GMT

This should be an easy question that I can not figure out. How do I set the title pane to default closed on startup? Right now the default is open(expanded) when it loads. This is different then .leftpanevisibility to hide the entire content pane. Thanks!

Re: Title Pane close on start

SteveCole — Tue, 27 May 2014 13:53:28 GMT

Wouldn't use just set one of it's properties with data-dojo-props on the HTML side of things like this:
[HTML]<div data-dojo-type="dijit/TitlePane" data-dojo-props="open: false"></div>[/HTML]

Steve

Re: Title Pane close on start

MathewSuran — Tue, 27 May 2014 14:46:26 GMT

How different would that be for legacy?

Re: Title Pane close on start

SteveCole — Tue, 27 May 2014 14:55:43 GMT

The *ONE* time I assume someone is using AMD... LOL. 😄

Actually, not much different. Here's an HTML line for a contentPane from one of my legacy projects:
[HTML]<div id="dataLayerSection" dojoType="dijit.layout.ContentPane" title="Data Layers" data-dojo-props="label:'Click to Expand'" selected="true">[/HTML]

So basically the forward slashes become periods.

Re: Title Pane close on start

MathewSuran — Tue, 27 May 2014 15:03:10 GMT

Haha you know what assuming does...:D

I figured the slashes for periods from the dojo webpage but can not seem to figure out where to integrate properly into the layout of my HTML. Ill keep messing with it. Thx.

Re: Title Pane close on start

MathewSuran — Tue, 27 May 2014 16:56:00 GMT

I cant figure out how to add your suggestion to what I have:

[HTML]<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'" style="height:100%;padding:0;display:none;">
</div>[/HTML]

Re: Title Pane close on start

SteveCole — Tue, 27 May 2014 17:01:32 GMT

Can you post your HTML code? That would be the best way to help.

Re: Title Pane close on start

MathewSuran — Tue, 27 May 2014 17:08:01 GMT

That is the HTML code I'm working with.

Re: Title Pane close on start

SteveCole — Tue, 27 May 2014 17:23:06 GMT

Are you literally starting from scratch? You asked about legacy code so I thought you already had some code / HTML written.

Re: Title Pane close on start

MathewSuran — Tue, 27 May 2014 17:27:53 GMT

Basically I was given a project that was 75% complete and I have had to reverse engineer to figure out what the company had done. I am completely new to all of this and have been figuring it out as I go along. I posted the HTML code 3 posts ago but here it is again:
[HTML]<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'" style="height:100%;padding:0;display:none;">
</div>[/HTML]

Let me know if you need more than that.

Re: Title Pane close on start

SteveCole — Tue, 27 May 2014 17:47:08 GMT

ok, gotcha. So you do have a bunch of code already but don't understand it all. I would search through your HTML code for the text "dijit.TitlePane". It's within THAT html code that you would add the data-dojo-props like I originally suggested.

Here's a VERY basic example, written in legacy:
[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
dojo.require("dijit.TitlePane");
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too', open: false">
Click arrow to close me.
</div>
</body>
</html>[/HTML]

A borderContainer is a higher level object. It's used like a "box" in which you add other objects. I can't be 100% sure without seeing that other code but I suspect your titlePane with be located down a level or two from a borderContainer.

Re: Title Pane close on start

MathewSuran — Tue, 27 May 2014 18:07:29 GMT

Thanks for that. The way it is set up is that when you click on the toolbar button, the left pane appears. I have figured out in JS where that takes place and have changed some things around already. There is no specific TitlePane HTML code, just the leftpanel code I provided. Utilizing "inspect element" in Chrome, I have figured out the hierarchy of the TP. It goes boardercontainer, stackcontainer,contentpane,tp1,2,3.

Re: Title Pane close on start

SteveCole — Tue, 27 May 2014 18:50:42 GMT

Ok, well, here's another option on the JS side of things you can try while your application loads. You basically tell the titlePane to close programatically. Here's my same example as before but using this JS method instead of specifying it on the HTML side of things:

[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
   dojo.require("dijit.TitlePane");

   function init() {
    dijit.byId("tp2").set("open",false);
   };

   dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too'">
   Click arrow to close me.
</div>
</body>
</html>[/HTML]

Now, the app you inherited may be structured a little different but the key line is that one line of code in my example's init function.

Re: Title Pane close on start

MathewSuran — Sun, 12 Dec 2021 03:09:03 GMT

Awesome! I used the .set("open",false) from your code which worked perfectly. Here's what I did:

var tp1 = new dijit.TitlePane({title: "Description"});
            tp1.set('content', configOptions.description).set("open",false);
            detailCp.addChild(tp1);

Thanks for your help!