Friday, November 8, 2019

Easy to detect device from SharePoint SPFX React application

We have a SharePoint framework application need to behavior differently when invoked from mobile device. Here is the quick way to implement this.

1. Install react-device-detect package
npm install react-device-detect --save
2. Import the package
import {
  BrowserView,
  MobileView,
  isBrowser,
  isMobile
} from "react-device-detect";
3. Use it inside your application

  if(!isSubmitDisabled && !recordIsReadOnly && isMobile){

      submitMenuProps = {
        items: [
          {
            key: 'saveOnly',
            name:'Save only',
            secondaryText: 'Do not submit to approval workflow',
            text: 'Save as draft',
            title: 'Save without submitting to a workflow',
            iconProps: { iconName: 'Save'},
            onClick: this.props.onSaveOnly
          },                       
          {
            key: 'Submit',
            name:'Submit',
            secondaryText: 'Submit to approval workflow',
            text: 'Submit from Mobile',
            title: 'Submitting to a workflow',
            iconProps: { iconName: 'SaveToMobile'},
            onClick: this.props.onSubmit
          }                     
        ]
      };
    }

No comments:

Post a Comment