Fluentui: Office UI Fabric panel will not close.

[sharepointmike]

I use an Office UI Fabric Panel (nothing special, just as in the Microsoft examples). However, I want to trigger the panel programmatically. I open the panel lik this:
$("#btnOpenPanel").trigger( "click" );
In the panel I have a form. When I submit the form I do an update in the database and close the form. The database update works fine and I want to close the panel the same way I opened it. So like this again:
$("#btnOpenAddPanel").trigger( "click" );
But that is not working. The panel remains open.
Is there some other way to close the panel?

I use this example: https://dev.office.com/fabric-js/Components/Panel/Panel.html

[dzearing]

Hmm. Is this fabric-react you're using, or FabricJS? https://github.com/OfficeDev/office-ui-fabric-js

Mixing fabric-react and jquery would be a bad idea.

[sharepointmike]

I use: office-ui-fabric-js 1.2.0

[KevinTCoughlin]

Not sure of your DOM mark-up but I wonder if you're triggering the click on the panel itself and therefore it won't close like if you do so manually on that example site. If you have access to the component it looks like you can trigger dismiss() with an optional callback function.

[sharepointmike]

Like $("#panelID").dismiss() ?

[KevinTCoughlin]

@sharepointmike does this example help?

https://codepen.io/kevintcoughlin/pen/MVNGdo

[sharepointmike]

@KevinTCoughlin
Great example, working now.
Thank a lot!!!

[KevinTCoughlin]

If you have two panels then you're likely overwriting panelInstance. You probably want to assign each to their own instance (local variable) and dismiss them programmatically when you want to i.e. after form submission and AJAX success.

[sharepointmike]

In the end your example is working like it should. My initial error was an user error.

By the way, is it possible to let a panel appear the same way? panel.show() or something?

[KevinTCoughlin]

It looks like the React version of Fabric (this repo) exposes open and dismiss methods. But the base library that you are currently using only exposes dismiss. If you feel strongly about exposing that method on the base library I'd recommend opening an issue @ https://github.com/OfficeDev/office-ui-fabric-js.

• https://developer.microsoft.com/en-us/fabric#/components/panel (API is near the bottom)
• https://github.com/OfficeDev/office-ui-fabric-js/blob/master/src/components/Panel/Panel.ts#L43

That's all I can tell from reading the code across the repos.

[jordandrako]

This sounds resolved and should have been an issue opened in fabric-js https://github.com/OfficeDev/office-ui-fabric-js/issues