Merge pull request #3785 from babakdanyal/hide-webpart-on-small-devices

2023-07-17 18:12:09 -04:00 · 2023-07-17 18:12:09 -04:00 · bdc9515354
parent 135b3707f7 1d5488c422
commit bdc9515354
30 changed files with 92 additions and 48 deletions
--- a/samples/react-enhanced-powerapps/README.md
+++ b/samples/react-enhanced-powerapps/README.md
@ -38,6 +38,7 @@ You'll need at least one application in Power Apps that you wish to embed in Sha
 ## Contributors

 * [Hugo Bernier](https://github.com/hugoabernier)
+* [Babak Danyal](https://github.com/babakdanyal)

 ## Version history

@ -46,6 +47,7 @@ Version|Date|Comments
 1.0|July 27, 2020|Initial release
 1.1|August 15, 2020|Added improved resize event handler
 1.2|January 20, 2022|Update to SPFx v1.13.1
+1.3|June 27, 2023|Added Hide web part on small devices

 ## Minimal Path to Awesome

--- a/samples/react-enhanced-powerapps/assets/sample.json
+++ b/samples/react-enhanced-powerapps/assets/sample.json
@ -9,7 +9,7 @@
      "Adds dynamic resizing, theme awareness, and dynamic data to embedded Power Apps"
    ],
    "creationDateTime": "2020-07-26",
-    "updateDateTime": "2022-01-29",
+    "updateDateTime": "2023-06-27",
    "products": [
      "SharePoint"
    ],
@ -70,11 +70,15 @@
    "authors": [
      {
        "gitHubAccount": "hugoabernier",
-        "company": "Tahoe Ninjas",
        "pictureUrl": "https://github.com/hugoabernier.png",
        "name": "Hugo Bernier",
        "twitter": "bernierh"
      },
+      {
+        "gitHubAccount": "babakdanyal",
+        "pictureUrl": "https://github.com/babakdanyal.png",
+        "name": "Babak Danyal"
+      },
      {
        "gitHubAccount": "kunj-sangani",
        "pictureUrl": "https://github.com/kunj-sangani.png",
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.d.ts
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.d.ts
@ -18,6 +18,7 @@ export interface IEnhancedPowerAppsWebPartProps {
    height: number;
    width: number;
    aspectratio: '16:9' | '3:2' | '16:10' | '4:3' | 'Custom';
+    isWebPartHiddenOnSmallDevices: boolean;
    themeValues: string[];
 }
 export default class EnhancedPowerAppsWebPart extends BaseClientSideWebPart<IEnhancedPowerAppsWebPartProps> {
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.d.ts.map
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.d.ts.map
@ -1 +1 @@
-{"version":3,"file":"EnhancedPowerAppsWebPart.d.ts","sourceRoot":"","sources":["../../../src/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,0BAA0B,EAK3B,MAAM,6BAA6B,CAAC;AAMrC;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D;;GAEG;AACH,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AAuBpC,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,GAAC,aAAa,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAC,KAAK,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ,CAAC;IACjD,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,qBAAqB,CAAC,8BAA8B,CAAC;IACzG,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,aAAa,CAA6B;IAElD,SAAS,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAa1B,MAAM,IAAI,IAAI;IA4DrB,SAAS,CAAC,SAAS,IAAI,IAAI;uBAIb,WAAW,EAAI,OAAO;IAIpC,SAAS,CAAC,4BAA4B,IAAI,0BAA0B;uBAwItD,kBAAkB,EAAI,0BAA0B;IAU9D,OAAO,CAAC,YAAY,CAEnB;IAED;;;;KAIC;IACD,OAAO,CAAC,wBAAwB;IAKhC;;;OAGG;IACH,SAAS,CAAC,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;CAIjD"}
+{"version":3,"file":"EnhancedPowerAppsWebPart.d.ts","sourceRoot":"","sources":["../../../src/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,0BAA0B,EAK3B,MAAM,6BAA6B,CAAC;AAMrC;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D;;GAEG;AACH,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAG3B,MAAM,4BAA4B,CAAC;AAuBpC,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,aAAa,GAAC,aAAa,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAC,KAAK,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ,CAAC;IACjD,6BAA6B,EAAE,OAAO,CAAC;IACvC,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,qBAAqB,CAAC,8BAA8B,CAAC;IACzG,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,aAAa,CAA6B;IAElD,SAAS,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAa1B,MAAM,IAAI,IAAI;IA6DrB,SAAS,CAAC,SAAS,IAAI,IAAI;uBAIb,WAAW,EAAI,OAAO;IAIpC,SAAS,CAAC,4BAA4B,IAAI,0BAA0B;uBA2ItD,kBAAkB,EAAI,0BAA0B;IAU9D,OAAO,CAAC,YAAY,CAEnB;IAED;;;;KAIC;IACD,OAAO,CAAC,wBAAwB;IAKhC;;;OAGG;IACH,SAAS,CAAC,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;CAIjD"}
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.js
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.js
@ -100,6 +100,7 @@ var EnhancedPowerAppsWebPart = /** @class */ (function (_super) {
            height: clientHeight,
            themeVariant: this._themeVariant,
            border: this.properties.border,
+            isWebPartHiddenOnSmallDevices: this.properties.isWebPartHiddenOnSmallDevices,
            themeValues: this.properties.themeValues
        });
        ReactDom.render(element, this.domElement);
@ -139,6 +140,9 @@ var EnhancedPowerAppsWebPart = /** @class */ (function (_super) {
                                PropertyPaneToggle('border', {
                                    label: strings.BorderFieldLabel
                                }),
+                                PropertyPaneToggle('isWebPartHiddenOnSmallDevices', {
+                                    label: strings.IsWebPartHiddenOnSmallDevicesFieldLabel
+                                }),
                                PropertyPaneChoiceGroup('layout', {
                                    label: strings.LayoutFieldLabel,
                                    options: [
@ -191,7 +195,7 @@ var EnhancedPowerAppsWebPart = /** @class */ (function (_super) {
                                }),
                                this.properties.layout === "AspectRatio" && this.properties.aspectratio === "Custom" && PropertyPaneTextField('height', {
                                    label: strings.HeightFieldLabel,
-                                }),
+                                })
                            ]
                        },
                        {
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.js.map
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.js.map
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.manifest.json
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.manifest.json
@ -21,6 +21,7 @@
    "properties": {
      "layout": 'AspectRatio',
      "aspectratio": '16:9',
+      "isWebPartHiddenOnSmallDevices":false
    }
  }]
 }
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.js
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.js
@ -24,7 +24,7 @@ var EnhancedPowerApps = /** @class */ (function (_super) {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    EnhancedPowerApps.prototype.render = function () {
-        var _a = this.props, dynamicProp = _a.dynamicProp, themeVariant = _a.themeVariant, themeValues = _a.themeValues, appWebLink = _a.appWebLink, useDynamicProp = _a.useDynamicProp, dynamicPropName = _a.dynamicPropName, locale = _a.locale, border = _a.border, height = _a.height;
+        var _a = this.props, dynamicProp = _a.dynamicProp, themeVariant = _a.themeVariant, themeValues = _a.themeValues, appWebLink = _a.appWebLink, useDynamicProp = _a.useDynamicProp, dynamicPropName = _a.dynamicPropName, locale = _a.locale, border = _a.border, isWebPartHiddenOnSmallDevices = _a.isWebPartHiddenOnSmallDevices, height = _a.height;
        // The only thing we need for this web part to be configured is an app link or app id
        var needConfiguration = !appWebLink;
        var semanticColors = themeVariant.semanticColors;
@ -48,7 +48,7 @@ var EnhancedPowerApps = /** @class */ (function (_super) {
        }
        // Build the frame url
        var frameUrl = appUrl + "?source=SPClient-EnhancedPowerAppsWebPart&amp;locale=" + locale + "&amp;enableOnBehalfOf=true&amp;authMode=onbehalfof&amp;hideNavBar=true&amp;" + dynamicPropValue + themeParams + "&locale=" + locale;
-        return (React.createElement("div", { className: styles.enhancedPowerApps, style: needConfiguration ? { height: "315px" } : { height: height + "px" } },
+        return (React.createElement("div", { className: isWebPartHiddenOnSmallDevices ? styles.enhancedPowerApps && styles.hideOnMobileDevices : styles.enhancedPowerApps, style: needConfiguration ? { height: "315px" } : { height: height + "px" } },
            needConfiguration &&
                React.createElement(Placeholder, { iconName: 'PowerApps', iconText: strings.PlaceholderIconText, description: strings.PlaceholderDescription, buttonLabel: strings.PlaceholderButtonLabel, onConfigure: this.props.onConfigure }),
            !needConfiguration &&
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.js.map
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.js.map
@ -1 +1 @@
-{"version":3,"file":"EnhancedPowerApps.js","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/EnhancedPowerApps.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC;AAE3D;;KAEK;AACL,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAQvE;IAA+C,qCAAiE;IAAhH;;IAmEA,CAAC;IAjEQ,kCAAM,GAAb;QACQ,IAAA,eAUU,EATd,4BAAW,EACX,8BAAY,EACZ,4BAAW,EACX,0BAAU,EACV,kCAAc,EACd,oCAAe,EACf,kBAAM,EACN,kBAAM,EACN,kBACc,CAAC;QAEjB,qFAAqF;QACrF,IAAM,iBAAiB,GAAY,CAAC,UAAU,CAAC;QAEvC,IAAA,4CAAc,CAAkC;QAExD,sEAAsE;QACtE,IAAM,gBAAgB,GAAW,cAAc,IAAI,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,MAAI,kBAAkB,CAAC,eAAe,CAAC,SAAI,kBAAkB,CAAC,WAAW,CAAG,CAAA,CAAC,CAAA,EAAE,CAAC;QAE/J,uGAAuG;QACvG,2DAA2D;QAC3D,IAAM,MAAM,GAAW,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,qCAAmC,UAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QAExI,gEAAgE;QAChE,IAAI,WAAW,GAAW,EAAE,CAAC;QAE7B,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACzC,WAAW,CAAC,OAAO,CAAC,UAAC,UAAkB;gBACrC,IAAI;oBAEF,IAAM,UAAU,GAAW,cAAc,CAAC,UAAU,CAAC,CAAC;oBACtD,WAAW,GAAG,WAAW,IAAG,MAAI,UAAU,SAAI,kBAAkB,CAAC,UAAU,CAAG,CAAA,CAAC;iBAChF;gBAAC,OAAO,CAAC,EAAE;oBACV,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;iBAChB;YACH,CAAC,CAAC,CAAC;SACJ;QAGD,sBAAsB;QACtB,IAAM,QAAQ,GAAc,MAAM,6DAAwD,MAAM,mFAA8E,gBAAgB,GAAG,WAAW,gBAAW,MAAQ,CAAC;QAEhO,OAAO,CACL,6BAAK,SAAS,EAAG,MAAM,CAAC,iBAAiB,EAAG,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAC,MAAM,EAAC,OAAO,EAAC,CAAA,CAAC,CAAA,EAAC,MAAM,EAAI,MAAM,OAAI,EAAC;YAC3G,iBAAiB;gBACjB,oBAAC,WAAW,IACZ,QAAQ,EAAC,WAAW,EACpB,QAAQ,EAAE,OAAO,CAAC,mBAAmB,EACrC,WAAW,EAAE,OAAO,CAAC,sBAAsB,EAC3C,WAAW,EAAE,OAAO,CAAC,sBAAsB,EAC3C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAI;YACtC,CAAC,iBAAiB;gBACnB,0CACC,IAAI,CAAC,KAAK,CAAC,UAAU;oBACvB,gCAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,sDAAsD,EAAC,OAAO,EAAC,gIAAgI,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EACnR,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAA,CAAC,CAAC,GAAG,GACpB,CAEN,CAEA,CACP,CAAC;IACJ,CAAC;IACH,wBAAC;AAAD,CAAC,AAnED,CAA+C,KAAK,CAAC,SAAS,GAmE7D"}
+{"version":3,"file":"EnhancedPowerApps.js","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/EnhancedPowerApps.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC;AAE3D;;KAEK;AACL,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAQvE;IAA+C,qCAAiE;IAAhH;;IAmEA,CAAC;IAjEQ,kCAAM,GAAb;QACQ,IAAA,eAWU,EAVd,4BAAW,EACX,8BAAY,EACZ,4BAAW,EACX,0BAAU,EACV,kCAAc,EACd,oCAAe,EACf,kBAAM,EACN,kBAAM,EACN,gEAA6B,EAC7B,kBACc,CAAC;QAEjB,qFAAqF;QACrF,IAAM,iBAAiB,GAAY,CAAC,UAAU,CAAC;QAEvC,IAAA,4CAAc,CAAkC;QAExD,sEAAsE;QACtE,IAAM,gBAAgB,GAAW,cAAc,IAAI,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,MAAI,kBAAkB,CAAC,eAAe,CAAC,SAAI,kBAAkB,CAAC,WAAW,CAAG,CAAA,CAAC,CAAA,EAAE,CAAC;QAE/J,uGAAuG;QACvG,2DAA2D;QAC3D,IAAM,MAAM,GAAW,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,qCAAmC,UAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QAExI,gEAAgE;QAChE,IAAI,WAAW,GAAW,EAAE,CAAC;QAE7B,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YACzC,WAAW,CAAC,OAAO,CAAC,UAAC,UAAkB;gBACrC,IAAI;oBAEF,IAAM,UAAU,GAAW,cAAc,CAAC,UAAU,CAAC,CAAC;oBACtD,WAAW,GAAG,WAAW,IAAG,MAAI,UAAU,SAAI,kBAAkB,CAAC,UAAU,CAAG,CAAA,CAAC;iBAChF;gBAAC,OAAO,CAAC,EAAE;oBACV,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;iBAChB;YACH,CAAC,CAAC,CAAC;SACJ;QACD,sBAAsB;QACtB,IAAM,QAAQ,GAAc,MAAM,6DAAwD,MAAM,mFAA8E,gBAAgB,GAAG,WAAW,gBAAW,MAAQ,CAAC;QAEhO,OAAO,CACL,6BAAK,SAAS,EAAG,6BAA6B,CAAA,CAAC,CAAA,MAAM,CAAC,iBAAiB,IAAI,MAAM,CAAC,mBAAmB,CAAA,CAAC,CAAA,MAAM,CAAC,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAC,MAAM,EAAC,OAAO,EAAC,CAAA,CAAC,CAAA,EAAC,MAAM,EAAI,MAAM,OAAI,EAAC;YAC/L,iBAAiB;gBACjB,oBAAC,WAAW,IACZ,QAAQ,EAAC,WAAW,EACpB,QAAQ,EAAE,OAAO,CAAC,mBAAmB,EACrC,WAAW,EAAE,OAAO,CAAC,sBAAsB,EAC3C,WAAW,EAAE,OAAO,CAAC,sBAAsB,EAC3C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAI;YACtC,CAAC,iBAAiB;gBACnB,0CACC,IAAI,CAAC,KAAK,CAAC,UAAU;oBACvB,gCAAQ,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,sDAAsD,EAAC,OAAO,EAAC,gIAAgI,EAC3O,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EACvC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAA,CAAC,CAAC,GAAG,GACpB,CAEN,CAEA,CACP,CAAC;IACJ,CAAC;IACH,wBAAC;AAAD,CAAC,AAnED,CAA+C,KAAK,CAAC,SAAS,GAmE7D"}
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.css
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.css
@ -1,2 +1 @@
-.enhancedPowerApps_466fc2fc{color:inherit}.enhancedPowerApps_466fc2fc span[class^=placeholderText_]{font-size:20px!important;font-weight:600!important;color:#323130}.enhancedPowerApps_466fc2fc span[class^=placeholderDescriptionText_]{color:#605e5c!important;margin:20px 0 28px;line-height:23px;font-size:16px!important}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vd29ya3NwYWNlcy9zcC1kZXYtZngtd2VicGFydHMvc2FtcGxlcy9yZWFjdC1lbmhhbmNlZC1wb3dlcmFwcHMvc3JjL3dlYnBhcnRzL2VuaGFuY2VkUG93ZXJBcHBzL2NvbXBvbmVudHMvRW5oYW5jZWRQb3dlckFwcHMubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEsNEJBQ0UsTUFBQSxRQU9BLDBEQUNFLFVBQUEsZUFDQSxZQUFBLGNBQ0EsTUFBQSxRQUdGLHFFQUNFLE1BQUEsa0JBQ0EsT0FBQSxLQUFBLEVBQUEsS0FDQSxZQUFBLEtBQ0EsVUFBQSJ9 */
+.enhancedPowerApps_dc8a3c45{color:inherit}.enhancedPowerApps_dc8a3c45 span[class^=placeholderText_]{font-size:20px!important;font-weight:600!important;color:#323130}.enhancedPowerApps_dc8a3c45 span[class^=placeholderDescriptionText_]{color:#605e5c!important;margin:20px 0 28px;line-height:23px;font-size:16px!important}@media only screen and (max-width:639.99999px){.hideOnMobileDevices_dc8a3c45{display:none!important}}
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.d.ts
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.d.ts
@ -1,5 +1,6 @@
 declare const styles: {
    enhancedPowerApps: string;
+    hideOnMobileDevices: string;
 };
 export default styles;
 //# sourceMappingURL=EnhancedPowerApps.module.scss.d.ts.map
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.d.ts.map
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.d.ts.map
@ -1 +1 @@
-{"version":3,"file":"EnhancedPowerApps.module.scss.d.ts","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;CAEX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"EnhancedPowerApps.module.scss.d.ts","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;CAGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.js
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.js
@ -1,7 +1,8 @@
 /* tslint:disable */
 require("./EnhancedPowerApps.module.css");
 var styles = {
-    enhancedPowerApps: 'enhancedPowerApps_466fc2fc'
+    enhancedPowerApps: 'enhancedPowerApps_dc8a3c45',
+    hideOnMobileDevices: 'hideOnMobileDevices_dc8a3c45'
 };
 export default styles;
 /* tslint:enable */ 
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.js.map
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.js.map
@ -1 +1 @@
-{"version":3,"file":"EnhancedPowerApps.module.scss.js","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAC1C,IAAM,MAAM,GAAG;IACb,iBAAiB,EAAE,4BAA4B;CAChD,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB"}
+{"version":3,"file":"EnhancedPowerApps.module.scss.js","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,gCAAgC,CAAC,CAAC;AAC1C,IAAM,MAAM,GAAG;IACb,iBAAiB,EAAE,4BAA4B;IAC/C,mBAAmB,EAAE,8BAA8B;CACpD,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB"}
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.d.ts
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.d.ts
@ -41,6 +41,10 @@ export interface IEnhancedPowerAppsProps {
     * Whether we show border or not
     */
    border: boolean;
+    /**
+     * Whether we show webpart or not
+     */
+    isWebPartHiddenOnSmallDevices: boolean;
    /**
     * Selected theme values to pass to Power Apps
     */
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.d.ts.map
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.d.ts.map
@ -1 +1 @@
-{"version":3,"file":"IEnhancedPowerAppsProps.d.ts","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,cAAc,GAAG,SAAS,CAAC;IAEzC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB"}
+{"version":3,"file":"IEnhancedPowerAppsProps.d.ts","sourceRoot":"","sources":["../../../../src/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,cAAc,GAAG,SAAS,CAAC;IAEzC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,6BAA6B,EAAE,OAAO,CAAC;IAEvC;;OAEG;IACH,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB"}
--- a/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/loc/en-us.js
+++ b/samples/react-enhanced-powerapps/lib/webparts/enhancedPowerApps/loc/en-us.js
@ -26,6 +26,7 @@ define([], function() {
    PlaceholderIconText: "Enhanced Microsoft Power Apps",
    PropertyPaneDescription: "Add a custom business app by pasting its web link or ID below.",
    BasicGroupName: "Basic Configuration",
-    AppWebLinkFieldLabel: "App web link or ID"
+    AppWebLinkFieldLabel: "App web link or ID",
+    IsWebPartHiddenOnSmallDevicesFieldLabel: "Hide webpart on mobile devices"
  }
 });
--- a/samples/react-enhanced-powerapps/package-lock.json
+++ b/samples/react-enhanced-powerapps/package-lock.json
@ -2939,6 +2939,14 @@
        "tslint": "~5.12.1",
        "tslint-microsoft-contrib": "~5.2.1",
        "typescript": "~3.3.3"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "3.3.4000",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.4000.tgz",
+          "integrity": "sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==",
+          "dev": true
+        }
      }
    },
    "@microsoft/sp-build-core-tasks": {
@ -3715,16 +3723,6 @@
        "msal": "1.4.13",
        "msalLegacy": "npm:msal@1.4.12",
        "tslib": "~1.10.0"
-      },
-      "dependencies": {
-        "msalLegacy": {
-          "version": "npm:msal@1.4.12",
-          "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
-          "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
-          "requires": {
-            "tslib": "^1.9.3"
-          }
-        }
      }
    },
    "@microsoft/sp-loader": {
@ -15970,6 +15968,14 @@
        "tslib": "^1.9.3"
      }
    },
+    "msalLegacy": {
+      "version": "npm:msal@1.4.12",
+      "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
+      "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
    "multicast-dns": {
      "version": "6.2.3",
      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
@ -18535,14 +18541,13 @@
      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao="
    },
    "react": {
-      "version": "16.8.5",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.5.tgz",
-      "integrity": "sha512-daCb9TD6FZGvJ3sg8da1tRAtIuw29PbKZW++NN4wqkbEvxL+bZpaaYb4xuftW/SpXmgacf1skXl/ddX6CdOlDw==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.13.5"
+        "prop-types": "^15.6.2"
      }
    },
    "react-ace": {
@ -21815,9 +21820,9 @@
      }
    },
    "typescript": {
-      "version": "3.3.4000",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.4000.tgz",
-      "integrity": "sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==",
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
+      "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
      "dev": true
    },
    "ua-parser-js": {
--- a/samples/react-enhanced-powerapps/package.json
+++ b/samples/react-enhanced-powerapps/package.json
@ -1,6 +1,6 @@
 {
    "name": "react-enhanced-powerapps",
-    "version": "1.1.0",
+    "version": "1.2.0",
    "private": true,
    "main": "lib/index.js",
    "engines": {
@ -21,12 +21,12 @@
        "@microsoft/sp-webpart-base": "1.13.1",
        "@pnp/spfx-controls-react": "1.19.0",
        "@pnp/spfx-property-controls": "1.19.0",
-        "office-ui-fabric-react": "6.214.0",
-        "react": "16.8.5",
-        "react-dom": "16.8.5",
        "lodash": ">=4.17.19",
-        "serialize-javascript": ">=2.1.1",
-        "lodash.template": ">=4.5.0"
+        "lodash.template": ">=4.5.0",
+        "office-ui-fabric-react": "6.214.0",
+        "react": "^16.13.1",
+        "react-dom": "16.8.5",
+        "serialize-javascript": ">=2.1.1"
    },
    "devDependencies": {
        "@microsoft/rush-stack-compiler-3.3": "0.3.5",
@ -47,6 +47,7 @@
        "stylelint-config-css-modules": "^2.2.0",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-scss": "^3.18.0",
+        "typescript": "^3.9.10",
        "webpack-bundle-analyzer": "^3.8.0"
    }
 }
--- a/samples/react-enhanced-powerapps/sharepoint/solution/react-enhanced-powerapps.sppkg
+++ b/samples/react-enhanced-powerapps/sharepoint/solution/react-enhanced-powerapps.sppkg
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.manifest.json
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.manifest.json
@ -21,6 +21,7 @@
    "properties": {
      "layout": 'AspectRatio',
      "aspectratio": '16:9',
+      "isWebPartHiddenOnSmallDevices":false
    }
  }]
 }
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.ts
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/EnhancedPowerAppsWebPart.ts
@ -59,6 +59,7 @@ export interface IEnhancedPowerAppsWebPartProps {
  height: number;
  width: number;
  aspectratio: '16:9'|'3:2'|'16:10'|'4:3'|'Custom';
+  isWebPartHiddenOnSmallDevices: boolean;
  themeValues: string[];
 }

@ -132,6 +133,7 @@ export default class EnhancedPowerAppsWebPart extends BaseClientSideWebPart<IEnh
        height: clientHeight,
        themeVariant: this._themeVariant,
        border: this.properties.border,
+        isWebPartHiddenOnSmallDevices: this.properties.isWebPartHiddenOnSmallDevices,
        themeValues: this.properties.themeValues
      }
    );
@ -172,6 +174,9 @@ export default class EnhancedPowerAppsWebPart extends BaseClientSideWebPart<IEnh
                PropertyPaneToggle('border', {
                  label: strings.BorderFieldLabel
                }),
+                PropertyPaneToggle('isWebPartHiddenOnSmallDevices', {
+                  label: strings.IsWebPartHiddenOnSmallDevicesFieldLabel
+                }),
                PropertyPaneChoiceGroup('layout', {
                  label: strings.LayoutFieldLabel,
                  options: [
@ -224,7 +229,7 @@ export default class EnhancedPowerAppsWebPart extends BaseClientSideWebPart<IEnh
                }),
                this.properties.layout === "AspectRatio" && this.properties.aspectratio === "Custom" && PropertyPaneTextField('height', {
                  label: strings.HeightFieldLabel,
-                }),
+                })
              ]
            },
            {
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss
@ -22,3 +22,9 @@
  }
  // END
 }
+
+.hideOnMobileDevices{
+  @include ms-screen-md-down {
+    display: none !important;
+}
+}
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.ts
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/EnhancedPowerApps.module.scss.ts
@ -1,7 +1,8 @@
 /* tslint:disable */
 require("./EnhancedPowerApps.module.css");
 const styles = {
-  enhancedPowerApps: 'enhancedPowerApps_466fc2fc'
+  enhancedPowerApps: 'enhancedPowerApps_dc8a3c45',
+  hideOnMobileDevices: 'hideOnMobileDevices_dc8a3c45'
 };

 export default styles;
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/EnhancedPowerApps.tsx
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/EnhancedPowerApps.tsx
@ -26,6 +26,7 @@ export default class EnhancedPowerApps extends React.Component<IEnhancedPowerApp
      dynamicPropName,
      locale,
      border,
+      isWebPartHiddenOnSmallDevices,
      height
     }  = this.props;

@ -55,13 +56,11 @@ export default class EnhancedPowerApps extends React.Component<IEnhancedPowerApp
        }
      });
    }
-
-
    // Build the frame url
    const frameUrl: string = `${appUrl}?source=SPClient-EnhancedPowerAppsWebPart&amp;locale=${locale}&amp;enableOnBehalfOf=true&amp;authMode=onbehalfof&amp;hideNavBar=true&amp;${dynamicPropValue}${themeParams}&locale=${locale}`;

    return (
-      <div className={ styles.enhancedPowerApps } style={needConfiguration ? {height:`315px`}:{height:`${height}px`}}>
+      <div className={ isWebPartHiddenOnSmallDevices?styles.enhancedPowerApps && styles.hideOnMobileDevices:styles.enhancedPowerApps} style={needConfiguration ? {height:`315px`}:{height:`${height}px`}}>
        {needConfiguration &&
         <Placeholder
         iconName='PowerApps'
@ -72,7 +71,8 @@ export default class EnhancedPowerApps extends React.Component<IEnhancedPowerApp
         {!needConfiguration &&
         <>
        { this.props.appWebLink &&
-        <iframe src={frameUrl} scrolling="no" allow="geolocation *; microphone *; camera *; fullscreen *;" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-forms allow-orientation-lock allow-downloads" width={this.props.width} height={height}
+        <iframe src={frameUrl} scrolling="no" allow="geolocation *; microphone *; camera *; fullscreen *;" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-forms allow-orientation-lock allow-downloads" 
+        width={this.props.width} height={height}
        frameBorder={border ? "1": "0"}
        ></iframe>
        }
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.ts
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/components/IEnhancedPowerAppsProps.ts
@ -54,6 +54,11 @@ export interface IEnhancedPowerAppsProps {
   */
  border: boolean;

+  /**
+   * Whether we show webpart or not
+   */
+  isWebPartHiddenOnSmallDevices: boolean;
+
  /**
   * Selected theme values to pass to Power Apps
   */
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/loc/en-us.js
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/loc/en-us.js
@ -26,6 +26,7 @@ define([], function() {
    PlaceholderIconText: "Enhanced Microsoft Power Apps",
    PropertyPaneDescription: "Add a custom business app by pasting its web link or ID below.",
    BasicGroupName: "Basic Configuration",
-    AppWebLinkFieldLabel: "App web link or ID"
+    AppWebLinkFieldLabel: "App web link or ID",
+    IsWebPartHiddenOnSmallDevicesFieldLabel: "Hide on mobile devices"
  }
 });
--- a/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/loc/mystrings.d.ts
+++ b/samples/react-enhanced-powerapps/src/webparts/enhancedPowerApps/loc/mystrings.d.ts
@ -26,6 +26,7 @@ declare interface IEnhancedPowerAppsWebPartStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  AppWebLinkFieldLabel: string;
+  IsWebPartHiddenOnSmallDevicesFieldLabel:string;
 }

 declare module 'EnhancedPowerAppsWebPartStrings' {
--- a/samples/react-enhanced-powerapps/temp/manifests.js
+++ b/samples/react-enhanced-powerapps/temp/manifests.js
--- a/samples/react-enhanced-powerapps/temp/manifests.json
+++ b/samples/react-enhanced-powerapps/temp/manifests.json