cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Resolver I
Resolver I

React elements in PCF render differently in Sandbox vs Model-Driven App

I have noticed several small rendering differences between the PCF Sandbox and actual deployed PCFs in a model-driven app. Specifically, react elements appear to drop some style characteristics when they render in the model-driven apps that are otherwise respected in the Sandbox.

 

Attached is a screen shot with one simple example: a Fluent UI slider control with OriginFromZero.

 

When it renders in the Sandbox (attachment Shot1), notice two things: the label is centered over the slider, respecting the Stacking element from FluentUI and the "inactive" portion of the slider (everything outside the actively selected value) is a soft gray.

 

But, when the same control is packaged as a solution and deployed to a form (Shot2), the label left-aligned and the inactive portion of the slider disappears altogether. 

 

In the case of the text-align, this appears to be the result of an inheritance from a container div created by the Sandbox with class "control-pane". OK, so that one is understandable; there probably shouldn't be a parent div injecting its own inheritances unless it replicates CDS, but that's also pretty easy to circumvent just by overwriting it myself in styles, so we'll skip past that for now...

 

The really weird one here is the slider inactive portion because this is where the Sandbox is correctly presenting the FluentUI element (with class inactiveSection, background rgb(200, 198, 196) to give it that nice soft gray: see Shot3). But once it is deployed to the form. that same class has no background attribute at all (would be Shot4, but there is a 3-attachment limit in these posts), hence why it is invisible!

 

OK, so let's recap:

- Issue 1: the Sandbox has a container div that is passing its own inheritances to the pcf so it renders one way in Sandbox, but not necessarily the same once deployed. Easy enough to work around, but probably shouldn't be that way, in my opinion.

- Issue 2: Once deployed to a model-driven app, a specific "background" style element of a Fluent UI element is being dropped altogether, which I don't understand and don't see a clear path to working around.

 

Has anyone else observed these, and does anyone know a good workaround for #2?

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User
Super User

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Aha - so it's because the Model Driven Fluent UI themes is overriding the standard Fluent UI theme that you see in the Test harness

You will need to explicitly set the style:

<Slider ... styles={inactiveSection: { background: DefaultPalette.neutralTertiaryAlt } }}

 (you will need to import DefaultPalette)
 
alternatively you could hard code the colour:
 
<Slider ... styles={inactiveSection: { background: "#C8C6C4" } }}

Hope this helps

View solution in original post

11 REPLIES 11
Highlighted
Super User
Super User

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

So you are seeing the React generated class are different depending on if it's running in Model vs Tester? Or are they the same - just the effective applied styles are different?

Highlighted
Resolver I
Resolver I

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Not totally sure how to answer that (I am pretty new to React). When I inspect using the React developer tools extension in Chrome/Edgium it doesn't show me the classes with enough specificity to see these style elements, so I can't say with absolute certainty that it is part of the class or just the applied style.

 

What I can tell you is that when I inspect the div in the Sandbox to see the effectively applied styles there is a background element with that gray color, but when I do the same after deploying, there is no such applied style.

Highlighted
Super User
Super User

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Using F12 on the test harness, find the background style and trace it to find the source - is it an inline style or a css class?

Inline styles will look like:

ScottDurow_0-1592995755355.png

 

CSS classes generated by react will look like:

ScottDurow_1-1592995822486.png

 

Also,  look out for styles that are inherited by cascading rules - they will look like:

ScottDurow_2-1592995853370.png

 

Once you've located the source of the background style rule in the harness - inspect the same in the model driven app and you should be able to see where the source of the style is missing and track it down from there.

Hope this helps!

Highlighted
Resolver I
Resolver I

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Thanks for the clarification Scott,

 

Yes, it is the CSS class that contains the background element in Sandbox, but does not once deployed.

Sandbox:

cchannon_0-1593017582751.png

Model-Driven:

cchannon_1-1593017616577.png

 

 

Highlighted
Super User
Super User

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

It’s interesting that the class names are different - are you sure you have the same code deployed as running in the tester?

Highlighted
Resolver I
Resolver I

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Absolutely certain. Rebuilt and redeployed to confirm; the class names are different but there is no question they refer to the same thing.

Highlighted
Super User
Super User

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

What code are you using to set the style in your react code?

Highlighted
Resolver I
Resolver I

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Good Question. The answer is I am not. 

 

I am using the FluentUI Slider element, and letting it set all its own style rules:

import { Slider } from 'office-ui-fabric-react/lib/Slider';
...
...
<Slider 
	label="Adjust range in days:" 
	min={-180} 
	max={180} 
	step={30} 
	showValue 
	originFromZero 
	snapToStep
	value={Math.floor((this.state.inputDate.getTime() - this.state.baseDate.getTime())/oneDay)} 
	onChange={(event) => this.shiftDate(event)} />

 

Highlighted
Super User
Super User

Re: React elements in PCF render differently in Sandbox vs Model-Driven App

Aha - so it's because the Model Driven Fluent UI themes is overriding the standard Fluent UI theme that you see in the Test harness

You will need to explicitly set the style:

<Slider ... styles={inactiveSection: { background: DefaultPalette.neutralTertiaryAlt } }}

 (you will need to import DefaultPalette)
 
alternatively you could hard code the colour:
 
<Slider ... styles={inactiveSection: { background: "#C8C6C4" } }}

Hope this helps

View solution in original post

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Users online (5,184)