How to update attribute values inside a pluggable widget?

0
Hi Mendix experts! I'm new at building custom pluggable widgets. I'm building a widget that adds GoogleAutocomplete on address form fields. All works fine now, am getting the dropdown suggestions to choose from and executing code within the widget when an address is selected. I am passing in the attributes of the address as properties (the different fields to match with the results). What I want is to have the remaining address fields update with the new values when they are changed in the widget, so that they populate the empty fields.   So far I've tried lots of different property types and combinations, but even though I see the resulting fields updated within the widget, the original attributes don't reflect the change.   Is there a way to either a) update the values from within the widget? or b) somehow export the data returned from GooglePlaces so I can do the update in a nanoflow?   Many thanks in advance for any assistance.
asked
3 answers
0

Hi Mignonne,

If I understand you in the right way, Here are some insights that may help you:

 

Option A: Update Values Within the Widget

  1. Define Properties: Ensure that you have defined properties for each address field in your widget. These properties should correspond to the fields you want to update.

  2. Bind Properties to Input Fields: Bind each property to the corresponding input field in your widget. This allows the widget to track changes in these fields.

  3. Use Event Listeners: In your widget code, use event listeners (such as onInput or onChange depending on your widget type) to detect when the user changes the values in the GoogleAutocomplete field.

  4. Update Other Fields: Within the event listener, update the values of the other address fields based on the changes in the GoogleAutocomplete field.

     

    javascriptCopy code

    // Example pseudocode                                                                                                                                                                                                                             widget.on("change", "#googleAutocompleteField", function() { var selectedAddress = getSelectedAddress(); // Function to get selected address details // Update other fields widget.setProperty("street", selectedAddress.street); widget.setProperty("city", selectedAddress.city); // Update other fields as needed });

Option B: Export Data from GooglePlaces and Update in Nanoflow

  1. Expose Nanoflow in Widget: Create a nanoflow in your Mendix application that updates the address fields based on the selected address. Expose this nanoflow as a function in your widget.

     

    javascriptCopy code

    // Example pseudocode in your widget                                                                                                          mx.data.action({ params: { applyto: "selection", actionname: "YourModule.YourNanoflow", guids: [ /* Pass relevant GUIDs or parameters here */ ] }, callback: function(result) { // Handle callback if needed }, error: function(error) { // Handle error if needed } });

  2. Invoke Nanoflow from Widget: In your widget, invoke this nanoflow when the GoogleAutocomplete field changes. Pass the relevant parameters, such as the GUIDs or values needed for the nanoflow to identify the record and update the address fields.

  3. Implement Nanoflow: In your nanoflow, use the values returned from GooglePlaces to update the remaining address fields.

     

    javascriptCopy code

    // Example pseudocode in your nanoflow // Retrieve parameters                                                                                              var selectedAddress = $input.SelectedAddress; // Update other fields $currentObject/YourEntity/Street = selectedAddress.street; $currentObject/YourEntity/City = selectedAddress.city; // Update other fields as needed

By choosing between Option A or Option B, you can implement a solution that best fits your requirements and coding preferences. Adjust the pseudocode according to the specifics of your Mendix application and widget implementation.

 

** Kindly accept my answer if it assists you in solving your problem.

answered
1

Hi Mignonne

You can use 

 props.valueAttribute.setValue('The new value')

or you can use props.valueAttribute.setTextValue("The new value")

valueAttribute : the key that you set for the attribute in the xml file

Hope this answer your question .

answered
0

Thank you for your responses. It turned out I had a race condition happening inside my react code. I switched to a useState() approach instead of a callback, setting state when the data was ready. 

answered