topic Re: Javascript Viewer like the Flex Viewer with S/C in ArcGIS JavaScript Maps SDK Questions

Javascript Viewer like the Flex Viewer with S/C

TonyCollins — Tue, 21 Jul 2015 15:38:06 GMT

Hi,

Is there a JavaScript version of the Flex Viewer that I can download and run locally and like the Flex version examine how it is built?

I have a large Flex based application (similar idea, but not based on the Flex Viewer) that I need to start to migrate into JavaScript.

Basically I would like to see the best way to structure a ESRI JS API based application, that can support the loading of external Tools/Modules similar to how the Flex Viewer does?

I hope this makes sense?

Thanks for any help

Re: Javascript Viewer like the Flex Viewer with S/C

TimWitt2 — Tue, 21 Jul 2015 15:43:17 GMT

Tony,

here you go Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Tim

Re: Javascript Viewer like the Flex Viewer with S/C

AnthonyGiles — Tue, 21 Jul 2015 15:58:39 GMT

Tony,

just ust be aware the web app builder requires a map id from either arcgis online or portal to work

Regards

Anthony

Re: Javascript Viewer like the Flex Viewer with S/C

TimMcGee1 — Tue, 21 Jul 2015 16:54:26 GMT

Tony,

Take a look at the open source project CMV - Configurable Map Viewer and cmv/cmv-app · GitHub and cmv/cmv-contrib-widgets · GitHub

CMV is built on top of the ESRI JavaScript API (and Dojo) and uses your REST services much like the Flex API did. CMV can use AGO Services but does not require the use webmaps, AGO or portal.

In the last year I have converted dozens of Flex, Silverlight and ArcIMS sites for clients using CMV. If you visit GitHub or Stack Exchange, you'll see my name a lot. Through those early successes of converting customer's sites, I became one of the lead developers on the CMV project.

We have a core team of 4 developers and growing plus others that actively contribute support, documentation, functionality and widgets using GitHub, GIS StackExchange and group chat. We are about to release a new minor version with enhancements and support the latest version of ESRI's API (3.14). Parallel efforts are underway for the next major revision supporting the 4.0 release of the ESRI API.

Check it out and let me know if it fits your needs. And if not, I would certainly like to hear why not.

Hope this helps.

Regards,

Tim McGee

Re: Javascript Viewer like the Flex Viewer with S/C

ShaningYu — Tue, 21 Jul 2015 18:34:12 GMT

Tim: Thanks for your response. I downloaded the code (actually I downloaded the V3.11 version a while ago). How I got a new problem. When I opened the index.html on a browser, nothing displays except for the Banner. Did I miss some steps? Thanks.

Re: Javascript Viewer like the Flex Viewer with S/C

TimMcGee1 — Tue, 21 Jul 2015 18:52:40 GMT

Hi Shaning,

Are you clicking on the index.html on your computer or are you using some web server (locally or on a server)?

From what you describe, it sounds like you are loading from a file on your computer. That will not work because it loads the JS API from a link that starts with "//js.argis.com...". There is no http: or https: protocol in front of it. That is intentional so the viewer can run as either http or https protocol depending on the web server configuration. Since you are using file://, it will attempt to use that protocol and fail. There are a number of way to address that but the easiest thing is to use a web server (IIS, Apache, nodejs, etc). Once you have the application running using one of those options, it will function just like the demo: http://demo.cmv.io/viewer/ which uses the exact same code that you downloaded.

If you have further questions, they are best posted as a github issue: Issues · cmv/cmv-app · GitHub or a question at gis.stackexchange:. Newest 'configurable-map-viewer' Questions - Geographic Information Systems Stack Exchange

Hope this helps,

Tim McGee

Re: Javascript Viewer like the Flex Viewer with S/C

TonyCollins — Tue, 21 Jul 2015 22:11:00 GMT

Thanks for your help everyone, the CMV looks great but unfortunately I don't think this is what I am looking for?

I have build my own rest based backend map management system for the ESRI platform that I can plug my application(s) into. I can configure tools, services, users etc and I would simply (haha) like to wire up a JS API based application alongside the Flex app and in time migrate my (1k+) user base eventually.

Whilst I am not scared to move to something completely new if need be I would need to be able to understand it from the ground up to fix issues in a timely manor and integrate with existing business workflows.

Whilst we have several JS Apps already, they are simple compared to the Flex app and I was hoping to study a JS Viewer that had a widget/tool management system and that was not completely tied to AGS Online/Portal. Is there anything like that?

I'd love to use online but I am still to be convinced of it's benefits when I would need to host my bespoke apps on premise anyway?

Thanks again for any help,

Tony

Re: Javascript Viewer like the Flex Viewer with S/C

TimMcGee1 — Tue, 21 Jul 2015 22:26:06 GMT

HI Tony,

From your description, CMV sounds like it would fit the bill. I've done similar things in a former life so it sounds familiar. I am not here looking for work . Just suggesting I have a good understand of your issue.

I know of several developers who are using CMV in a manner much like you describe tied to centralized management of app configuration, services and app security, user/group roles, etc. I can (with your permission and theirs) get you connected to discuss how they have approached this. Let me know if that is of interest.

Regards,

Tim McGee

Re: Javascript Viewer like the Flex Viewer with S/C

TonyCollins — Wed, 22 Jul 2015 14:45:34 GMT

Thanks Tim,

I have downloaded CMV and will have a look at how things hang together. Hopefully I can get my head around what is going on and maybe even contribute down the road.

In the system I would like to build, the tools/widgets are all moveable/resizable windows, much like photoshop or something. The widgets in CMV all look to want to sit in the left hand pane. Would I have to unpick a lot of code for widgets to behave like moveable windows?

Thanks

Re: Javascript Viewer like the Flex Viewer with S/C

RickeyFight — Wed, 22 Jul 2015 14:59:24 GMT

Tony,

You can make some if not all movable.

If you click on the arrow to the right of the widget, the widget becomes detached and you can drag it around the screen as seen below.

You just need to set canFloat to true in viewer/js/config/viewer.js file.

Re: Javascript Viewer like the Flex Viewer with S/C

TonyCollins — Wed, 22 Jul 2015 15:08:33 GMT

Oooooh.

Big smile on my face that you can't see right now. I'm going to have a good play with this then.

Thanks for all your help, I'm sure I'll be back with more questions!

Re: Javascript Viewer like the Flex Viewer with S/C

TimMcGee1 — Wed, 22 Jul 2015 15:10:39 GMT

Thanks Rickey,

I was about to provide a similar explanation. One minor clarification. You do not need to click on the arrow icon to get the pane to undock. That was true in the initial release. Now you can just click and drag the title bar which is a more natural behavior. The icon remains as an indication that the widget can be undocked.

In addition to allowing the sidebar widget to be undocked, there is an older style floating window with `type: 'floating'`, If you click on the 'Help' link in the upper-right corner you'll see a modal non-movable version of this. I expect that the floating widget will evolve to have similar behavior to that of an undocked titlePane widget shown in Rickey's screenshot.

Re: Javascript Viewer like the Flex Viewer with S/C

TimMcGee1 — Wed, 22 Jul 2015 15:15:54 GMT

Tony,

Great!

In addition to the support links I provided in my original post, there is also a GeoNet group CMV - Configurable Map Viewer that had been created last year but forgotten about until yesterday. We're monitoring it now. Perhaps too many ways to get help that will be refined as we progress. Too many is better than too few.

Re: Javascript Viewer like the Flex Viewer with S/C

ShaningYu — Wed, 22 Jul 2015 15:27:08 GMT

Dear Tim:

I am working on your wonderful CMV. One thing in beginning is to set up the initial extent. I customized the extent in the viewer.js, HomeButton’s map extent. It works as I click the Home Button. However, I could not find where the initial extent is defined. Could you guide me how? Thanks.

Yours,

Shaning

Re: Javascript Viewer like the Flex Viewer with S/C

TimMcGee1 — Wed, 22 Jul 2015 15:41:51 GMT

Shaning,

You set the initial extent in the `mapOptions` here: cmv-app/viewer.js at master · cmv/cmv-app · GitHub In the example, it uses center and zoom. You can use an extent instead. Anything from the ESRI Map contructor Map | API Reference | ArcGIS API for JavaScript can be used in the mapOptions.

If you set the mapOptions to the desired initial extent, you can leave it out of the config for the home button as it will use the initial extent.

Side note: we've strayed a bit from the original topic. Additional questions should be created in new posts on GeoNet CMV - Configurable Map Viewer or the other cmv support channels.

Re: Javascript Viewer like the Flex Viewer with S/C

ShaningYu — Wed, 22 Jul 2015 15:54:09 GMT

Perfect!! Got it. Thanks so much!!!