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

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

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

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

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

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

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
August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (4,110)