Problem developing ArcGIS Flex Viewer Widget configuration

3876
16
07-01-2015 07:26 AM
AmazingMapMan
New Contributor III

Hello,

I created a custom widget for the ArcGIS Viewer for Flex.

The widget works an I am able to deploy it as a ZIP file and ship it to (test-)customers.

The ugly part:

If you import that widget into an ArcGIS Viewer for Flex to publish it with your Map and want to configure it, the Viewer only shows the content of the xml-configuration file instead of a fancy UI.

ViewerScreenshot.png

To get around that, I created a UI-"Module" for my widget, as it is explained here:

Custom Modules for Application Builder · Esri/arcgis-viewer-builder-flex Wiki · GitHub

That works quite well:

CustomMenu.png

The problem is, when I import this custom Widget with the Module, my Widget Icon is not displayed.

The icon is packed in the "assets/images" folder of my widget-zip-file.

I can't figure out how to access the assets folder to correctly display the icon for the widget.

MissingIcon.png

When I deploy the widget without the custom-config-ui module the icon is displayed correctly.

(See first screenshot)

Did anyone try to create such a custom-widget-configuration-ui?

Any hints on what i am doing wrong?

Is there an other way to create a custom configuration window?

If needed I can provide sourcecode.

Greetings!

Tags (1)
0 Kudos
16 Replies
AmazingMapMan
New Contributor III

Hm, I don't have a "BuilderRecources" folder.

The path to the standard-widgets in my FlexViewer installation is:

"C:\Program Files (x86)\ArcGIS Viewer for Flex\flexviewer\widgets"

But my custom widget doesn't get placed here when I import it with FlexViewer.

All custom Widgets are placed here:

C:\Users\Administrator\AppData\Roaming\com.esri.ags.AppBuilder3.0\Local Store\

If I copy my custom Widget manually into the folder for the standard widgets, it isn't available within FlexViewer.

I looked further into the folder structure of the FlexViewer and found some more "assets" folders:

C:\Program Files (x86)\ArcGIS Viewer for Flex\assets\images

and

C:\Program Files (x86)\ArcGIS Viewer for Flex\flexviewer\assets\images

When I copied my Icon into the second one, it is displayed in FlexViewer.

But: The icon won't be placed in this folder programmatically when I import my custom Widget with FlexViewer.

How am I supposed to ship the custom widget to a client if I have to manually copy some images in a specific folder?

Is there a way to get the file path of my SWF file in actionscript so that i could return an absolute path from the "widgetIconLocation" function?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Amazing Mapman,

   I think your issue is going to boil down to not following the instruction in this link completely.

Custom Modules for Application Builder · Esri/arcgis-viewer-builder-flex Wiki · GitHub

If you had followed each and every step you would have a BuilderRecouces folder that would have a copy of your widget inside a compiled viewer copy that the app builder project would reference during it's build.

I can only assume that this is your issue as I have a handful of widget that I have developed with a UI for app builder and they do not exhibit the missing icon issue.

0 Kudos
AmazingMapMan
New Contributor III

Yes, I admit I was confused by some of the steps.

It says to include the "BuilderRescources" folder, but I don't have such a folder. Instead i Included the "bin-debug" folder from my FlexViewer Project. It contains the compiled FlexViewer as intended in the walkthrough:

"Application Builder will bundle the compiled FlexViewer as part of its resources"

BuilderRescources.png

But I am not sure that this can be the problem.

The resulting deployment-ZIP file for my custom Widget is not affected by this.

The walktrough states:

"Finally, zip up the resources (assets, meta.xml, SampleModule.swf, SampleWidget.swf, and SampleWidget.xml) that define your custom widget."

So thats all that should be needed.

My understanding was that including the compiled FlexViewer into the ViewerBuilder Project is only needed, if you want to publish a custom Application-Builder:

Deployment

There are two options for deploying custom widgets:

  • Bundled with Application Builder
  • Custom Widget Package

The only difference that I see is that I don't use the release output, but the debug Output.

Thats because I dont have the option to "Keep bin-release-temp folder" (The checkbox is not there) and therefore the output of the builder project is only one ".air" file.

Do you happen to have a custom widget, that you can send to me?

With that I could try to import it in my FlexViewer and test if it shows the Icon.

Perhaps my copy of FlexViewer ist broken...

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Amazing Mapman,

   Sure I have several publicly available but here is one of them

http://www.arcgis.com/home/item.html?id=39cf66d58c234279ba728c50461a1a89

I think that the BuilderRescources folder is more important than it leads on. I think that the compiler for the app builder needs the BuilderRescources folder with the compiled Flex Viewer along with your compiled custom widget in its widgets folder when it compiles your module to determine the pathing to the icon for the swf it produces.

0 Kudos
AmazingMapMan
New Contributor III

Oh boy.

Your Widget works. It shows the picture from your assets folder.

I even alterd your icon to make sure it uses the acutal png and not something embedded in the swf or the icon from the standard-assets folder.

I don't get it.

I found you included the sourcecode for the Widget in the zip file. (and on github obviously)

But I couldn't find the uncompiled module for the configuration page.

Is that intentional? Or did I just not see it?

Can you provide the code for that?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Amazing MapMan,

  There is no need for me to distribute the widget UI source code so I don't include that in my widget download.  But It is attached here for you.

0 Kudos
AmazingMapMan
New Contributor III

Thx.

After working on sth. else for some days I found the time to test it.

I had to comment out some parts involving renderers (MovableEditableRemovableGridItemRenderer) but eventually I was able to compile it.

And of course: It works! It shows exactly the Icon that is specified.

So its clear now, that my dev environment is not the problem.

Thats annoying, because it means my programming is the problem. Nobody else to blame...

I will start to check the differences between the two projects after the weekend.

I'll report back when I find something.

0 Kudos