cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Menik1
Level: Powered On

PCF + Office UI Fabric React: Dropdown styling

Hello,

 

I'm currently playing around with PCF in combination with Office UI Fabric React. 

I use the Dropdown control as seen here but inside the PCF test harness the styling doesn't look like it. (see screenshot).

 

Capture.PNG

 

 

 

 

Does anyone have a clue what I'm missing?

 

My TSX

 

 

import * as React from 'react';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

export interface IEntityMetadataDropdownProps {
  entityLogicalName?: string;
  entityMetadataType?: ComponentFramework.PropertyTypes.EnumProperty<"All" | "Custom" | "System">;
  entityLogicalNameChanged: (newValue: string) => void;
}


const options: IDropdownOption[] = [
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'grape', text: 'Grape' },
  { key: 'broccoli', text: 'Broccoli' },
  { key: 'carrot', text: 'Carrot' },
  { key: 'lettuce', text: 'Lettuce' }
];

export class EntityMetadataDropdown extends React.Component<IEntityMetadataDropdownProps> {
  constructor(props: IEntityMetadataDropdownProps) {
    super(props);
  }
  
  public render(): JSX.Element {
    return  (
      <Dropdown placeholder="Select an entity" options={options} selectedKey={this.props.entityLogicalName} onChange={this._onChange} />
    );
  }

  private _onChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
    if(option){
      const selectedKey: string = option.key as string
      if (this.props.entityLogicalNameChanged) {
        this.props.entityLogicalNameChanged(selectedKey);
      }
    }
    else{
       this.props.entityLogicalNameChanged("");
    }  
  };
}

 

 

 

Index.ts (It's based upon the react example)

 

 

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { EntityMetadataDropdown, IEntityMetadataDropdownProps } from "./EntityMetadataSelector"


export class EntityMetadataSelector implements ComponentFramework.StandardControl<IInputs, IOutputs> {

	private notifyOutputChanged: () => void;
  	// reference to the container div
	private theContainer: HTMLDivElement;
	  
    private props: IEntityMetadataDropdownProps = {
		entityLogicalNameChanged: this.entityLogicalNameChanged.bind(this)
	};

	/**
	 * Empty constructor.
	 */
	constructor()
	{

	}

	/**
	 * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
	 * Data-set values are not initialized here, use updateView.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
	 * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
	 * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
	 * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
	 */
	 public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	 {
		// Add control initialization code
		this.notifyOutputChanged = notifyOutputChanged;
		this.props.entityLogicalName = context.parameters.EntityLogicalName.raw || undefined;
		this.props.entityMetadataType = context.parameters.EntityMetadataType;
		this.theContainer = container;
	 }


	/**
	 * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
	 */
	public updateView(context: ComponentFramework.Context<IInputs>): void
	{
		this.props.entityLogicalName = context.parameters.EntityLogicalName.raw || undefined;

		// Add code to update control view
		 // Render the React component into the div container
		 ReactDOM.render(
			// Create the React component
			React.createElement(
			  EntityMetadataDropdown, // the class type of the React component found in Facepile.tsx
			  this.props
			),
			this.theContainer
		  );
	}

	private entityLogicalNameChanged(newValue: string) {
		// only update if the number of faces has truly changed
		if (this.props.entityLogicalName !== newValue) {
		  this.props.entityLogicalName = newValue;
		  this.notifyOutputChanged();
		}
	  }

	/** 
	 * It is called by the framework prior to a control receiving new data. 
	 * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
	 */
	public getOutputs(): IOutputs
	{
		return {
			EntityLogicalName: this.props.entityLogicalName
		  };
	}

	/** 
	 * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
	 * i.e. cancelling any pending remote calls, removing listeners, etc.
	 */
	public destroy(): void
	{
		// Add code to cleanup control if necessary
		ReactDOM.unmountComponentAtNode(this.theContainer);
	}
}

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Menik1
Level: Powered On

Re: PCF + Office UI Fabric React: Dropdown styling

The test harness actually has a div element where a text-align: center is applied to it.

This effects everything in your own component.

View solution in original post

2 REPLIES 2
ScottDurow
Level 8

Re: PCF + Office UI Fabric React: Dropdown styling

Hi,
To get the style you want you will need to apply a className or styles to the drop down. The style will be influenced by the surrounding styles that comes with the test harness and so you’ll need to apply your own to override those.
Menik1
Level: Powered On

Re: PCF + Office UI Fabric React: Dropdown styling

The test harness actually has a div element where a text-align: center is applied to it.

This effects everything in your own component.

View solution in original post

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (6,407)