nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem developing ArcGIS Flex Viewer Widget configuration

AmazingMapMan

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.

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:

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.

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!

Find more posts tagged with

Accepted answers

All comments

AmazingMapMan

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"

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...

RobertScheitlin__GISP

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.

AmazingMapMan

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?

RobertScheitlin__GISP

Amazing Mapman,

Do you have the icon in the BuilderRecouces folder?

i.e. AppBuilder3.7\BuilderResources\flexviewer\widgets\AlohaThreatZone\assets\images\Aloha2.png

RobertScheitlin__GISP

Lisa,

I don't think that would make a difference. Nice catch though.

AmazingMapMan

Yes, I checked that.

It definetly gets imported into the FlexViewer:

What puzzles me most is that the icon is displayed when i omit the "ui-module" from the ZIP-file.

RobertScheitlin__GISP

That is strange. Have you verified that the actual zip file of your widget that is used to import into app builder contains the png file in the assets/images folder? There are time when you embed a png in your code that the compiled skips adding the png image to the bin-release as it is already embeded in the code.

LisaTurner

In your return line you used " " and in Robert's it has ' '. Does that make a difference?

AmazingMapMan

Well,

this is exacly how I do it:

public function get widgetIconLocation():String
        {
            LOG.debug("widgetIconLocation");
            return "assets/images/ALKISBuch_green20.png";
        }

Widget Folder:

Assets:

I tried different Images (gif, png, jpg), but no success.

Its really strange.

RobertScheitlin__GISP

OK,

I have produced several widget that have a UI for app builder and the icon appears fine. I set the icon location in the module.as

        public function get widgetIconLocation():String
        {
            return 'assets/images/Aloha2.png';
        }

Bu this assumes that you have a assets/images folder in your widgets main folder:

src\widgets\AlohaThreatZone\assets\images\Aloha2.png

Because when I tries to resolve assets/images it is looking from the path of the swf that the code is running from.

PS. don't worry about the "Assumed Answered" you can always click on the "Correct Answer" link (the one with the little green star) on the reply that actually answers your question.

AmazingMapMan

Hello,

the question is not answerd.

I think I accidently clicked on "mark as answerd".

Can i undo that somwhere?

RobertScheitlin__GISP

Amazing Mapman,

I am confused, you have this question marked as "Assumed Answered"... Do you still have a question?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.