cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Palani
Frequent Visitor

Using LookupObjects inside a Fluent UI Panel/Modal not editable/clickable

Hello Experts,

 

I am building a PCF control where I have a Fluent UI Panel and a Modal dialog with a button on each.  I am trying to bring up the Lookup dialog using (context.utils.lookupObjects(lookupOptions)).  The lookup dialog comes up, but is not clickable/editable. 

 

I tried updating the zIndex of the OverlayProps and LayerProps to 0 on the panel, which allows the search button on the lookup panel, but still the search box is not editable (we cannot type in the search text).   Can someone help here by giving suggestions on what else to be done here?

 

 

 

 

 

 

 

 <Panel
                layerProps={{ styles: { root: { zIndex: 0 } } }}
                overlayProps={{ styles: { root: { zIndex: 0 } } }}
            >

 <Modal
                isBlocking={true}
                layerProps={{ styles: { root: { zIndex: 0 } } }}
                overlay={{ styles: { root: { zIndex: 0 } } }}
            >

 

 

 

 

 

 

Lookup Dialog on Fluent UI ModalLookup Dialog on Fluent UI Modal

 

Lookup Dialog on Fluent UI PanelLookup Dialog on Fluent UI Panel

 

Regards,

Palani K.B.

1 ACCEPTED SOLUTION

Accepted Solutions

I have had the same issue - it's to do with the way that the Model Driven CSS adds the side panel - and the Fluent UI puts the overlay at the end of the dom. There are some hacks you can do to the CSS to fix - but I have come to the conclusion that if you are going to use the Fluent UI dialog then you'll need to implement your own custom lookup.

View solution in original post

3 REPLIES 3
rimatos
Community Support
Community Support

Hi @Palani ,

 

Unfortunately I do not have experience with using PCF, but maybe I can point you in other directions that can get you some help on the subject.

 

In this scenario it looks like that either the control is not at the front of the screen (which is strange given that you already changed the zIndex to push the component to the front), or that the control as some view only property set that is not enabling you to click it.

If you need you can reference the LookUpObjects and LookUpOptions  documentation for any additional information on this.

 

 

I would recommend also raising a thread for this issue in the https://community.dynamics.com/ forum, as it also contains some users with expertise in PCF handling in those forums.

 

As a last resource, if you believe this appears to be an issue, you can also raise a support ticket through https://admin.powerplatform.microsoft.com/support in order to investigate this in more depth.

 

Hope this helps you move forward!

 

Regards,

Ricardo

I have had the same issue - it's to do with the way that the Model Driven CSS adds the side panel - and the Fluent UI puts the overlay at the end of the dom. There are some hacks you can do to the CSS to fix - but I have come to the conclusion that if you are going to use the Fluent UI dialog then you'll need to implement your own custom lookup.

Hi @ScottDurow and @rimatos ,

 

Thank you for your suggestion. I could not find any other solution on my requirement of using LookupObjects on top of a Fluent UI Panel.

 

I am now proceeding with implementing a custom Lookup dialog for my PCF control.

 

Regards,

Palani K.B.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Users online (1,268)