Like
Share
Report
While working on creating a PCF control for status fields in Dynamics 365, where I wanted to show colored icons based on status, observed that icons do not render by default and you have to call initializeIcons() method to render them.
I am using React to render control and FontIcon class of office-ui-fabric. React control (StatusIcon.tsx) implementation looks like below where I am trying to render 3 icons with different colors.
|
import * as React from ‘react’;
import { FontIcon } from ‘office-ui-fabric-react/lib/Icon’;
import { mergeStyles, mergeStyleSets } from ‘office-ui-fabric-react/lib/Styling’;
const iconClass = mergeStyles({
fontSize: 50,
height: 50,
width: 50,
margin: ‘0 25px’,
});
const classNames = mergeStyleSets({
green: [{ color: ‘green’ }, iconClass],
yellow: [{ color: ‘yellow’ }, iconClass],
red: [{ color: ‘red’ }, iconClass],
});
export default class StatusIcon extends React.Component<{}, {}> {
// FontIcon is an optimized variant of standard Icon.
// You could also use the standard Icon here.
render() {
return (
<div>
<FontIcon iconName=”SkypeCircleCheck” className={classNames.green} />
<FontIcon iconName=”SkypeCircleMinus” className={classNames.yellow} />
<FontIcon iconName=”StatusErrorFull” className={classNames.red} />
</div>
);
}
};
|
And updateView method in index.ts simply render this StatusIcon control as shown below:
| public updateView(context: ComponentFramework.Context<IInputs>): void
{
ReactDOM.unmountComponentAtNode(this.container);
// Add code to update control view
var context = context;
ReactDOM.render(React.createElement(StatusIcon, null), this.container);
}
|
Looks pretty much straightforward, but when you execute and run you won’t see any icon being rendered and instead blank div.
Upon further investigation, found that I was missing to call initializeIcons(); method in StatusIcon.tsx control which is required to load icons at runtime. So updated StatusIcon.tsx looks like below:
|
import * as React from ‘react’;
import { FontIcon } from ‘office-ui-fabric-react/lib/Icon’;
import { mergeStyles, mergeStyleSets } from ‘office-ui-fabric-react/lib/Styling’;
import { initializeIcons } from ‘office-ui-fabric-react’;
initializeIcons();
const iconClass = mergeStyles({
fontSize: 50,
height: 50,
width: 50,
margin: ‘0 25px’,
});
const classNames = mergeStyleSets({
green: [{ color: ‘green’ }, iconClass],
yellow: [{ color: ‘yellow’ }, iconClass],
red: [{ color: ‘red’ }, iconClass],
});
export default class StatusIcon extends React.Component<{}, {}> {
// FontIcon is an optimized variant of standard Icon.
// You could also use the standard Icon here.
render() {
return (
<div>
<FontIcon iconName=”SkypeCircleCheck” className={classNames.green} />
<FontIcon iconName=”SkypeCircleMinus” className={classNames.yellow} />
<FontIcon iconName=”StatusErrorFull” className={classNames.red} />
</div>
);
}
};
|
Now when you execute and run your code again, icons will be rendered.
*This post is locked for comments