ComboBox Widget - WAB

[MeleKoneya]

I would like to have a widget that opens when the WAB loads like the splash widget that would require the user to pick a value from a combo list.

I have a list of Fire Stations that I would like to use as an attribute for a FeatureLayer.     When the app starts the station number would be set and would be populated in the attribute each time an edit is made.

Has anyone done something like this?     Please provide any samples on how to create a combo Box in a widget in WAB preferably as a splash type widget .

Thanks,

Mele

[JianWang3]

1. Widget can be set as opening at start, so you can create your own custom widget and make it open at start.

2. Every widget has lifecycle events like postCreate, onOpen. You can prepare the data for ComboBox.

[MeleKoneya]

Thanks for the reply.  It sounds like I can do what I am looking to do.   Can you provide some details on how to open a widget at start?   

I did take a look at the sample widgets and the life cycle events,  but I am not yet clear where to put a combo box within a custom widget.

Also,  I don't know how to save the selection from the Combo Box to a variable which I can use in other widgets.

If you can provide some more details,  I would appreciate it.     The documentation on custom widgets is very brief.   Is there something better out there to show me how to accomplish building a custom widget?

[JianWang3]

In the builder panel, there is an option at the bottom left corner. You can make it checked to let the widget open at start.

In your custom widget, you can create a Widget.html where you can put your custom combo box. You can reference to widgets provided by app builder for more details.

Each widget has two methods to communication with other widgets:

• publishData(data, keepHistory)
• onReceiveData(name, widgetId, data, historyData)

If you want to save the selection from the Combo Box and used in other widgets. You can use publishData() method in your custom widget to publish the saved selections. And in other widgets who want to use the selection you can use onReceiveData() to fetch the selection published from your custom widget.

[MeleKoneya]

This is very useful.   Thanks for the help!     I was able to create a widget with a combo box in it and then publish the data.     This looks to be the path I needed.  Right now,  I am hung up on how to retrieve the data from my custom widget's data store. 

I did not understand the arguments for the onReceiveData  method so I tried fetchDataByName on the widget I was using to call the data from and was able to 'see' my data as I stepped through the code,   but was not able to 'get' the data.

Is there  a good example for the onReceiveData or even the fetchDataByName methods?

I saw the widget example for the communication between widgets,  but was not following it.

[RobertScheitlin__GISP · Accepted solution]

Mele,

  This is the code I have in my listening widget:

startup: function(){
    this.inherited(arguments);
    this.fetchData();
},

onReceiveData: function(name, widgetId, data) {
    if(data.message && data.message === "Deactivate_DrawTool"){
        this.drawBox.deactivate();
    }
},

And in the widget that is sending the message:

this.publishData({message: "Deactivate_DrawTool"});

[MeleKoneya]

Robert,  This is perfect!   Thanks for the code.   I've been experimenting with it and it is very easy once you gave me your sample.  

[MeleKoneya]

Thanks to Robert and Jian for your assistance.    I was able to get this working as I wanted.