Sharing data between two custom widgets

0
Hey guys,   Was wondering if there is a way to share data between two separate widgets? I want to know because I’m currently using the drop down sort widget, which requires you to manually add in the variables to choose from in the drop down. Well, because it requires you to do that, there is no way for me to know which variable is selected during runtime, and the widget doesn’t handle on change events. So, currently I’m thinking the best way to handle the situation is write my own custom widget that reads the current selected variable from the DOM, or possibly directly from the selected variable if I can get that information from the drop down widget (Which I honestly don’t know how to do because I’m super new to Mendix and widgets). If there is a better way, I’d much rather do that, but at this point I’m at a loss of new ideas.    Thanks so much, Austin
asked
2 answers
1

If I were solving this exact use case, I’d go one of 2 ways:

Non-widget method

  • Source your list view using a microflow
  • Outside of the list view, use a data view with a non-persistable “helper” object
  • Add an enum attribute or association on that helper object so you can create a dropdown box or reference selector to mimic the behavior of the Drop Down Sort widget.
  • In the data source microflow for your list view, use the selected enum or association to filter your list

In this way, you’ll know via the helper object what the user has currently selected, and can use that in a “Select All” button to retrieve the same.

Widget method

  • On the page use a data view with a “helper” object around the Drop Down Widget
  • Extend the capabilities of the Drop Down Sort widget:
    • Change the widget to require a context entity (in the widget xml requiresEntityContext=”true”)
    • Add an attribute property to the widget for storing the current selection
    • Change the code so that when a user selects an item from the dropdown, it also sets the value of the attribute you’ve specfied
  • Your select all button could use the value set in the helper object to select the right objects

 

Edit:

Most widgets in the app store (if you access it from a browser) have a link to a GitHub repository. In the repo, you'll usually find a test project as well as build tooling to pack the widget code into an mpk. So, fork the ListViewControls widget repo, clone a copy to your local machine. In the case of ListViewControls, you'll find that the widget is built in TypeScript and uses React inside of a Dojo wrapper. Unfortunately this makes it a bit complex to edit for someone new to the frameworks involved.

On a bright note, I just made an edit to the widget that's actually very similar to what you need to do. In my case, I was modifying the HeaderSort widget to require a context entity, and to enable a dynamic label on that header. See that commit detail here. I hope you can try making similar edits on your fork to help you figure out how it works.

Once you have a local clone of your repository, run 'npm install' on the directory. Then you’ll be able to run commands like ‘npm run build’ to create a production-level mpk or ‘npm run dev’ to set up a listener that rebuilds your widget every time you edit the widget files and save. This listener injects the code into the local test project (see the test directory) so that you can open the project in the modeler, run it, and then edit/debug your widget on the fly.

I realize this is a total crash course but hopefully you’re up for a challenge. Mendix does offer a widget workshop training course via Expert Services in case you’re looking for a more structured approach.

 

answered
0

You can use the context object or query for the widget by id/node using dijit.byNode or dijit.byId, share the data, and call update

answered