Access _spPageContextInfo details in SharePoint Framework

If you are into SharePoint development, then you should be familiar with your best friend _spPageContextInfo which gives you more valuable context-based information. In classic SharePoint Pages, you can access it directly like below:

1. //This is how you access page context  
2. _spPageContextInfo.  
3.   
4. // retrieve site url  
5. _spPageContextInfo.webAbsoluteUrl  

You can also access the same now from SharePoint Framework too.

1. // This is how you can access the page context info  
2. this.context.pageContext.legacyPageContext;  
3.   
4. // Retreive current user display name  
5. this.context.pageContext.legacyPageContext[‘userDisplayName’]);  
6.   
7. // Even site classification  
8. this.context.pageContext.legacyPageContext[‘siteClassification’]);  

Below is the complete list of object’s properties which sample values,

1. CorrelationId : "b215479e-f056-5000-11a1-ec000000000010"  
2. DesignPackageId : "00000000-0000-0000-0000-000000000000"  
3. PreviewFeaturesEnabled: true  
4. PublishingFeatureOn : false  
5. ReycleBinItemCount : -1  
6. aadInstanceUrl : "https://login.windows.net"  
7. aadTenantId : "96d8e75d--14a031e2320f"  
8. aadUserId : "e7d71f70-13e9-0000-0000-86d1269cd536"  
9. alertsEnabled : true  
10. allowSilverlightPrompt : "True"  
11. blockDownloadsExperienceEnabled : false  
12. canUserCreateMicrosoftForm : true  
13. canUserCreateVisioDrawing : true  
14. cdnPrefix : "static.sharepointonline.com/bld"  
15. crossDomainPhotosEnabled : true  
16. currentCultureLCID : 1033  
17. currentCultureName : "en-US"  
18. currentLanguage : 1033  
19. currentUICultureName : "en-US"  
20. departmentId : null  
21. disableAppViews : false  
22. disableFlows : false  
23. env : "prod"  
24. farmLabel : "US_9_Content"  
25. fid : 16190  
26. formDigestTimeoutSeconds : 1800  
27. groupColor : "#188387"  
28. groupHasHomepage : true  
29. groupHasQuickLaunchConversationsLink : false  
30. groupId : "c771d35a-fee4-4447-9c0a-6c0b199d00fc"  
31. groupType : "Private"  
32. guestsEnabled : false  
33. hasManageWebPermissions : true  
34. hasPendingWebTemplateExtension : false  
35. hideSyncButtonOnODB : false  
36. hubSiteId : null  
37. idleSessionSignOutEnabled : false  
38. isAnonymousGuestUser : false  
39. isAppWeb : false  
40. isEmailAuthenticationGuestUser : false  
41. isExternalGuestUser : false  
42. isHubSite : false  
43. isMultiGeoTenant : false  
44. isNoScriptEnabled : true  
45. isSPO : true  
46. isSiteAdmin : true  
47. isTenantDevSite : false  
48. isWebWelcomePage : false  
49. layoutsUrl: "_layouts/15"  
50. listBaseTemplate : 100  
51. listId : "{7069a902-4347-000-8a03-00fceecfdc70}"  
52. listPermsMask : {High: 2147483647, Low: 4294705151}  
53. listTitle : "Property Locations"  
54. listUrl : "/sites/DemoModernTeamSite/Lists/Property Locations"  
55. maximumFileSize : 15360  
56. msGraphEndpointUrl : "graph.microsoft.com"  
57. navigationInfo : {quickLaunch: Array(14), topNav: Array(2)}  
58. nid : 107  
59. openInClient : false  
60. pageItemId : -1  
61. pageListId : "{7069a902-0000-4000-8a03-21fceecfdc70}"  
62. pagePermsMask : null  
63. pagePersonalizationScope : 1  
64. preferUserTimeZone : false  
65. readOnlyState : null  
66. serverRedirectedUrl : null  
67. serverRequestPath : "/sites/DemoModernTeamSite/Lists/Property Locations/AllItems.aspx"  
68. serverTime : "2018-02-04T04:58:48.0656761Z"  
69. showNGSCDialogForSyncOnODB : false  
70. howNGSCDialogForSyncOnTS : true  
71. siteAbsoluteUrl : "https://constoso.sharepoint.com/sites/DemoModernTeamSite"  
72. siteClassification : ""  
73. siteClientTag : "0$$16.0.7324.1203"  
74. siteColor : "#188387"  
75. siteId : "{1c2e6438-80d2-40cc-9bc5-5aa657c00000}"  
76. sitePagesEnabled : true  
77. siteServerRelativeUrl : "/sites/DemoModernTeamSite"  
78. siteSubscriptionId : "0f6d0000-f22c-47d7-a17f-cd78e6b74a54"  
79. supportPercentStorePath : true  
80. supportPoundStorePath : true  
81. systemUserKey : "i:0h.f|membership|10030000000003d@live.com"  
82. tenantAppVersion : "3704586950"  
83. themeCacheToken : "/sites/DemoModernTeamSite:/sites/DemoModernTeamSite/_catalogs/theme/Themed/6FE0689A:9:16.0.7324.1203"  
84. themedCssFolderUrl : "/sites/DemoModernTeamSite/_catalogs/theme/Themed/6FE0689A"  
85. themedImageFileNames : {spcommon.png: "spcommon-B35BB0A9.themedpng?ctag=9",  
86. ellipsis.11x11x32.png: "ellipsis.11x11x32-2F01F47D.themedpng?ctag=9",  
87. O365BrandSuite.95x30x32.png: "O365BrandSuite.95x30x32-C212E2FD.themedpng?ctag=9",  
88. socialcommon.png: "socialcommon-6F3394A9.themedpng?ctag=9",  
89. spnav.png: "spnav-230C537D.themedpng?ctag=9", …}  
90. userDisplayName : "Rajesh Sitaraman"  
91. userEmail : "rajesh.sitaraman@contoso.com"  
92. userFirstDayOfWeek : null  
93. userId : 3  
94. userLoginName : "rajesh.sitaraman@contoso.com"  
95. userTime24 : false  
96. userTimeZoneData : null  
97. viewId : "{7edde8c2-5458-42b4-0000-883094b3837e}"  
98. viewOnlyExperienceEnabled : false  
99. webAbsoluteUrl : "https://contoso.sharepoint.com/sites/DemoModernTeamSite"  
100. webDescription : "Demo Modern Team Site"  
101. webFirstDayOfWeek : 0  
102. webId : "{8985f800-0000-42f2-899a-abb9f24251e3}"  
103. webLanguage : 1033  
104. webLogoUrl : "/sites/DemoModernTeamSite/_api/GroupService/GetGroupImage?  
105. id='8c1914df-0000-4088-a812-96183d42ae27'&hash=636533140690897999"  
106. webPermMasks : {High: 2147483647, Low: 4294705151}  
107. webServerRelativeUrl : "/sites/DemoModernTeamSite"  
108. webTemplate : "64"  
109. webTemplateConfiguration : "GROUP#0"  
110. webTime24 : false  
111. webTimeZoneData : {Description: "(UTC-08:00) Pacific Time (US and Canada)",  
112. Bias: 480, Id: 13, DaylightBias: -60, DaylightDate: {…}, …}  
113. webTitle : "Demo Modern TeamSite"  
114. webUIVersion : 15  

Reference - https://rjesh.com/spPageContextInfo-spfx/

Microsoft Power Apps & Flow Limitation - August 2019

So, I was working on Power Apps & Flow and facing some weird limitations. So I am witting a blog in case I or any one of you got a client that comes with these limitation, you can provide these reference link and ask them to do raise a ticket with Microsoft.

1. Power Apps Forms - Attachment Control File upload size limit to 10 MB.
   
   Though SharePoint allows you to upload 250 MB file per attachment, Power App will only allow you to upload 10 MB file. Recently we got news that the hardcore limit will be increase to 100 MB.  And it will be available by September 2019.
   Update - then have again moved the deadline back and is not available till next year.
   
   Reference -  https://powerusers.microsoft.com/t5/PowerApps-Ideas/PowerApps-Attachments-to-SharePoint-lists-size-limit/idc-p/329930/highlight/true#M27163
2.  Flow time out on Approval action
   
   Flow provides you OOTB Approval action. You can set timeout period up to 30 days. After that flow will timeout. But when you run the flow it may show you error "your flow time out" if you keep it open to see the stage (after 10 to 15 minutes). But if you go back to list and click on running process again it shows it is running. This is somewhat confusing for end users.
   
   Reference - https://www.o365dude.com/2018/06/02/timeout-flow-approvals/
3. Flow Approval action - assigned to change
   If approver is not available, we are not able to delegate approval to someone else. In that case approval will timeout and flow ends. We can use patch mentioned in below link for work around for this now:
   
   Reference - https://sharepointycl.wordpress.com/2018/05/23/microsoft-flow-approval-with-delegation/
4. Flow Approval Action - Markdown language - support for outlook client
   The approval action mail body can be only accept makdown language. This is very time consuming in terms of setting up proper formatting if you do not have practice of markdown language. Also the language has many limitation compare to html formatting. And outlook client is not supporting it. 

I will keep on adding bugs that I am facing. Also I will try to add new post if Microsoft release any update on above issues.

Implement RenderComplete in React SPFx Webpart

Issue -

One of our Modern SharePoint Project HomePage was taking a long time to load. We raise a ticket to Microsoft for same. To Identify the actual loading time of our web parts, Microsoft asks us to implement RenderComplete function in our custom web parts.


Analysis -

The main issue about the function implementation is it is not documented anywhere in any posts. So it was always trying and error situation. So if you are in the same situation, use below code reference to solve the issue.


Code Solution - To implement the functionality, open your code solution and in your web part, follow the below steps:

• Open your interface file. add below property to it
  asynccompfunc:() => void;

• Now open your web part.
• In your web part ts file, add below code in "render" method.
  
  public render(): void {
    const element: React.ReactElement<ISubmitNewsProps> = React.createElement(      SubmitNews,
        {
         // other properties...,
          asynccompfunc:this.renderCompleted
        }
      );
  
      ReactDom.render(element, this.domElement); 
   }
    protected renderCompleted(): void {
      super.renderCompleted();
    }
  
    protected get isRenderAsync(): boolean {
      return true;
    }

• Now open your web part tsx file and add below code in "componenetDidMouth" method.
  
  // Init Function of component mount
    public async componentDidMount() {
      //your code to get data
      this.props.asynccompfunc();
    }

once these changes are applied in your webpats, deploy package. Once your build is deployed, open the page where you have added you web part. Click "Cntr + F12". it will show the performance of your webpart in webpart tab.

Note: This method requires "BaseClientSideWebPart" class to be extended. Application customizer does not extend this class. So we cannot implement this method in Application Customizer.

If you have any questions you can reach out our SharePoint Consulting team here.

SharePoint Online Allow custom scripts - Part 3

We have looked at why Microsoft disabled custom scripts in SharePoint Online and where it affects. We have looked in previous two blogs why and what is alternative. If you have not gone through that, please check below links.

• SharePoint Online Allow custom scripts - Part 1
• SharePoint Online Allow custom scripts - Part 2

In this post, we are going to review how to enable custom scripting on site collection level and what will be its impact.

So if we enable scripting at tenant level we may end up loosing control over security. Instead Microsoft Provided a way to enable scripting at site collection level.

Prerequisite:

• SharePoint Online Management Shell 

Follow below steps to enable scripting at site collection level:

• Open the SharePoint Online Management Shell console. 
• Execute the command to connect the Office 365 :
  
  Connect-SPOService -Url https://tenant-admin.sharepoint.com
  
• Execute the command bellow with the url for the site collection where you want to enable scripting:
  
  Set-SPOSite -Identity https://tenant.sharepoint.com/sites/contoso -DenyAddAndCustomizePages 0

Pros:

• Tenant level scripting enable may take up to 24 hours. But this approach disable the scripting block immediately. 
• As this settings are enabled at specific site collection, you can make sure the scripting do not affect other site collections or tenant.

Conclusion:

We have seen limitations and how to overcome that. If you need to enable scripting, choose the settings as per your need.