3

I want to use Fabric React JS in SharePoint 2013 Environment without SPFx. Is it Possible to use and deploy?

Code:

import * as React from 'react';

import { CommandBar, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar';
import { CommandBarButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';

export class CommandBarButtonAsExample extends React.Component<ICommandBarProps, {}> {

  constructor(props: ICommandBarProps) {
    super(props);
  }

  public render(): JSX.Element {

    const customButton = (props: IButtonProps) => {
      const buttonOnMouseEnter = () => console.log(`${props.text} hovered`);
      return (
        <CommandBarButton
          onMouseEnter={ buttonOnMouseEnter }
          { ...props }
          styles={ {
            ...props.styles,
            icon: { color: 'red' }
          } }
        />
      );
    };

    const { items, overflowItems, farItems } = this.props;

    return (
      <div>
        <CommandBar
          buttonAs={ customButton }
          items={ items }
          overflowItems={ overflowItems }
          farItems={ farItems }
          ariaLabel={ 'Use left and right arrow keys to navigate between commands' }
        />
      </div>
    );
  }

}

https://developer.microsoft.com/en-us/fabric#/components/commandbar

Can I use Fabric React in our SP 2013 Environment?

Improve this question

2 Answers 2

Reset to default
2

The Answer is YES, we can use Office UI fabric without SPFX. Fabric UI is just like a 3rd party library. You can create a simple React project and install the Office Fabric UI dependencies. 

npm i --save office-ui-fabric-react react react-dom redux redux-thunk react-redux

Do check out this blog Using Office Fabric UI. Also, have a look onto the Part1 for setting up the project

EDIT 1: There is a framework-independent Fabric UI components which you can directly consume by using CDNs. I have created a sample web part page and added a Script Editor web part to it. And this works like charm.

Code:

<html>
<head>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
</head>
<body>
<span class="ms-font-su ms-fontColor-themePrimary">I am Blue !</span><br/>
<button class="ms-Button">
  <span class="ms-Button-label">Click Me</span>
</button>
<body>
<script type="text/javascript">
var ButtonComponent = document.querySelector(".ms-Button");
new fabric["Button"](ButtonComponent, function() {
  alert("I am Clicked");
});
</script>
</html>

ScreenShot : enter image description here

Improve this answer
8
  • Here, Installing Redux is optioal
    – DvG
    Commented Jun 4, 2018 at 7:37
  • Thanks. But how we can use Fabric React as Client Side App Part? I don't want to use Provider Hosted App/SharePoint Hosted App. Do you have any deployment steps?
    – Prashant Shah
    Commented Jun 4, 2018 at 10:18
  • Hi, Let me clarify one thing here, If you are creating a client-side web part where you are using React and other JS framework eventually you will end up in SP compatible App/solution. So, SPFX is just one point collection of all dependencies related to SP client side solution Project. Now, If we talk about deployment, it is same like using a task runner like gulp to do the job like Build, Package, Uploading the Solution then Installing the App. Refer : docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/…
    – DvG
    Commented Jun 4, 2018 at 10:48
  • 2
    @DvG,I think there is little bit confusion here. I think "Office Fabric UI" and "Office UI Fabric React" both are different concepts. And Prashant is trying to ask if we can use "Office UI Fabric React" technology in content editor web part and without SPFx - client side web parts or not?
    – Dikesh Gandhi
    Commented Jun 5, 2018 at 7:20
  • 1
    After button click page is getting refreshed, any idea why is that happening?
    – Ali
    Commented Jan 25, 2019 at 1:22
0

it may work on a classic page but as far as i know, the only way to use Fabric UI React in a modern page is within an SPFX web part / app customizer - and a custom SPFX webpart can be deployed in SP2016 but not in SP2013

the suggested solution is based on Fabric UI JS which is a separate framework, that is designed for non-SharePoint O365 addons

from my own experience it conflicts with SharePoint modern experience styling (because it overrides styles)

also some sources recommend the React framework over the JS version, more information can be found here http://andrewconnell.com/blog/avoid-the-office-ui-fabric-javascript-package

Improve this answer
1
  • it seems the styling issues were reported by others, a workaround that is suggested is to download the css (and js) files and rename all classes from prefix ms- into something else, you end up then with a custom solution that mimics the O365 modern experience github.com/SharePoint/sp-dev-docs/issues/434
    – dc2009
    Commented Mar 28, 2019 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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