\npac pcf init –namespace RatingControl –name Rating –template field<\/strong><\/p>\n
Next, to use the UI fabric in PCF project, we need to install it by using the following command: Once the above command is executed, it will then install office-ui-fabric-react necessary to build and use UI fabric control. Now, we are ready to develop the PCF using UI fabric. Make sure you extend the rating class by using the following command: Now, here is the full code of Rating.tsx file:<\/p>\n import * as React from ‘react’; ); } After that, make required changes in manifest file and then build the PCF project. To deploy rating PCF control in CRM you can use solution or directly push using command. Also there are many controls available in office ui fabric<\/a> that we can use to enhance user experience.<\/p>\n Conclusion:<\/strong><\/p>\n Thus, as illustrated above, with the help of office ui fabric we can develop rich controls to enhance user experience.<\/p>\n Get 1 Click apps and say goodbye to all repetitive data entry in CRM –<\/em> Introduction PCF stands for PowerApps Component Framework. PCF is used to build the full custom component to enrich user experience. On the other hand, Office UI Fabric is a responsive, mobile-first, front-end framework for developers which is designed to make it simple to create web experiences quickly using the Office Design Language. Recently, we had\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":23186,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[18,19,44,1929,1985],"tags":[1941],"class_list":["post-23183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365-v9-2","category-dynamics-crm","category-power-apps","category-pcf","category-power-automate","tag-pcf-control"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=23183"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/23186"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=23183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=23183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=23183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nnpm install office-ui-fabric-react<\/strong><\/p>\n
\nTo use office ui fabric control, create react file with extension .tsx (). The proper way is to first create component folder and add .tsx file inside it. Now, name it as rating.tsx. As we want to create rating component, we need to include following in rating.tsx file:
\nimport * as React from ‘react’;<\/strong>
\nimport { Rating, RatingSize } from ‘office-ui-fabric-react\/lib\/Rating’;<\/strong><\/p>\n
\nexport class RatingControl extends React.Component.<\/strong><\/p>\n
\nimport { Rating, RatingSize } from ‘office-ui-fabric-react\/lib\/Rating’;
\nimport { getTheme, createTheme, ITheme } from ‘office-ui-fabric-react\/lib\/Styling’;
\nexport class RatingControl extends React.Component< {}, { rating?: number; largeStarRating?: number; smallStarRating?: number; tenStarRating?: number; themedStarRating?: number; customIconStarRating?: number; } > {
\nprivate _customTheme: ITheme;
\nconstructor(props: {}) {
\nsuper(props);
\nthis.state = {
\nlargeStarRating: undefined
\n};
\nthis._customTheme = createTheme(getTheme());
\nthis._customTheme.semanticColors.bodySubtext = ‘#DFDFDF’;
\nthis._customTheme.semanticColors.bodyTextChecked = ‘#1E9FE8’;
\n}
\npublic render(): JSX.Element {
\nreturn (<\/p>\n
\nprivate _onFocus = () => {
\n};
\nprivate _onBlur = () => {
\n};
\nprivate _onLargeStarChange = (ev: React.FocusEvent, rating: any): void => {
\nthis.setState({ largeStarRating: rating });
\n};
\nprivate _getRatingComponentAriaLabel(rating: number, maxRating: number): string {
\nreturn `Rating value is ${rating} of ${maxRating}`;
\n}
\n}
\nexport default RatingControl
\nTo call this Rating control we need to add below code in init method of Index.ts file
\nthis._container = document.createElement(“div”);
\ncontainer.appendChild(this._container);
\nReactDOM.render(
\nReact.createElement(RatingControl)
\n, this._container
\n);<\/p>\n
\nOnce rating control is deployed in CRM, we can use it as per our requirement. Here, we have used it for Account, as shown below screenshot:<\/p>\n![\"\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/03\/PCF.png\")
<\/p>\n
\nClick2Clone<\/a> <\/strong>\u2013 Clone\/Copy Dynamics 365 CRM records in 1 Click<\/em>
\nClick2Export<\/a><\/strong> \u2013 Export Dynamics 365 CRM Report\/CRM Views\/Word\/Excel template in 1 Click<\/em>
\nClick2Undo<\/a><\/strong> \u2013 Undo & Restore Dynamics 365 CRM data in 1 Click<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"