3

Iam strugling to use OfficeUIFbric in my Client WebPart with AngularJS. I first created the webpart as "No javaScript web framework", and then i added angularJS as described in this article , webpart is working fine but without any OfficeUIFaberic design on the button. enter image description here

these two ways shown in articles is not working: import 'ng-office-ui-fabric' OR require('ng-office-ui-fabric')

iam adding these lines in my webpart.ts file....

and my config.js i have added angularjs and officeuifabric:

"externals": {
"angular": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
  "globalName": "angular"
},
"ng-office-ui-fabric": "https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.12.3/ngOfficeUiFabric.js"

}

  • You can also reference these fabric links in your html. – Saad Zulfiqar May 9 '17 at 6:26
3

Currently ngOfficeUIFabric uses an older version of Office UI Fabric than the version used by the SharePoint Framework. If you'd load ngOfficeUIFabric and its CSS, you would break the existing SharePoint UX.

Instead of using ngOfficeUIFabric in your SPFx solution built using AngularJS, you should either use the Office UI Fabric CSS styles available with SPFx or use the code from ngOfficeUIFabric and build your own components using the same version of Office UI Fabric as SPFx.

1

Fabric is the CSS framework

ngOfficeFabricUI are the Angular components using that CSS Framework

That blog only shows you how to load the JS files, it's missing the explanation how to load Fabric CSS Framework itself

I would never trust blogs, they are outdated the day they are written
(so that blog refers to an older JS file as well)

Go straight to the source:


You could try and find an SPFx example that uses Fabric:

https://github.com/SharePoint/sp-dev-fx-webparts/search?q=fabric

but with too many (hardly documented) SPFx examples, that takes some time

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.