Bootstrap collapse js in Mendix

0
Hello everyone, has anyone had any luck implementing standard Bootstrap collapse within a Mendix project? I’m running into some issues getting the javascript to run in IE. The intended outcome would be that a container of content is collapsed on page load, and when the user clicks a button this content would show. Bootstrap has long had this functionality in js (https://getbootstrap.com/docs/4.1/components/collapse). I have tried adding the js into my Mendix project within the HTMLSnippet widget, and it works in Firefox and Chrome. However in IE I’m seeing an error: “Error while evaluating javascript input: SyntaxError: Syntax error” I am aware that Mendix provides collapse functionality using the Groupbox widget, however this widget isn’t suitable in my specific case as the content to be collapsed, and the button to show it are in separate areas on the page, not beside one another.  
asked
4 answers
1

looks like you’d probably need some custom js.

for collapsing the menu we use :

$('.clickthis').click(function() {
        $(".targetthis").toggleClass("toggleclass");
});

this might help.

probably some widgets that do this, but this is just the html/javacript addon.

hope it helps :D 

for more about this, view this topic: https://forum.mendix.com/link/questions/92540

answered
0

Thanks everyone for the thoughtful replies. I was able to solve it using Jason’s suggestion and the Javascript button widget from the app store. This method is tested and working in IE11, Firefox 64.0.2, and Chrome 64.x.

To get this working I hid a container by setting a class of .hidden. For targeting the container with js I added a second class (for example “.collapsable”). Then I remove the .hidden class when the javascript button is clicked. This behaves very similar to bootstrap collapse (albeit without the nice smooth transition, but it will do for now. If anyone feels like enhancing this method to show the bootstrap expanding and collapsing “animated” transitions I’d love to know if you get it working.

For anyone needing this in the future the js that worked for me on the Javascript button is below. Make sure to set Behaviour > Content Type to “Javascript with JQuery” on the Javascript Button widget.

$('.collapsable').toggleClass('hidden')

“Find a div on the page with a class of “collapsable” and toggle the class “hidden” on and off when the javascript button is pressed.”

Note: As per my original post groupboxes were not a viable solution, which is why the downvote on Dragos’ comment. The approach of using a non-persistent entity and microflow, while interesting, was a bit convoluted when it could simply be achieved with frontend js only. But thank you both for the suggestions!

answered
-1

Hi Rick,

Have you considered using conditional visibility to simulate the collapse? You could create a non-persistent entity with a boolean. The collapsed area can be hidden when you get to the page and then you can use a button to call a microflow that changes the boolean value to simulate the expand.

If your page structure doesn’t allow using a new entity, then you could add a boolean to your existing entity and just ensure the value is reset every time you leave the page or commit the object. 

I know this not be the best solution but it will ensure that it works in IE.

 

 

answered
-1

Hello Rick,

Have you tried the widgets in the app store? 

There’s a button for collapsing group boxes on the page, as well as a panel similar to the group box but opening above the box. I think you might find the button to do the trick although it comes with some limitations. Worst case scenario you could have a look into how they do the collapse and may be able to correct your code.

Hope this helps

answered