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
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Power Apps Ideas

Changes to Ideas Coming

We are excited to announce a new way to share your ideas for Power Apps!

Users online (1,672)